/    Sign up×
Community /Pin to ProfileBookmark

Adding delay on mouse out

Copy linkTweet thisAlerts:
Apr 26.2010

Hi I have a vvery simple javascript for a navigation menu that displays one tree. I am trying to make it so that there is a delay on the mouseout.

[CODE]

var DropDownMenu = Class.create();

DropDownMenu.prototype = {

initialize: function(menuElement) {
menuElement.childElements().each(function(node){
// if there is a submenu
var submenu = $A(node.getElementsByTagName(“ul”)).first();
if(submenu != null){
// make sub-menu invisible
Element.extend(submenu).setStyle({display: ‘none’});
// toggle the visibility of the submenu
node.onmouseover = node.onmouseout = function(){
Element.toggle(submenu);
}
}
});
}

};

[/CODE]

?
I am trying to add a delay there on mouse out. I am a complete noob at javascript.

Any help would be appreciated. ?

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@ahurttApr 27.2010 — try something like:

[CODE]
var DropDownMenu = Class.create();

DropDownMenu.prototype = {

initialize: function(menuElement) {
menuElement.childElements().each(function(node){
// if there is a submenu
var submenu = $A(node.getElementsByTagName("ul")).first();
if(submenu != null){
// make sub-menu invisible
Element.extend(submenu).setStyle({display: 'none'});
var proxyFunc = function () { Element.toggle(submenu);};
// toggle the visibility of the submenu
node.onmouseover = node.onmouseout = function(){
var delayInMs = 2000;
setTimeout(proxyFunc, delayInMs);
}
}
});
}

};
[/CODE]

Disclaimer. . .the above is untested. Just trying to give you an idea of a way to do it using the setTimeout function.
Copy linkTweet thisAlerts:
@laxadauthorApr 27.2010 — Hi thanks for your reply. I realized I want a delay on the MOUSEOUT so I made two separate functions - one for mouseover and one for mouseout. I am not sure why but this doesn't quite work right. When I move the mouse slowly to the menu when it pops up, it keeps refreshing the menu for some reason and when i get on the menu it disappears. There's nothing there at all. :S anyone know why this is so from the code?

[CODE]

var DropDownMenu = Class.create();

DropDownMenu.prototype = {

initialize: function(menuElement) {
menuElement.childElements().each(function(node){
// if there is a submenu
var submenu = $A(node.getElementsByTagName("ul")).first();
if(submenu != null){
// make sub-menu invisible
Element.extend(submenu).setStyle({display: 'none'});
var proxyFunc = function(){ Element.toggle(submenu);};
// toggle the visibility of the submenu
node.onmouseover = function(){Element.toggle(submenu);};
node.onmouseout = function(){
var delayInMs = 2000;
setTimeout(proxyFunc, delayInMs);
};
}
});
}

};

[/CODE]

Thank you for all your help so far. It made it a lott easier ?
×

Success!

Help @laxad spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...