homepage Welcome to WebmasterWorld Guest from 54.221.175.46
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
JQuery Menu help using setTimeout
JQuery Menu using setTimeout function is creating issues with defining this
rwilson




msg:4483542
 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...]

 

Fotiman




msg:4483564
 3:01 pm on Aug 10, 2012 (gmt 0)

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...]

rwilson




msg:4483671
 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");
}

Fotiman




msg:4483677
 8:43 pm on Aug 10, 2012 (gmt 0)

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

rwilson




msg:4483686
 9:13 pm on Aug 10, 2012 (gmt 0)

Oops... Perfect! Thanks again!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved