Welcome to WebmasterWorld Guest from 54.226.25.231

Forum Moderators: open

Message Too Old, No Replies

setTimeout onmouseout problem

maybe just a syntax mistake?

     

trick

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

5+ Year Member



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

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

10+ Year Member



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

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

5+ Year Member



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

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

10+ Year Member



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

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

5+ Year Member



ah! :)

and you escape the quotes, got it!

thanks so much for the excellent explanation.

: )

 

Featured Threads

Hot Threads This Week

Hot Threads This Month