469,644 Members | 2,008 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,644 developers. It's quick & easy.

setInterval in IE

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!

Expand|Select|Wrap|Line Numbers
  1. var i=-1;
  2. var t;
  3. var image = new Array();
  4. image[0] = "amazinggrace.jpg";
  5. image[1] = "brazilbrazil.jpg";
  6. image[2] = "pooljump.jpg";
  7.  
  8. var movieblurb = new Array();
  9. movieblurb[0] = "Lorem ipsum dolor sit amet.";
  10. movieblurb[1] = "everyone loves brazil.";
  11. movieblurb[2] = "everyone loves popespeech.";
  12.  
  13. var headline = new Array();
  14. headline[0] = "MOVIE TIME!";
  15. headline[1] = "IT'S TIME FOR A MOVIE!";
  16. headline[2] = "HEY HOW ABOUT A MOVIE?!";
  17.  
  18. var linka = new Array();
  19. linka[0] = "http://www.cathedralfoundation.org";
  20. linka[1] = "http://www.ampsinc.net";
  21. linka[2] = "http://www.vatican.net";
  22.  
  23. var linktitlea = new Array();
  24. linktitlea[0] = "cathedral foundation";
  25. linktitlea[1] = "AMPS";
  26. linktitlea[2] = "vatican II";
  27.  
  28. function section() {
  29.  
  30. i=i+1;
  31.  
  32. if (i == image.length) 
  33.     i=0;
  34.  
  35. var newImage = "<img src='images/" + image[i] + "'>";
  36. var newBlurb = movieblurb[i];
  37. var newHeadline = headline[i];
  38. var newLinka = "<a href='" + linka[i] + "'>" + linktitlea[i] + "</a>";
  39.  
  40. document.getElementById('image').innerHTML = newImage;
  41. document.getElementById('headline').innerHTML = newHeadline;
  42. document.getElementById('blurb').innerHTML = newBlurb;
  43. document.getElementById('linka').innerHTML = newLinka;
  44. document.getElementById('linkb').innerHTML = newLinkb;
  45. document.getElementById('linkc').innerHTML = newLinkc;
  46.  
  47. }
  48.  
  49. t=setInterval("section();", 2000);
  50.  
[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]
Jun 14 '07 #1
25 4966
mrhoo
428 256MB
document.getElementById('image').innerHTML = newImage;
Jun 14 '07 #2
?? is that incorrect?

thanks!
Jun 15 '07 #3
gits
5,390 Expert Mod 4TB
hi ...

think you have to use:

Expand|Select|Wrap|Line Numbers
  1. var interval = window.setInterval(func_ref, milliseconds);
kind regards ...
Jun 15 '07 #4
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!
Jun 15 '07 #5
acoder
16,027 Expert Mod 8TB
Call section() before the setInterval.
Jun 16 '07 #6
gits
5,390 Expert Mod 4TB
yep ... it is really simple ;)
Jun 16 '07 #7
i tried this to no avail:

Expand|Select|Wrap|Line Numbers
  1. section();
  2.  
  3. t = window.setInterval("section();", 2000);
Jun 18 '07 #8
gits
5,390 Expert Mod 4TB
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! ...
Jun 18 '07 #9
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.
Jun 18 '07 #10
gits
5,390 Expert Mod 4TB
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 ...
Jun 18 '07 #11
thanks so much for your help!
Jun 18 '07 #12
gits
5,390 Expert Mod 4TB
glad you got it working ;) ... come back when you have more questions

kind regards ...
Jun 18 '07 #13
Plater
7,872 Expert 4TB
I use IE6 and I never had any trouble using:
Expand|Select|Wrap|Line Numbers
  1. var ourinterval=setInterval("SendUpdate()",500);
  2.  
