homepage Welcome to WebmasterWorld Guest from 54.227.11.45
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
setTimeout onmouseout problem
maybe just a syntax mistake?
trick




msg:3526964
 5:59 pm on Dec 13, 2007 (gmt 0)

so I have a script to show a div, which is called by this:
onmouseover="javascript:show('smenu2');"

and to hide the div on mouseout, I currently have this:
onmouseout="javascript:show('');"

which works fine. now I'd like to add a delay, so I'm trying something like this:
onmouseout="setTimeout('show("")'), 2000)"
or
onmouseout="setTimeout('javascript:show("")'), 2000)"

but neither of those work.

here's my show div code:

function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}

what am I doing wrong here?

Thanks!

 

gergoe




msg:3526988
 6:22 pm on Dec 13, 2007 (gmt 0)

You made a small typo, used one more closing brackets as it would be needed. Using setTimeout and setInterval does not require the "javascript:" handler indicators, that code is already assumed to be javascript.

trick




msg:3527043
 7:48 pm on Dec 13, 2007 (gmt 0)

thanks, you're right about the typo. but it still isn't working with this code:

onmouseover="javascript:show('smenu2');" onmouseout="setTimeout("show('')"), 2000;"
or
onmouseover="javascript:show('smenu2');" onmouseout="setTimeout("show('')"), 2000"

:(

gergoe




msg:3527061
 8:15 pm on Dec 13, 2007 (gmt 0)

Well, the bracket was indeed extra, but you should have modified differently :-)

setTimeout() is a method of the window object, it has two parameters, the first is the code you want to "schedule", the second is the delay in milliseconds.

So the correct code is as follows:

onmouseout="setTimeout('show(\'\');', 2000);"

Please note the use of the single and double quotes; You are assigning a parameter to a html object, so it has to be enclosed by quotes - I used the double ones:
onmouseout="..."

As the value of the onmouseout attribute, we could "type in" the following javascript code:
setTimeout("show('')", 2000);

If I wouldn't use different quotes, the line would not be syntactically correct anymore:
setTimeout("show("<<double quote found, so the string ends here, no closing bracket for setTimeout, instead a double quote can be found, you will get a javascript error from your browser>>")", 2000);

Now putting the two together we get:
onmouseout="setTimeout("<<double quote found, browser will think the value ends here, will issue a javascript warning>>show('')", 2000);"

This is not correct once again, now the value of the html attribute goes wrong (thus the javascript will not run again, because the setTimeout(" is not a valid syntax).

To circumvent this, we change the outer and inner quotes in first parameter of setTimeout:
setTimeout('show(\'\');', 2000);

And this syntax can be easily placed in the onmouseout attribute, as you can see the top of this post.

trick




msg:3527086
 8:44 pm on Dec 13, 2007 (gmt 0)

ah! :)

and you escape the quotes, got it!

thanks so much for the excellent explanation.

: )

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved