compare value of javascript variable...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
dardsemail
Forum Contributor
Posts: 136
Joined: Thu Jun 03, 2004 9:02 pm

compare value of javascript variable...

Post by dardsemail »

Hi,

I've been sitting at my computer screen for hours now... I've generated a slideshow and I'm trying my darndest to change the image of the active links to show what slide the user is on. I've got that covered - my problem is that I can't seem to accurately compare the variable of the current slide to the counter I've got. Here's my code. Any suggestions would be absolutely BRILLIANT!

Code: Select all

<script type="text/javascript">
 var photos=new Array()
 var photoslink=new Array()
 var which=1
 var currNum = 1
 var imageNum=1

 //define images. You can have as many as you want:
 photos&#1111;1]="images/ir1.jpg";
 photos&#1111;2]="images/ir3.jpg";
 photos&#1111;3]="images/ir4.jpg";
 photos&#1111;4]="images/ir5.jpg";
 photos&#1111;5]="images/ir6.jpg";
 photos&#1111;6]='images/ir7.jpg';
photos&#1111;7]='images/ir8.jpg';
photos&#1111;8]='images/ir9.jpg';
photos&#1111;9]='images/ir10.jpg';
photos&#1111;10]='images/ir11.jpg';
photos&#1111;11]='images/ir12.jpg';
photos&#1111;12]='images/ir13.jpg';
photos&#1111;13]='images/ir14.jpg';
photos&#1111;14]='images/ir15.jpg';
photos&#1111;15]='images/ir16.jpg';
photos&#1111;16]='images/ir17.jpg';
photos&#1111;17]='images/ir18.jpg';
photos&#1111;18]='images/ir19.jpg';
photos&#1111;19]='images/ir20.jpg';
photos&#1111;20]='images/ir21.jpg';
photos&#1111;21]='images/ir22.jpg';
photos&#1111;22]='images/ir23.jpg';
photos&#1111;23]='images/ir24.jpg';
photos&#1111;24]='images/ir25.jpg';
photos&#1111;25]='images/ir26.jpg';
photos&#1111;26]='images/ir27.jpg';
photos&#1111;27]='images/ir28.jpg';
photos&#1111;28]='images/ir29.jpg';
photos&#1111;29]='images/ir30.jpg';
photos&#1111;30]='images/ir31.jpg';
photos&#1111;31]='images/ir32.jpg';
photos&#1111;32]='images/ir33.jpg';
photos&#1111;33]='images/ir34.jpg';
photos&#1111;34]='images/ir35.jpg';
photos&#1111;35]='images/ir36.jpg';
photos&#1111;36]='images/ir37.jpg';
photos&#1111;37]='images/ir38.jpg';
photos&#1111;38]="images/ir39.jpg";

 //Specify whether images should be linked or not (1=linked)
 var linkornot=0

 //do NOT edit pass this line

 var preloadedimages=new Array()
 for (i=0;i<photos.length;i++)&#123;
 preloadedimages&#1111;i]=new Image()
 preloadedimages&#1111;i].src=photos&#1111;i]
 &#125;

 function applyeffect()&#123;
 if (document.all && photoslider.filters)&#123;
 photoslider.filters.revealTrans.Transition = 7
 photoslider.filters.revealTrans.stop()
 photoslider.filters.revealTrans.apply()
 &#125;
 &#125;

 function playeffect()&#123;
 if (document.all && photoslider.filters)
 photoslider.filters.revealTrans.play()
 &#125;

function keeptrack()&#123;
window.status="Image "+(which+1)+" of "+photos.length
&#125;

function backward()&#123;
if(which==0) which =photos.length-1
if (which>1)&#123;
which--
document.images.photoslider.src=photos&#1111;which]
counter()
keeptrack()
&#125;
&#125;

function forward()&#123;
if(which>photos.length-1) which = 0
if (which<photos.length-1)&#123;
which++
document.images.photoslider.src=photos&#1111;which]
counter()
keeptrack()
&#125;
&#125;

function photoNum(num)&#123;
which = num
document.images.photoslider.src=photos&#1111;which]
counter()
keeptrack()
&#125;

function transport()&#123;
window.location=photoslink&#1111;which]
&#125;

function counter()
&#123;
	imageNum++
&#125;

