setInterval in IE

[garfunkel214]

Hey guys. I'm aiming to have various images and news rotate after a given amount of time. My js correctly displays the inital image and text but stops in IE and i never gets to 1. In FF, however, it runs through everything and loops continuously as intended. Looks like I have an issue with the setInterval. What do I need to add/omit for it to function properly in IE6+. Any help would be great!

var i=-1;
var t;
var image = new Array();
image[0] = "amazinggrace.jpg";
image[1] = "brazilbrazil.jpg";
image[2] = "pooljump.jpg";
 
var movieblurb = new Array();
movieblurb[0] = "Lorem ipsum dolor sit amet.";
movieblurb[1] = "everyone loves brazil.";
movieblurb[2] = "everyone loves popespeech.";
 
var headline = new Array();
headline[0] = "MOVIE TIME!";
headline[1] = "IT'S TIME FOR A MOVIE!";
headline[2] = "HEY HOW ABOUT A MOVIE?!";
 
var linka = new Array();
linka[0] = "http://www.cathedralfoundation.org";
linka[1] = "http://www.ampsinc.net";
linka[2] = "http://www.vatican.net";
 
var linktitlea = new Array();
linktitlea[0] = "cathedral foundation";
linktitlea[1] = "AMPS";
linktitlea[2] = "vatican II";
 
function section() {
 
i=i+1;
 
if (i == image.length) 
    i=0;
 
var newImage = "<img src='images/" + image[i] + "'>";
var newBlurb = movieblurb[i];
var newHeadline = headline[i];
var newLinka = "<a href='" + linka[i] + "'>" + linktitlea[i] + "</a>";
 
document.getElementById('image').innerHTML = newImage;
document.getElementById('headline').innerHTML = newHeadline;
document.getElementById('blurb').innerHTML = newBlurb;
document.getElementById('linka').innerHTML = newLinka;
document.getElementById('linkb').innerHTML = newLinkb;
document.getElementById('linkc').innerHTML = newLinkc;
 
}
 
t=setInterval("section();", 2000);
 

[HTML]
<div id="image" style="padding-bottom: 5px;"></div>
<div id="headline" style="padding-bottom: 5px; font-family: Helvetica, Trebuchet MS, Verdana; font-size: 16px; font-weight: bold; color: black;"></div>
<div id="blurb" style="padding-bottom: 20px; font-family: Helvetica, Trebuchet MS, Verdana; font-size: 9px; color: black;"></div>
<div id="linka"></div>
<div id="linkb"></div>
<div id="linkc"></div>
[/HTML]

[mrhoo]

document.getElementById('image').innerHTML = newImage;

[garfunkel214]

?? is that incorrect?

thanks!

[gits]

hi ...

think you have to use:

var interval = window.setInterval(func_ref, milliseconds);

kind regards ...

[garfunkel214]

wonderful!

now i realize it waits the specified milliseconds to display the INITIAL array. how can i get it to load immediately and THEN begin counting the 2 seconds??

Thanks!

[acoder]

Call section() before the setInterval.

[gits]

yep ... it is really simple ;)

[garfunkel214]

i tried this to no avail:

section();
 
t = window.setInterval("section();", 2000);

[gits]

sorry i don't understand - doesn't it work? what error occurs? try to put an alert at the beginning of your function and see wheter it is called or not! ...

[garfunkel214]

hmmm okay I added an alert and that occures SO the function IS called properly. But NOTHING happens at all now. Only when i go with ONLY setInterval does anything happen. it seems as if whenever i call the function, it causes the rest to go haywire. I'm at a loss.

[gits]

ok ;) ... that's a little bit tricky now ... for a beginner or when encountering this problem the first time. let me explain it ...

you put your script directly in your page and want it to be executed during load ... the problem is ... when calling section() ... the divs are not rendered at this time ... so document.getElementById('image'); throws an error ... try it in firefox and have a look at the console.

to resolve the problem call the function onload of your body and after that set your interval here too ... remove it from your script-area ... so the function is called after the entire page is fully loaded ...

that will resolve your problem ...

kind regards ...

[garfunkel214]

thanks so much for your help!

[gits]

glad you got it working ;) ... come back when you have more questions

kind regards ...

[Plater]

I use IE6 and I never had any trouble using:

var ourinterval=setInterval("SendUpdate()",500);
 

Perhaps it was because he had a rouge ";" after his function reference

[gits]

I use IE6 and I never had any trouble using:

var ourinterval=setInterval("SendUpdate()",500);
 

Perhaps it was because he had a rouge ";" after his function reference

you might be right ... can you test it? would be interesting to know ... i would test it for myself ... but i don't have an IE6 ready here ;) ... an mac ie may not be representative ... ok?

kind regards ...

[Plater]

Hmm, nope. Mine worked with and without the ";" in there just fine.

[gits]

