homepage Welcome to WebmasterWorld Guest from 54.234.7.161
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
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#: 4483540 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4483540 posted 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#: 4483540 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4483540 posted 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#: 4483540 posted 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