Cross-Browser setTimeout Problem

Question

aparnesh 9 Junior Poster

16 Years Ago

I have created a timer function using setTimeout. The function works perfectly in IE and Opera but doesn't work in FireFox or Netscape 6. I checked out my Javascript book where it says setTimeout is compatible with all browsers. So where am I going wrong ?

function showPics()
{
	if (i > 4)
		i = 0;
	var index = i;
	document.images("Img1").src = ImgBld[index];
	index = index + 1;
	if (index  > 4)
		index = index - 5;
	document.images("Img2").src = ImgBld[index];
	index = index + 1;
	if (index  > 4)
		index = index - 5;
	document.images("Img3").src = ImgBld[index];
	index = index + 1;
	if (index  > 4)
		index = index - 5;
	document.images("Img4").src = ImgBld[index];
	index = index + 1;
	if (index  > 4)
		index = index - 5;
	document.images("Img5").src = ImgBld[index];
	index = index + 1;
	if (index  > 4)
		index = index - 5;
	i = i + 1;
	setTimeout("showPics()",2000);
}

The function reads an array of image paths and displays the images in different Image tags. With the timer the images automatically change after every 2 secs. Works fine in IE & Opera, doesn't work at all in FF and NN.

javascript

5 Contributors
11 Replies
515 Views
1 Year Discussion Span
Latest Post 15 Years Ago Latest Post by Nine of Hearts

serkan sendur 821 Postaholic

16 Years Ago

instead of accessing the images as collection items, use document.getElementById('imageID')
i dont know of opera but this works both in ie and firefox. Also since you are accessing the collection array, you might(i didnt try) use "[]" instead of "()". If you dont use document.getElementById method, try replacing the parathesis with brackets.

serkan sendur 821 Postaholic

16 Years Ago

I don't think you understood the problem. The problem has nothing to do with arrays or getElementById or brackets. The problem is setTimeout function is working in IE and Opera and not FF or NN. Otherwise the code is fine

I used setTimeout and it works both in ie and ff, www.altivi.com/shop go to the bottom of the page check if the lines get highlighted line by line. If it displays correctly, then this will be a proof that setTimeout works both in ie and ff, but i use latest version of firefox, what is your version?

DangerDev 107 Posting Pro in Training

16 Years Ago

hi
try this simple code it is working fine in both IE & FF:

<html>
<head>
<title> simple count down</title>

<script language='javascript'>
var i=0;
var tid=0;
	function ut()
	{
		i++;
		document.frmT.txtB.value=i;
		tid=setTimeout("ut()",1000);
	}
</script>
</head>
<body>
	<form name='frmT'>
	 count down start now : 
		<input type=text name='txtB'/>
	</form>
	<script>
		ut();
	</script>
</body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

aparnesh 9 Junior Poster · Answer 1 · 2008-02-14T01:10:15+00:00

I don't think you understood the problem. The problem has nothing to do with arrays or getElementById or brackets. The problem is setTimeout function is working in IE and Opera and not FF or NN. Otherwise the code is fine

DangerDev 107 Posting Pro in Training · Answer 2 · 2008-02-14T12:55:53+00:00

there might be problem in other lines u can check that by putting alert boxes between codes. if all are working then its fine.

u'r using () that could be problem use[], or better use getElementById()
coz setTimeOut() is compatible u can check my previous post.

aparnesh 9 Junior Poster · Answer 3 · 2008-02-15T01:47:50+00:00

Thanks serkansendur and DangerDev. The problem was with the 'document.images(...)' part. I changed it to document.images[...] and it's working fine.
The display of '(' and '[' is almost similar in my Notepad font ('Bookman Old Style') so it was difficult to notice.
serkansendur, I apologise for my rather curt last message. You were absolutely right in pointing out the problem. My apologies

serkan sendur 821 Postaholic · Answer 4 · 2008-02-15T03:08:16+00:00

Thanks serkansendur and DangerDev. The problem was with the 'document.images(...)' part. I changed it to document.images[...] and it's working fine.
The display of '(' and '[' is almost similar in my Notepad font ('Bookman Old Style') so it was difficult to notice.
serkansendur, I apologise for my rather curt last message. You were absolutely right in pointing out the problem. My apologies

Add to my reputation so i will forgive you then ;) No problem, sometimes coding javascript makes me angry too. If you use visual studio .net,you can debug javascript although not as developed as debugging c#. Select tools >internet options > advanced in your ie browser window. In the advanced tab find "disable script debugging (internet explorer)", deselect the checkbox. Apply the changes then rerun your application in the debug mode. When javascript error occurs, internet explorer will ask you whether to debug the error. if you click yes then it will open up the visual studio editor and highlight the javascript line with the error notifying a simple error message like "null object" or "syntax error". Although not enough developed, this utility of visual studio makes javascript development easier.

~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster · Answer 5 · 2008-02-16T12:00:53+00:00

> instead of accessing the images as collection items, use document.getElementById('imageID')

Actually it's the other way round. Instead of traversing the DOM tree it's better to use the images collection which holds a reference to all the images object in the document.

Nine of Hearts 29 Newbie Poster · Answer 6 · 2009-07-22T15:01:25+00:00

I'm currently tearing my hair out with this one. On my website the icon links to other pages "spin" when hovered over. They actually just squish sideways, but it looks like they spin. Anyway, this works well in IE and sort of in Firefox. Except for the index.php page, on there the exact (it's called via an include) same code doesn't work. Why oh why oh why?

function xspin()
    {
    var t_time = 0;
    var i_time = 10;
    for (i_phse = 0; i_phse <= i_time; i_phse++)
        {
        i_time += 60;
        i_wdth = Math.abs(Math.cos((i_phse/(i_time/2)) * Math.PI) * 48);
        t_actn = setTimeout("document.ikon01.style.width = " + i_wdth + "; document.ikon01.style.height = 48;", t_time);
        }
    }

Like I say, the above works on certain pages, but not the index page. On the test version the index page is now virtually just

so I don't think it's clashing with other code on the page, beacuse there isn't any! Any help greatly appreciated.

~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster · Answer 7 · 2009-07-23T01:03:07+00:00

To start off, compare the HTML markup generated by both the pages; the page which works and the page which doesn't. What difference can you see?

Another option would be to Firebug, the excellent Javascript debugging utility which can be installed as a Firefox addon, to trace your problem. And since this doesn't work, tracking down the real problem [dereferencing NULL etc.] would be easier with the Error Console of Firefox which would log all the Javascript errors, if any, present in the script.

Nine of Hearts 29 Newbie Poster · Answer 8 · 2009-07-23T13:38:56+00:00

Thanks for the reply. Have managed to sort it now. The code was actually clashing with the "<!DOCTYPE..." validation clause on the index page. This isn't present on the sub pages. If you specify validation, you can't get away with not specifying units on the "...style.width" method it would appear. Without validation it lets you off. I've been a good boy and put the units in now. I miss them out usually as it avoids having to ParseInt on the value if you want to do maths on it, but shall do it the long winded way in future.