|
|
 |
 |
 |
 |
Javascript / Client Side Development
|
 |
 |
 |
 |
|
|
|
|
setTimeout
Hi,
I'm trying to set a delay for an onmouseout function on a simple list menu.
I don't understand why the code below doesn't work. If on the onmouseout I
use ( this.className="hide"; ) it hides the sub menu, but if I pass it to
other functions with a setTimeout, it doesn't. Can anyone tell me what I'm
missing here?
var myFunction = function() {
var d = document.all;
var lis = document.getElementById("navmenu").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className="show";
}
lis[i].onmouseout=function() {
//this.className="hide";
doTimeout(this);
}
}
}
function doTimeout(el){
timeout = setTimeout('hideElement('+el+')',2000);
}
function hideElement(el){
el.className="hide";
}
window.onload = myFunction;
Thanks, David
David said:
>Hi,
>I'm trying to set a delay for an onmouseout function on a simple list menu.
>I don't understand why the code below doesn't work. If on the onmouseout I
>use ( this.className="hide"; ) it hides the sub menu, but if I pass it to
>other functions with a setTimeout, it doesn't. Can anyone tell me what I'm
>missing here?
>function doTimeout(el){
> timeout = setTimeout('hideElement('+el+')',2000);
>}
The string concatenation operator works only on strings.
The Javascript engine fixes this for you by automatically invoking
el.toString() and concatenating the result into the string for you.
I don't know, off the top of my head, what that might look like, but
whatever it is, it's a string, so you can't refer to it later in your
hideElement() function as if it was still an object reference.
--
David wrote on 19 mei 2007 in comp.lang.javascript:
> doTimeout(this); > } > } >} > function doTimeout(el){
> timeout = setTimeout('hideElement('+el+')',2000);
>}
methinks.
This probably will result in:
timeout = setTimeout('hideElement([object])',2000);
which would try to execute after two seconds the string
'hideElement([object])'
which cannot be parsed by the js engine.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
On May 19, 4:58 pm, "David" <n@none.net> wrote:
> Hi, > I'm trying to set a delay for an onmouseout function on a simple list menu.
> I don't understand why the code below doesn't work. If on the onmouseout I
> use ( this.className="hide"; ) it hides the sub menu, but if I pass it to
> other functions with a setTimeout, it doesn't. Can anyone tell me what I'm
> missing here?
> var myFunction = function() {
> var d = document.all;
> var lis = document.getElementById("navmenu").getElementsByTagName("LI");
> for (var i=0; i<lis.length; i++) {
> lis[i].onmouseover=function() {
> this.className="show";
> }
> lis[i].onmouseout=function() {
> //this.className="hide";
> doTimeout(this);
> }
> }
> }
> function doTimeout(el){
> timeout = setTimeout('hideElement('+el+')',2000);
> }
> function hideElement(el){
> el.className="hide";}
> window.onload = myFunction;
> Thanks, David
less text, using a closure. I think that "this", doesn't exist within
the scope of the setTimeout, which is why a closure is needed, but
don't quote me on that. If anyone can offer a better explanation, I'd
appreciate it. I just kinda hacked it until it worked.
var myFunction = function() {
var d = document.all;
var lis =
document.getElementById("navmenu").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className="show";
}
lis[i].onmouseout=function() {
var self = this;
setTimeout(
function(){
self.className="hide";
}, 2000
);
}
}
}
window.onload = myFunction;
Please excuse the dodgy indentation. I tried to get it to fit
correctly in this page.
> Not entirely sure what's going on. But here is you code, with a little > less text, using a closure. I think that "this", doesn't exist within > the scope of the setTimeout, which is why a closure is needed, but > don't quote me on that. If anyone can offer a better explanation, I'd > appreciate it. I just kinda hacked it until it worked. > var myFunction = function() {
> var d = document.all;
> var lis =
> document.getElementById("navmenu").getElementsByTagName("LI");
> for (var i=0; i<lis.length; i++) {
> lis[i].onmouseover=function() {
> this.className="show";
> }
> lis[i].onmouseout=function() {
> var self = this;
> setTimeout(
> function(){
> self.className="hide";
> }, 2000
> );
> }
> }
> }
> window.onload = myFunction;
> Please excuse the dodgy indentation. I tried to get it to fit
> correctly in this page.
elemenets where it shouldn't. I think an id reference needs to be added to
avoid this although I was trying to avoid using id's. It's a step in the
right direction though.
David
In comp.lang.javascript message <Xns9935CA4BDFC11eej@194.109.133.242>
, Sat, 19 May 2007 17:53:09, Evertjan. <exjxw.hannivo@interxnl.net>
posted:
>timeout = setTimeout('hideElement([object])',2000);
>which would try to execute after two seconds the string
>'hideElement([object])'
>which cannot be parsed by the js engine.
for the effect being unlikely to be as hoped for.
function hideElement(X) { alert(X) }
object = 4
hideElement([object])
alerts 4. It even works, for me, with Object.
--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Delphi 3? Turnpike 6.05
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/&c., FAQqy topics & links;
<URL:http://www.bancoems.com/CompLangPascalDelphiMisc-MiniFAQ.htm> clpdmFAQ;
<URL:http://www.borland.com/newsgroups/guide.html> news:borland.* Guidelines
Dr J R Stockton said the following on 5/20/2007 11:37 AM:
> In comp.lang.javascript message <Xns9935CA4BDFC11eej @194.109.133.242> > , Sat, 19 May 2007 17:53:09, Evertjan. <exjxw.hannivo @interxnl.net> > posted: >> timeout = setTimeout('hideElement([object])',2000); >> which would try to execute after two seconds the string
>> 'hideElement([object])'
>> which cannot be parsed by the js engine.
> Nothing AFAICS intrinsically wrong with executing that string, except
> for the effect being unlikely to be as hoped for.
> function hideElement(X) { alert(X) }
> object = 4
> hideElement([object])
> alerts 4. It even works, for me, with Object.
in the page itself.
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
>> In comp.lang.javascript message <Xns9935CA4BDFC11eej @194.109.133.242> >> , Sat, 19 May 2007 17:53:09, Evertjan. <exjxw.hannivo @interxnl.net> >> posted: > The difference is that in Evertjan's code [object] refers to an Object in > the page itself.
eval("timeout" + this + " = window.setTimeout('hideElement( \"" + this +
"\" )', " + 2000 + " );");
David
> Placing an eval on it should take care of the string wouldn't it? > eval("timeout" + this + " = window.setTimeout('hideElement( \"" + this +
> "\" )', " + 2000 + " );");
eval("timeout=setTimeout('hideElement( \"" + this + "\" )', " + 2000 +
" );");
David
David wrote on 21 mei 2007 in comp.lang.javascript:
>> Placing an eval on it should take care of the string wouldn't it? >> eval("timeout" + this + " = window.setTimeout('hideElement( \"" +
>> this + "\" )', " + 2000 + " );");
> Apologies, a correction:
> eval("timeout=setTimeout('hideElement( \"" + this + "\" )', " + 2000 +
> " );");
something that evaluates to a string before it is used by eval().
Did you test it???????????
eval() is evil.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
"Evertjan." <exjxw.hannivo @interxnl.net> wrote in message
> eval() needs a string to evaluate, and you do not give it a string or > something that evaluates to a string before it is used by eval(). > Did you test it???????????
> eval() is evil.
through. When I find a good solution I will post it.
David
On May 20, 1:58 am, "David" <n@none.net> wrote:
> Hi, > I'm trying to set a delay for an onmouseout function on a simple list menu.
> I don't understand why the code below doesn't work. If on the onmouseout I
> use ( this.className="hide"; ) it hides the sub menu, but if I pass it to
> other functions with a setTimeout, it doesn't. Can anyone tell me what I'm
> missing here?
setTimeout is incorrect.
> var myFunction = function() {
> var d = document.all;
then do proper feature detection for getElementById with fallback to
document.all if it's supported.
[...]
> function doTimeout(el){
> timeout = setTimeout('hideElement('+el+')',2000);
Use:
function doTimeout(el){
timeout = setTimeout(function(){hideElement(el)},2000);
That creates a closure back to the doTimeout's el variable so that it
is still available when the timeout runs.
--
Rob
|
|
|
|
|
|
Add to del.icio.us |
Digg this |
Stumble it |
Powered by Megasolutions Inc