function showLinks()
&#123;
for (var i=1; i <= 38; i++ ) &#123;
				if(i == imageNum)&#123;
  				document.write('<a href="javascript:photoNum('+i+');" style="background:#435607;color:#ffffff;">'+i+'</a>&nbsp;&nbsp;'); 
				&#125;
				if(i==12)
				&#123;
				document.write('<br /><a href="javascript:photoNum('+i+');">'+i+'</a>&nbsp;&nbsp;')
				&#125;
				if(i==24)
				&#123;
				document.write('<br /><a href="javascript:photoNum('+i+');">'+i+'</a>&nbsp;&nbsp;')
				&#125;
				else
				&#123;
				document.write('<a href="javascript:photoNum('+i+');">'+i+'</a>&nbsp;&nbsp;')
				&#125;
				&#125; 
&#125;
 </script>
Then, within the body, I call the showLinks() function:

Code: Select all

showLinks()
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Do you mean you can't compare "which" with "imageNum"?

Is imageNum simply supposed to keep a count of the number of links the user has clicked? That's what it's doing isn't it?

I don't really see what you're trying to do. Could you give an example of something you're trying?

:-)
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

In fact imageNum starts at 1 and just goes up by 1 every time a user clicks the link. Nothing does anything with it except for the counter() function. Could you explain exactly why you need to compare the variables or correct me if I'm wrong and I'll try and help you out.
dardsemail
Forum Contributor
Posts: 136
Joined: Thu Jun 03, 2004 9:02 pm

Post by dardsemail »

Sorry - I haven't been very good at explaining thus far. Before I do, I've posted my new and revised code below. The application is a slide show generator. The client would like to have links on the page so that, in addition to moving forward and backward a slide, the user can go to a particular slide in the presentation using the numbered links generated. Thus far, the code works. However, they would like to see an indication within the numbered links identifying what slide the user is presently viewing. I am trying to create code that generates a different background colour and text colour for the numeric value of the link that matches the numeric value of the slide. I hope that makes sense.

Here's my updated code:

Code: Select all

var photos=new Array()
 var photoslink=new Array()
 var which=0
 var num=0

 //define images. You can have as many as you want:
 photos&#1111;0]="images/ir1.jpg";
 photos&#1111;1]="images/ir2.jpg";
 photos&#1111;2]="images/ir3.jpg";
 photos&#1111;3]="images/ir4.jpg";
 photos&#1111;4]="images/ir5.jpg";
 photos&#1111;5]='images/ir6.jpg';
photos&#1111;6]='images/ir7.jpg';
photos&#1111;7]='images/ir8.jpg';
photos&#1111;8]='images/ir9.jpg';
photos&#1111;9]='images/ir10.jpg';
photos&#1111;10]='images/ir11.jpg';
photos&#1111;11]='images/ir12.jpg';
photos&#1111;12]='images/ir13.jpg';
photos&#1111;13]='images/ir14.jpg';
photos&#1111;14]='images/ir15.jpg';
photos&#1111;15]='images/ir16.jpg';
photos&#1111;16]='images/ir17.jpg';
photos&#1111;17]='images/ir18.jpg';
photos&#1111;18]='images/ir19.jpg';
photos&#1111;19]='images/ir20.jpg';
photos&#1111;20]='images/ir21.jpg';
photos&#1111;21]='images/ir22.jpg';
photos&#1111;22]='images/ir23.jpg';
photos&#1111;23]='images/ir24.jpg';
photos&#1111;24]='images/ir25.jpg';
photos&#1111;25]='images/ir26.jpg';
photos&#1111;26]='images/ir27.jpg';
photos&#1111;27]='images/ir28.jpg';
photos&#1111;28]='images/ir29.jpg';
photos&#1111;29]='images/ir30.jpg';
photos&#1111;30]='images/ir31.jpg';
photos&#1111;31]='images/ir32.jpg';
photos&#1111;32]='images/ir33.jpg';
photos&#1111;33]='images/ir34.jpg';
photos&#1111;34]='images/ir35.jpg';
photos&#1111;35]='images/ir36.jpg';
photos&#1111;36]='images/ir37.jpg';
photos&#1111;37]='images/ir38.jpg';
photos&#1111;38]='images/ir39.jpg';

 //Specify whether images should be linked or not (1=linked)
 var linkornot=0

 //do NOT edit pass this line

 var preloadedimages=new Array()
 for (i=0;i<photos.length;i++)&#123;
 preloadedimages&#1111;i]=new Image()
 preloadedimages&#1111;i].src=photos&#1111;i]
 &#125;

 function keeptrack()&#123;
 window.status="Image "+(which+1)+" of "+photos.length
 &#125;

