Welcome to WebmasterWorld Guest from 54.198.222.129

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)



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)

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



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)



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)

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



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)



Oops... Perfect! Thanks again!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month