• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1225
  • Last Modified:

setTimeout function

I'm having difficulty getting setTimeout to work properly.  I want to set a very slight delay before a menu dissapears after an onmouseout event.

<div id = "options" ... onmouseout = "setTimeout('hide_opts(this)',300)">
...
</div>

function hide_opts(item) {
      item.style.display = "none";
}

This works fine if I remove the setTimeout function, and simply call hide_opts() on onmouseout.  But if I use setTimeout, it returns an error that item.style has no properties.
0
chsalvia
Asked:
chsalvia
  • 9
  • 8
  • 3
2 Solutions
 
radarshCommented:
Instead of this, pass the actual Id.


<div id = "options" ... onmouseout = "setTimeout('hide_opts(options)',300)">
...
</div>


________
radarsh
0
 
radarshCommented:
setTimeout does an eval on the string you pass.
By the time the string is evaluated, the value of this would have changed.

It will be referring to the setTimeout function itself.

________
radarsh
0
 
REA_ANDREWCommented:
not too sure about this, but I have tested this and this works, kinda of a slight work around although I am sure there is a smaller way of doing it, but I do not know unfortunately.

What I have done is tored the target as a global variable then triggered the timeout with another function

<html>

<head>
<script type="text/javascript">
var itemAdd;

function hide_opts(item) {
            itemAdd = item;
            setTimeout('testTimeout()',1000)
}
function testTimeout()
{
      alert(itemAdd.style.display);
}
</script>
<title>New Page 1</title>
</head>

<body>
<div id = "options" onmouseout = "hide_opts(this)">
THis is the div
</div>
</body>

</html>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
REA_ANDREWCommented:
sorry, i posted too late, did not see the post.  much more efficient than mine lol
0
 
radarshCommented:
Never mind REA_ANDREW!

Infact even I was thinking on your lines... Having a global var called id and then doing this:


onmouseout="id = this; setTimeout('hide_opts(id)', 300)"


________
radarsh
0
 
chsalviaAuthor Commented:
I'm confused about the setTimeout function.  It doesn't seem to recognize any variables.

If I do:

function hide_opts(item) {
      setTimeout('item.style.display = "none"',200);
}

or even:

function hide_opts(item) {
      var test = document.getElementById("options");
      setTimeout('alert(test)',200);
}

It doesn't work, and says the variable is undefined.  But if I do the exact same thing without the setTimeout, it works.

function hide_opts(item) {
      var test = document.getElementById("options");
      alert(test);
}

^ works fine
0
 
REA_ANDREWCommented:
no no use radarsh example. here is a working version of his method

<html>

<head>
<script type="text/javascript">

function hide_opts(item) {
      alert(item.style.display);
}

</script>
<title>New Page 1</title>
</head>

<body>
<div id = "options" onmouseout = "setTimeout('hide_opts(options)',300);">
THis is the div
</div>
</body>

</html>
0
 
chsalviaAuthor Commented:
Well, there are multiple problems here.  Firstly, radarsh's example works properly with setTimeout, but for some reason this causes the pop-up menu to dissapear as soon as I move the mouse down to the next menu option - making the menu useless.  I'm not sure why, since I also have an onmouseover event which sets the menu's display property to "block"

Secondly, I just want to know in general why setTimeout doesn't accept my variables.  I tried a simple test like:

function hide_opts(item) {
     var test = document.getElementById("options");
     setTimeout('alert(test)',200);
}

...and I get an error that test is undefined.  Why is that?
0
 
chsalviaAuthor Commented:
I'm going to start another question about the menu issue, and this question will just deal with the setTimeout property specifically.
0
 
REA_ANDREWCommented:
this may be the reason, when you goover the next menu you want to clear the timeout so

set it like this

above any function have this globally

vat t;

then in your function refere to the timeout like this

t = setTimeout('alert(test)',200);

then when you want to cancel that timeout and thus keep the menu open you can use

clearTimeout(t);
0
 
chsalviaAuthor Commented:
Okay.  So, now what I have is:

function opts(item) {
      var pos = getPosition(item);
      var a = document.getElementById("options");
      a.style.display = "block";
      a.style.top = pos.y + item.clientHeight-1;
      a.style.left = pos.x;
}

function show_opts(item) {
      item.style.display = "block";
      t = setTimeout('hide_opts(item)',300);
}

function hide_opts(item) {
      clearTimeout(t);
      item.style.display = "none";
}

And then on the menu itself, I have:

<div id = "adoptions" style = "position: absolute" class = "maintext" onmouseover = "show_opts(this)" onmouseout = "hide_opts(this)">

This seems to work okay, but it generates an error in Internet Explorer, and also I still experience the "blinking" effect when moving between menu items.
0
 
chsalviaAuthor Commented:
Sorry, the code for the menu should have been:

<div id = "options" style = "position: absolute" class = "maintext" onmouseover = "show_opts(this)" onmouseout = "hide_opts(this)">
0
 
REA_ANDREWCommented:
do you have images in your menus?
0
 
REA_ANDREWCommented:
the reason I ask if you have images on your menus is that they will flicker on IE and not ffirefox due to caching restrictions. If this is not the case then:

Which menu flashes when and through what event?
0
 
chsalviaAuthor Commented:
There are no images, but the menu flashes when I move from item to item.  It's as if every time I move from one menu item to another, onmouseout is triggered, which hides the menu, and then onmouseover is triggered which shows the menu again.
0
 
chsalviaAuthor Commented:
That's the reason I wanted to use setTimeout.  I thought maybe a delay would prevent the flickering.
0
 
chsalviaAuthor Commented:
Also, a major problem seems to be that setTimeout never recognizes variables.  I do:

function show_opts(item) {
      item.style.display = "block";
      t = setTimeout('hide_opts(item)',300);
}

...and I get an error that item is not defined.
0
 
REA_ANDREWCommented:
ok

1. I think that the menu flickers cause your time out is like 0.3 seconds, that is quick, so you probably need to lengthen the time period to 700 or 1000 i.e. 1 second, see if that helps

with regards to the variable thing, I have found this aswell, I worked round it like this. Using global variables

var GlobalItem;  // Now this variable is accessible from any function. So you can assign values and change them.

function show_opts(item) {
     item.style.display = "block";
     GlobalItem = item;
     t = setTimeout('hide_opts()',300);
}

function hide_opts()
{
     alert(GlobalItem);
}
0
 
chsalviaAuthor Commented:
Okay - I see what you're saying.  You're right, it seems that setTimeout will only recognize global variables.

So, it looks like I've finally got this working properly.  

I really appreciate all the help you've given me here.  Thanks for everything.  
0
 
REA_ANDREWCommented:
no problem, Glad everything is working. I have learnt a few things my self on this question, so thanks for that

ANdy
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 9
  • 8
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now