function backward()&#123;
if(which==0) which =photos.length-1
if (which>1)&#123;
which--
document.images.photoslider.src=photos&#1111;which]
keeptrack()
&#125;
&#125;

function forward()&#123;
if(which>photos.length-1) which = 0
if (which<photos.length-1)&#123;
which++
document.images.photoslider.src=photos&#1111;which]
keeptrack()
&#125;
&#125;

function photoNum(num)&#123;
which = num
document.images.photoslider.src=photos&#1111;which]
keeptrack()
&#125;

function showLinks()
&#123;
document.write(num)
 for (linkNum=0;linkNum<=38;linkNum++)
 &#123;
 if (linkNum == num)
 	&#123;
	document.write('<a href="javascript:photoNum('+linkNum+')" style="background:#435607;color:#ffffff;">'+linkNum+'</a>&nbsp;&nbsp;')
	&#125;
	else
	&#123;
	document.write('<a href="javascript:photoNum('+linkNum+')">'+linkNum+'</a>&nbsp;&nbsp;')
	&#125;
&#125;
&#125;

 function transport()&#123;
 window.location=photoslink&#1111;which]
 &#125;
within the body of the page I have the following code:

Code: Select all

document.write('<img src="'+photos&#1111;0]+'" name="photoslider" border=0>')
as well as links that call the page forward and backward script. These links also work fine. Its just trying to match the value of the current slide with the value of linkNum so that I can identify that link with different highlighting features.

Thanks so much in your interest in helping out!
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Sorry haven't been in the forum for a while.

Here you go. You need to call the function showLinks() everytime you need to update which one is highlighted. I've used innerHTML instead of document.write in here but I hope it seems clear why it wasn't working before :-D

Code: Select all

<html>
<head>
<script language="javascript">
<!-- Hide
var photos=new Array() 
var photoslink=new Array() 
var which=1
var num=0 

//define images. You can have as many as you want: 
photos&#1111;0]="ir1.jpg"; 
photos&#1111;1]="ir2.jpg"; 
photos&#1111;2]="ir3.jpg"; 


//Specify whether images should be linked or not (1=linked) 
var linkornot=0 

//do NOT edit pass this line 

var preloadedimages=new Array() 
for (i=0;i<photos.length;i++)&#123; 
preloadedimages&#1111;i]=new Image() 
preloadedimages&#1111;i].src=photos&#1111;i] 
&#125; 

function keeptrack()&#123; 
window.status="Image "+which+" of "+photos.length 
&#125; 

function backward()&#123; 
if(which==0) which =photos.length-1 
if (which>1)&#123; 
which-- 
document.images.photoslider.src=photos&#1111;which] 
keeptrack() 
&#125; 
&#125; 

function forward()&#123; 
if(which>photos.length-1) which = 0 
if (which<photos.length-1)&#123; 
which++ 
document.images.photoslider.src=photos&#1111;which] 
keeptrack()
&#125; 
&#125; 

function photoNum(num)&#123; 
which = num 
document.images.photoslider.src=photos&#1111;which-1] 
keeptrack()
&#125; 

function showLinks() 
&#123; 
nav = document.getElementById('linkSpan')
nav.innerHTML = ''
for (linkNum=1;linkNum<=photos.length;linkNum++) 
&#123; 
if (linkNum == which) 
   &#123; 
   nav.innerHTML += '<a href="javascript:photoNum('+linkNum+'); showLinks()" style="background:#435607;color:#ffffff;">'+linkNum+'</a>&nbsp;&nbsp;'
   &#125; 
   else 
   &#123; 
   nav.innerHTML += '<a href="javascript:photoNum('+linkNum+'); showLinks()">'+linkNum+'</a>&nbsp;&nbsp;'
   &#125; 
&#125; 
&#125; 

function transport()&#123; 
window.location=photoslink&#1111;which] 
&#125; 

// End -->
</script>
</head>
<body bgcolor="#333333">

<span id="linkSpan"><script>showLinks()</script></span>
<p>
<img src="ir1.jpg" name="photoslider">

</body>
</html>
dardsemail
Forum Contributor
Posts: 136
Joined: Thu Jun 03, 2004 9:02 pm

Post by dardsemail »

thanks! i'll give it a shot. Much appreciated!!!
Post Reply