Page 1 of 1

compare value of javascript variable...

Posted: Mon Nov 29, 2004 10:53 pm
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()

Posted: Fri Dec 03, 2004 9:50 am
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?

:-)

Posted: Fri Dec 03, 2004 9:58 am
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.

Posted: Fri Dec 03, 2004 12:34 pm
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!

Posted: Wed Dec 08, 2004 6:04 pm
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>

Posted: Thu Dec 09, 2004 10:39 pm
by dardsemail
thanks! i'll give it a shot. Much appreciated!!!