I have a bunch of functions that I fire up based on the width of the users view-port. I then tired to write some code that turned the functions on and off, when the user re-sizes.
However, this function stops working properly when I call it again.
It’s an expanding and collapsing menu for people on handheld devices, it uses the slideUp() and slideDown() jQuery functions to open and close each nested list.
It works fine when called initially, but then when the user scales their browser up and then back down, it’s broken. It tries to expand and collapse at the same time. Perhaps I’m making a mistake with the way I’m disabling this feature and calling it again? If you want me to explain what I want in more detail, just let me know.
Here’s my code:
/* Load Nav Functions
* ------------------
* Checks the width of browser and only loads functions that are needed for that size
*/
var viewportWidth = $(window).width(); // store viewport width
if (viewportWidth < 1024 ) { // fire up mobile nav if screensize small enough
navToggle();
mobileNav();
addMenuArrows();
mobileSearchExpand();
} else {
disableMobileNav();
}
/* On Resize Events
* ----------------
* We only want the code to runs after a few milliseconds to improve performance:
* http://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery
*/
var resizeTimer; // resetable var for the timeout
$(window).resize(function() {
clearTimeout(resizeTimer); // start from zero
resizeTimer = setTimeout(function() {
var viewportWidth = $(window).width();
if (viewportWidth < 1024 ) {
navToggle();
mobileNav();
addMenuArrows();
resetFooterState();
} else {
disableMobileNav();
}
}, 100); // end of time out
});
/*
* Hide Menu and Create Slide Function
*/
function navToggle() {
$('#mainNav').css({'display':'none'});
$('#navToggle').bind("click", function() {
if (!$('#mainNav').hasClass('down')) {
$('#mainNav').removeClass('up').addClass('down').stop().slideDown(400);
} else {
$('#mainNav').removeClass('down').addClass('up').stop().slideUp(400);
}
return false;
});
}
/*
* Slide Up or Down Depending on Click
*/
function mobileNav() {
$('#mainNav li a').bind("click", function() {
/* jump to parent list item */
var listItem = $(this).parent();
/* store sub menu */
var subNav = listItem.children('ul');
if (!subNav.hasClass('down')) {
/* display the sub menu */
subNav.removeClass('up').addClass('down').stop().slideDown(400);
} else {
/* hide the sub menu */
subNav.removeClass('down').addClass('up').stop().slideUp(400);
}
return false;
});
}
/*
* Add drop down arrows to menus with sub menus
*/
function addMenuArrows() {
$('#mainNav li').each(function() {
var hasSubMenu = $(this).children('ul');
if(hasSubMenu.length) {
$(this).children('a').addClass('hasSubMenu');
}
});
}
/*
* Reset menu for large display
*/
function disableMobileNav() {
$('#mainNav').css({'display':'block'});
$('#navToggle').unbind();
$('#mainNav li a').unbind().removeClass('hasSubMenu');
}
It seem that you try to re bind event on user change browser size. It’s not good at all. But you can try .unbind() first then bind