Perhaps it was because he had a rouge ";" after his function reference
Jun 18 '07 #14
gits
5,390 Expert Mod 4TB
I use IE6 and I never had any trouble using:
Expand|Select|Wrap|Line Numbers
  1. var ourinterval=setInterval("SendUpdate()",500);
  2.  
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 ...
Jun 18 '07 #15
Plater
7,872 Expert 4TB
Hmm, nope. Mine worked with and without the ";" in there just fine.
Jun 18 '07 #16
gits
5,390 Expert Mod 4TB
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?
Jun 18 '07 #17
Plater
7,872 Expert 4TB
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.
Jun 18 '07 #18
gits
5,390 Expert Mod 4TB
hmmm ... strange ... ;) i'll try it when having time and an IE ;) ... it's interesting ...
Jun 18 '07 #19
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:
Expand|Select|Wrap|Line Numbers
  1. function next() {
  2. window.clearInterval(timer);
  3. section();
  4. var timer=window.setInterval("section()", 7000);
  5. }
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!
Jun 20 '07 #20
gits
5,390 Expert Mod 4TB
hmmm ... last time your timer was t only (not timer) ... may be you don't clearTimeout correctly?

kind regards ...
Jun 20 '07 #21
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?
Jun 20 '07 #22
gits
5,390 Expert Mod 4TB
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 ...
Jun 20 '07 #23
keeps21
23
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.

Expand|Select|Wrap|Line Numbers
  1.  
  2. // JavaScript Document
  3.  
  4.  
  5. var i=-1;
  6. var timer;
  7.  
  8. var image = new Array();
  9. image[0] = "amazinggrace.jpg";
  10. image[1] = "brazilbrazil.jpg";
  11. image[2] = "pooljump.jpg";
  12.  
  13. var movieblurb = new Array();
  14. movieblurb[0] = "Lorem ipsum dolor sit amet.";
  15. movieblurb[1] = "everyone loves brazil.";
  16. movieblurb[2] = "everyone loves popespeech.";
  17.  
  18. var headline = new Array();
  19. headline[0] = "MOVIE TIME!";
  20. headline[1] = "IT'S TIME FOR A MOVIE!";
  21. headline[2] = "HEY HOW ABOUT A MOVIE?!";
  22.  
  23. var linka = new Array();
  24. linka[0] = "http://www.cathedralfoundation.org";
  25. linka[1] = "http://www.ampsinc.net";
  26. linka[2] = "http://www.vatican.net";
  27.  
  28. var linktitlea = new Array();
  29. linktitlea[0] = "cathedral foundation";
  30. linktitlea[1] = "AMPS";
  31. linktitlea[2] = "vatican II";
  32.  
  33. function section() {
  34.  
  35. i=i+1;
  36.  
  37. if (i == image.length) 
  38.     i=0;
  39.  
  40. var newImage = "<img src='images/" + image[i] + "'>";
  41. var newBlurb = movieblurb[i];
  42. var newHeadline = headline[i];
  43. var newLinka = "<a href='" + linka[i] + "'>" + linktitlea[i] + "</a>";
  44.  
  45. document.getElementById('image').innerHTML = newImage;
  46. document.getElementById('headline').innerHTML = newHeadline;
  47. document.getElementById('blurb').innerHTML = newBlurb;
  48. document.getElementById('linka').innerHTML = newLinka;
  49.  
  50.  }
  51.  
  52. // Forward
  53. var interval = window.setInterval("section()", 0);
  54. timer = window.setInterval("section()", 6000);
  55.  
  56. function forward() {
  57. section();
  58.  
  59. }
  60.  
[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]
Jul 28 '07 #24
gits
5,390 Expert Mod 4TB
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
Jul 30 '07 #25
Plater
7,872 Expert 4TB
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.
Jul 30 '07 #26

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

10 posts views Thread by Richard A. DeVenezia | last post: by
5 posts views Thread by Richard A. DeVenezia | last post: by
1 post views Thread by Weston C | last post: by
17 posts views Thread by George Hester | last post: by
4 posts views Thread by barry | last post: by
3 posts views Thread by Andrew Poulos | last post: by
2 posts views Thread by shawnwperkins | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.