Welcome to WebmasterWorld Guest from 54.144.104.2

Forum Moderators: open

Message Too Old, No Replies

JQuery Menu help using setTimeout

JQuery Menu using setTimeout function is creating issues with defining this

     
2:13 pm on Aug 10, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 17, 2010
posts: 186
votes: 2


I have a JQuery menu that I've added setTimeout to only display when a user wants to see the menu, as opposed to accidentally opening while scrolling past it.

Adding the setTimeout function is giving me some difficulties defining

$(this).children('.mainNavContent').show();


I want the hidden div for the menu link to show only after it has been hovered over for a set time. Any help would be greatly appreciated! I have the code below and a jsfiddle link.




$(document).ready(function () {

var navTimeout;
$('.mainNav-expand').mouseover(function() {
navTimeout = setTimeout(function() {

$('.mainNavContent').hide();
$(this).children('.mainNavContent').show();
alert("menu test");

}, 5500);
}).mouseleave(function() {
clearTimeout(myTimeout);
});

$("#mainNav-bar").mouseout(function() {
$('.mainNavContent').hide();
});

$(".mainNav-close").click(function() {
$('.mainNavContent').hide();
});

});



[jsfiddle.net...]
3:01 pm on Aug 10, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


setTimeout will run in a different scope, where "this" is not the same as "this" within the mousover callback function. You just need to create a closure to get around it. You can do that by changing your callback like so:

$(document).ready(function () {
var navTimeout;
$('.mainNav-expand').mouseover(function() {
var that = this;
navTimeout = setTimeout(function() {
$('.mainNavContent').hide();
$(that).children('.mainNavContent').show();
alert("menu test");
}, 500);
}).mouseleave(function() {
clearTimeout(myTimeout);
});

$("#mainNav-bar").mouseout(function() {
$('.mainNavContent').hide();
});

$(".mainNav-close").click(function() {
$('.mainNavContent').hide();
});

});


[jsfiddle.net...]
8:23 pm on Aug 10, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 17, 2010
posts: 186
votes: 2


Thanks! so I tried to take that concept and apply to the hoverIntent Jquery plugin because, setTimeout doesn't seem to be what I'm looking for. I think I'm close but it isn't working yet.

[jsfiddle.net...]

$(document).ready(function () {

$(".mainNav-expand").hoverIntent(showNav,hideNav);
var that = this;

$("#mainNav-bar").mouseout(function() {
$('.mainNavContent').hide();
});

$(".mainNav-close").click(function() {
$('.mainNavContent').hide();
});

});

function showNav() {
$(that).children('.mainNavContent').show();
alert("menutest");
}
function hideNav() {
$(that).children('.mainNavContent').hide();
alert("menutest");
}
8:43 pm on Aug 10, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


that is undefined within your showNav function. In that function, this refers to the current element, so in there you DO want this instead of that
9:13 pm on Aug 10, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 17, 2010
posts: 186
votes: 2


Oops... Perfect! Thanks again!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members