an other reason might have been that newLinkb ... -c were undefined? might have been that IE aborts fatal with that? an other reason is scoping ... so that setInterval itself would have been undefined ... when window.setInterval solved the problem i think that would have been the case ... but i really don't find why that should have been ... but i always use the full ref since using javascript object-oriented where scoping always has to be considered ... and while FF did well ... i should be wrong ... but why did it solve the problem then?

[Plater]

Well, he said it stopped working completely then, due to other issues. Who knows. My setInterval() *IS* outside all function blocks so that might be it.

[gits]

hmmm ... strange ... ;) i'll try it when having time and an IE ;) ... it's interesting ...

[garfunkel214]

Thanks for the help...everything is running smoothly. NOW i am attempting to implement buttons that allow you to go forward and backward (and maybe pause the rotation).

here is what i put in the HTML to go forward:
[HTML]<img onclick="next();" src="images/news_forward.gif" border="0" height="17" width="17" />[/HTML]

here is the js:

function next() {
window.clearInterval(timer);
section();
var timer=window.setInterval("section()", 7000);
}

So I stop the first setInterval that was in place and run the function to jump ahead RIGHT AWAY one increment then call a new setInterval to begin again. But now the increments are a bit "jumpy" for lack of a better word. They are not always at 7000ms as stated.

If I simply do a new setInterval, the user will have to wait 7000ms after they click the button and that's no good, right?

Any help would be great!

[gits]

hmmm ... last time your timer was t only (not timer) ... may be you don't clearTimeout correctly?

kind regards ...

[garfunkel214]

Oh I'm sorry, I left that part of my code out for you to see. I renamed it timer. So the clearInterval should stop that, correct?

[gits]

in case your variable timer is defined in the global scope (outside a function) ... yes! but you may test it. out-comment your clearInterval and new setTimeout and see what happens ;)

kind regards ...

[keeps21]

So I've been playing with this script as I need a news rotator for my site.

All is working well.

At the minute I have a forward button, which when clicked, moves on to the next story.

The next step for me is to make a back button, as well as a pause/play button,
and I do not have a clue as to how to do this.

Any help would be greatly appreciated.


Thanks alot.

 
// JavaScript Document
 
 
var i=-1;
var timer;
 
var image = new Array();
image[0] = "amazinggrace.jpg";
image[1] = "brazilbrazil.jpg";
image[2] = "pooljump.jpg";
 
var movieblurb = new Array();
movieblurb[0] = "Lorem ipsum dolor sit amet.";
movieblurb[1] = "everyone loves brazil.";
movieblurb[2] = "everyone loves popespeech.";
 
var headline = new Array();
headline[0] = "MOVIE TIME!";
headline[1] = "IT'S TIME FOR A MOVIE!";
headline[2] = "HEY HOW ABOUT A MOVIE?!";
 
var linka = new Array();
linka[0] = "http://www.cathedralfoundation.org";
linka[1] = "http://www.ampsinc.net";
linka[2] = "http://www.vatican.net";
 
var linktitlea = new Array();
linktitlea[0] = "cathedral foundation";
linktitlea[1] = "AMPS";
linktitlea[2] = "vatican II";
 
function section() {
 
i=i+1;
 
if (i == image.length) 
    i=0;
 
var newImage = "<img src='images/" + image[i] + "'>";
var newBlurb = movieblurb[i];
var newHeadline = headline[i];
var newLinka = "<a href='" + linka[i] + "'>" + linktitlea[i] + "</a>";
 
document.getElementById('image').innerHTML = newImage;
document.getElementById('headline').innerHTML = newHeadline;
document.getElementById('blurb').innerHTML = newBlurb;
document.getElementById('linka').innerHTML = newLinka;
 
 }
 
// Forward
var interval = window.setInterval("section()", 0);
timer = window.setInterval("section()", 6000);
 
function forward() {
section();
 
}
 

[HTML]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script language="JavaScript" type="text/javascript" src="rotator.js"></script>
</head>

<body>



<div id="image" style="padding-bottom: 5px;"></div>
<div id="headline" style="padding-bottom: 5px; font-family: Helvetica, Trebuchet MS, Verdana; font-size: 16px; font-weight: bold; color: black;"></div>
<div id="blurb" style="padding-bottom: 20px; font-family: Helvetica, Trebuchet MS, Verdana; font-size: 9px; color: black;"></div>
<div id="linka"></div>

<img onclick="forward();" src="images/button_forward.gif" border="0" />



</body>
</html>

[/HTML]

[gits]

hi ...

let me give you an idea for that - you should store your current image-index in a global variable. your backward-button sets the index - 1 (until it is no 0 else you set it to the length - 1 of your image-array). you should stop the interval in case you want to step back manually (use clearInterval() here) ... or do you want to flip the auto-display?

kind regards

[Plater]

You are setting your interval to a varriable that imediately goes out of scope in the next() function.
So after the first time, you are no longer clearing your interval. So everytime you click, you are actually adding ANOTHER interval thing, probably offset from the other ones. So every 7seconds the first one fires, BUT say like 5 seconds after one of the other ones will fire (because it was offset by a few seconds) giving you your sporadic changes.