settimeout and this keyword

[Adam Risser]

Hi everyone,

I am modifying the suckerfish dropdown code to use settimeout to have
a slight pause before the menus disappear to make it more user
friendly. I have hit a snag with the following statement:

li.onmouseout=function()
{
timerID=setTimeout('this.getElementsByTagName("UL" )
[0].style.display = "none"', timecount);
}

If I put take the statement

this.getElementsByTagName("UL")[0].style.display = "none";

out of the settimeout function, it works. (w/o the pause, obviously).
With the settimeout function, I get "this.getElementByTagName is not a
function" error.

I have tried putting this.getElementsByTagName("UL")[0] is a variable
and then using that in the settimeout function, but then each li will
only open the very last menu in the list. (ie all the menu items open
the last sub menu)

Here is a link to a stripped down version of the code.
http://mustang.millersville.edu/~hr/index3.php

Thanks everyone!

[scripts.contact]

On Apr 3, 2:20 pm, "Adam Risser" <[e-mail]:

Hi everyone,

I am modifying the suckerfish dropdown code to use settimeout to have
a slight pause before the menus disappear to make it more user
friendly. I have hit a snag with the following statement:

li.onmouseout=function()
{
timerID=setTimeout('this.getElementsByTagName("UL" )
[0].style.display = "none"', timecount);

timerID=setTimeout(function(){
this.getElementsByTagName("UL")[0].style.display = "none"
}, timecount);

>
}

[Walton]

On Apr 3, 3:57 pm, "scripts.contact" <[e-mail]>
wrote:

On Apr 3, 2:20 pm, "Adam Risser" <[e-mail]:

Hi everyone,

I am modifying the suckerfish dropdown code to use settimeout to have
a slight pause before the menus disappear to make it more user
friendly. I have hit a snag with the following statement:

li.onmouseout=function()
{
timerID=setTimeout('this.getElementsByTagName("UL" )
[0].style.display = "none"', timecount);

this solution doesn't work:

timerID=setTimeout(function(){

you can't use the "this" keyword here. you are no longer in the scope
of the "li" element, hence it "this" no longer points to the li
element.

this.getElementsByTagName("UL")[0].style.display = "none"
}, timecount);

}

try this code instead:
li.onmouseout=function() {
var that = this; //create a pointer to this reference
timerID=setTimeout(function(){
that.getElementsByTagName("UL")[0].style.display = "none"
}, 500);
}

[Adam Risser]

On Apr 3, 5:16 pm, "Walton" <[e-mail]:

On Apr 3, 3:57 pm, "scripts.contact" <[e-mail]>
wrote:

On Apr 3, 2:20 pm, "Adam Risser" <[e-mail]:

Hi everyone,

I am modifying the suckerfish dropdown code to use settimeout to have
a slight pause before the menus disappear to make it more user
friendly. I have hit a snag with the following statement:

li.onmouseout=function()
{
timerID=setTimeout('this.getElementsByTagName("UL" )
[0].style.display = "none"', timecount);

this solution doesn't work:

timerID=setTimeout(function(){

you can't use the "this" keyword here. you are no longer in the scope
of the "li" element, hence it "this" no longer points to the li
element.

this.getElementsByTagName("UL")[0].style.display = "none"
}, timecount);

}

try this code instead:

li.onmouseout=function() {
var that = this; //create a pointer to this reference
timerID=setTimeout(function(){
that.getElementsByTagName("UL")[0].style.display = "none"
}, 500);

}

Thank you, that was part of the problem! it also took adding an extra
statement to close any active menu.

I am going to google around for some scope tutorials. Thanks again!

[RobG]

On Apr 4, 10:42 pm, "Adam Risser" <[e-mail]:
[...]

Thank you, that was part of the problem! it also took adding an extra
statement to close any active menu.

As a usability issue, consider cancelling the timeout if the cursor
goes back over the menu before it is closed.

>
I am going to google around for some scope tutorials. Thanks again!

Try the following, since you are using a closure to fix the issue:

<URL: http://www.jibbering.com/faq/faq_notes/closures.html >
--
Rob