setTimeout question 1

[kjmaclean]

I have the following image and button code:

<code> <img id="someimage" src="Image1.gif" alt = "" /></code>
.....

<code><li><a class="button1" href="javascript:void()" onclick="javascript:activateNewWindow()"></a></li></code>

This func will replace the Image1.gif image on my page with an animated GIF that runs for 5 seconds. At the end of that time, it must open a new window and display a new page.

Here is func JS code:

<code>function activateNewWindow()
{

/* change image to the Animated gif which will run for 5 sec */
document.getElementById('someimage').src="AnimatedGIF.gif";

window.setTimeout("activateNewWindow()",5000);

}

function activateNewWindow()
{
window.open("SomeNewHTMLPage.html", "", "toolbar=0,location=0, status=0, menubar=0,scrollbars=1,resizable=1");
}
</code>

Problem is, either setTimeout isn't firing or, more likely, I have made a mistake. Image gets replaced but the new window never opens.I can't use setTimeout in the onclick because the image needs to get replaced immediately, and then the new window needs to open.
Any ideas what I am doing wrong? Any help appreciated

 

[preachie]

Hey,

before going deeper, you have two functions with the same name 'activateNewWindow()'?
Maybe you should define different function names?

 

[kjmaclean]

darn, I copied the code wrong.
It should be this:

<code> <img id="someimage" src="Image1.gif" alt = "" /></code>
.....

<code><li><a class="button1" href="javascript:void()" onclick="javascript:changeImage()"></a></li></code>


<code>function changeImage()
{

/* change image to the Animated gif which will run for 5 sec */
document.getElementById('someimage').src="AnimatedGIF.gif";

window.setTimeout("activateNewWindow()",5000);

}

function activateNewWindow()
{
window.open("SomeNewHTMLPage.html", "", "toolbar=0,location=0, status=0, menubar=0,scrollbars=1,resizable=1");
}
</code>


It's weird because I've looked at the proper way to code this on other forums and sites, and I think I'm doing it right.
But what happens is that the image gets changed, but the new window never opens.
If I remove setTimer, and just call the func, the window opens, but I need that 5 second delay.
Thanks for any help you can give

 

[tsuji]

><li><a class="button1" href="javascript:void()" onclick="javascript:activateNewWindow()"></a></li>
[tt]<li><a class="button1" href="javascript:void()" onclick="[blue]activateNewWindow();return false[/blue]">some_description</a></li>[/tt]

 

[kjmaclean]

Thanks for that tsuji -

It's a little better because Firebug is working properly now and I can follow along with what's happening in the code.

What's happening is that setTimeoout fires, waits 5 secs, but activateNewWindow(). doesn't get called.
That seems totally bizarre.

BTW, why the return false?

This seems like a trivial problem and I can't believe I'm having so much trouble with it.

 

[kjmaclean]

If I simply say
<code>setTimeout ("",5000); </code>
and combine the openNewWindow() func into the changeImage () func, the window opens but there is no 5 second delay.
Obviously, I am missing something!

 

[tsuji]

[1] The return false; in the onclick handler shields the page from the abberration of the javascript link href="javascript:void(0)". The latter is not satisfactory making the loading of the image and positioning of the page bewildered and unreliable.

[2] Try out all the options and the resulting behaviour.
[tt]
<ul>
<li>
<a class="button1" href="javascript:void()" onclick="changeImage()">[1] your line: error out but seems partially work, hence misleading.</a>
</li>
<li>
<a class="button1" href="javascript:void()" onclick="changeImage();return false;">[2] should be all fine.</a>
</li>
<li>
<a class="button1" href="#" onclick="changeImage();">[3] no return false; it should be all fine on the scrolling to top may be disturbing if the link is found at fairly low location of the page.</a>
</li>
<li>
<a class="button1" href="#" onclick="changeImage();return false;">[4] with return false; should be all fine without the disturbing scrolling to top of the page.</a>
</li>
<li>
<a class="button1" id="x" href="#x" onclick="changeImage();">[5] without return false but with bookmarker; should be all fine without the disturbing scrolling to top of the page.</a>
</li>
</ul>
[/tt]
[3] Many of trials you mentioned I do not look into, and I think not merit to spend time to look into. I suppose during the debugging one can make all kinds of stupidity just because we don't know what to look for, we all do that.

 

[kjmaclean]

Thanks tsuji, for all your help.

I will try all that. Also, it seems that Javascript works slightly different in IE than in other browsers (no mystery there!)