473,394 Members | 1,226 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

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";
  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.";
  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?!";
  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";
  23. var linktitlea = new Array();
  24. linktitlea[0] = "cathedral foundation";
  25. linktitlea[1] = "AMPS";
  26. linktitlea[2] = "vatican II";
  28. function section() {
  30. i=i+1;
  32. if (i == image.length) 
  33.     i=0;
  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>";
  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;
  47. }
  49. t=setInterval("section();", 2000);
<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>
Jun 14 '07 #1
25 5215
428 256MB
document.getElementById('image').innerHTML = newImage;
Jun 14 '07 #2
?? is that incorrect?

Jun 15 '07 #3
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

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??

Jun 15 '07 #5
16,027 Expert Mod 8TB
Call section() before the setInterval.
Jun 16 '07 #6
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();
  3. t = window.setInterval("section();", 2000);
Jun 18 '07 #8
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
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
5,390 Expert Mod 4TB
glad you got it working ;) ... come back when you have more questions

kind regards ...
Jun 18 '07 #13
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);
Perhaps it was because he had a rouge ";" after his function reference
Jun 18 '07 #14
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);
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
7,872 Expert 4TB
Hmm, nope. Mine worked with and without the ";" in there just fine.
Jun 18 '07 #16
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
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
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
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
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
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
  2. // JavaScript Document
  5. var i=-1;
  6. var timer;
  8. var image = new Array();
  9. image[0] = "amazinggrace.jpg";
  10. image[1] = "brazilbrazil.jpg";
  11. image[2] = "pooljump.jpg";
  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.";
  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?!";
  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";
  28. var linktitlea = new Array();
  29. linktitlea[0] = "cathedral foundation";
  30. linktitlea[1] = "AMPS";
  31. linktitlea[2] = "vatican II";
  33. function section() {
  35. i=i+1;
  37. if (i == image.length) 
  38.     i=0;
  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>";
  45. document.getElementById('image').innerHTML = newImage;
  46. document.getElementById('headline').innerHTML = newHeadline;
  47. document.getElementById('blurb').innerHTML = newBlurb;
  48. document.getElementById('linka').innerHTML = newLinka;
  50.  }
  52. // Forward
  53. var interval = window.setInterval("section()", 0);
  54. timer = window.setInterval("section()", 6000);
  56. function forward() {
  57. section();
  59. }

<!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">
<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>


<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" />


Jul 28 '07 #24
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
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

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

Similar topics

by: Richard A. DeVenezia | last post by:
At line this.timerId = setInterval (function(){this.step()}, 100) I get error dialog Error:Object doesn't support this property or method. If I change it to this.timerId = setInterval...
by: Richard A. DeVenezia | last post by:
Is some future Mozilla going to support setInterval ( <function:function>, <interval:number> ) ? Right now it seems to be simply setInterval ( <function-text:string>, <interval:number> ) --...
by: Weston C | last post by:
In the course of trying to build a simple clock, I've run into a problem using the setInterval (and setTimeout) function. http://weston.canncentral.org/misc/tkeep/tkeep.html...
by: George Hester | last post by:
Hoe can I use setInterval where its argument is a function which also has an argument? For example I have a function change(Msg) where Msg is dynamically generated and returns nothing at this point...
by: marktm | last post by:
Hi- I am trying to use setInterval to call a method within an object and have not had any luck. I get "Object doesn't support this property or method" when I execute the following code. What I...
by: barry | last post by:
If The script below is exeuted from the onload="startit()" in the body tag everything works fine but when I remove the onload and try to execute by using the attributes.add from within the Page_Load...
by: Andrew Poulos | last post by:
If I have some code that's a bit like this Con = function() { this.op = 1; this.count = 0; } Con.prototype.loop = function() { this.doNext = setInterval(this.next, 100); }...
by: shawn | last post by:
Hi All Was trying to get this bit of code working (simplified of course) for (i=0;i<uuid_num;i++) { window.setInterval(InitMap(uuidValues), timePeriod); } Where uuid_num, uuidValues,...
by: jonahmason | last post by:
hi. a javascript newbie here in dire need of help. for the past 3 days i've been trying to get a script using setinterval to work but a part of the code, that executes after setinterval hits a...
by: shawnwperkins | last post by:
Hi Folks, I'm new to Javascript and just need a little help. I downloaded a script from Dynamic Drive's Web site and I'm trying to make a simple modification and could use some help. :) The...
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.