chsalvia
asked on
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(thi
...
</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.
<div id = "options" ... onmouseout = "setTimeout('hide_opts(thi
...
</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.
Last Comment
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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()'
}
function testTimeout()
{
alert(itemAdd.style.displa
}
</script>
<title>New Page 1</title>
</head>
<body>
<div id = "options" onmouseout = "hide_opts(this)">
THis is the div
</div>
</body>
</html>
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()'
}
function testTimeout()
{
alert(itemAdd.style.displa
}
</script>
<title>New Page 1</title>
</head>
<body>
<div id = "options" onmouseout = "hide_opts(this)">
THis is the div
</div>
</body>
</html>
sorry, i posted too late, did not see the post. much more efficient than mine lol
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)'
________
radarsh
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)'
________
radarsh
ASKER
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.dis
}
or even:
function hide_opts(item) {
var test = document.getElementById("o
setTimeout('alert(test)',2
}
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("o
alert(test);
}
^ works fine
If I do:
function hide_opts(item) {
setTimeout('item.style.dis
}
or even:
function hide_opts(item) {
var test = document.getElementById("o
setTimeout('alert(test)',2
}
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("o
alert(test);
}
^ works fine
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(opt
THis is the div
</div>
</body>
</html>
<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(opt
THis is the div
</div>
</body>
</html>
ASKER
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("o
setTimeout('alert(test)',2
}
...and I get an error that test is undefined. Why is that?
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("o
setTimeout('alert(test)',2
}
...and I get an error that test is undefined. Why is that?
ASKER
I'm going to start another question about the menu issue, and this question will just deal with the setTimeout property specifically.
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)',2
then when you want to cancel that timeout and thus keep the menu open you can use
clearTimeout(t);
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)',2
then when you want to cancel that timeout and thus keep the menu open you can use
clearTimeout(t);
ASKER
Okay. So, now what I have is:
function opts(item) {
var pos = getPosition(item);
var a = document.getElementById("o
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
}
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.
function opts(item) {
var pos = getPosition(item);
var a = document.getElementById("o
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
}
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.
ASKER
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)">
<div id = "options" style = "position: absolute" class = "maintext" onmouseover = "show_opts(this)" onmouseout = "hide_opts(this)">
do you have images in your menus?
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?
Which menu flashes when and through what event?
ASKER
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.
ASKER
That's the reason I wanted to use setTimeout. I thought maybe a delay would prevent the flickering.
ASKER
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
}
...and I get an error that item is not defined.
function show_opts(item) {
item.style.display = "block";
t = setTimeout('hide_opts(item
}
...and I get an error that item is not defined.
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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.
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.
no problem, Glad everything is working. I have learnt a few things my self on this question, so thanks for that
ANdy
ANdy
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
By the time the string is evaluated, the value of this would have changed.
It will be referring to the setTimeout function itself.
________
radarsh