Vote count: 0
I have a jQuery function that I only want to work when the window is smaller then 768px. (this is for a responsive site so I can't just do it for mobile devices)
I have some code that checks for a specific css style only applied when the screen size is less then 768px. Then it hides the menu and toggles the menu when a user clicks on another item. (#mainMenu)
I have the following code:
function checkSize(){
if ($('#mainLogo').css('float') == 'none') {
$('.menu-main-menu-container').slideToggle();
} else {
$('.menu-main-menu-container').slideDown();
}
}
$('#mainMenu').click(function() {
checkSize();
});
This code works pretty well except for when users are on a desktop and have the screen smaller then 768px, toggle the menu closed, and then drag the screen wider. It keeps the main menu hidden.
I tried adding this:
$(window).resize(checkSize);
But now when I resize the screen, both smaller and wider, it toggles the menu about 5 times.
Is there a way to fix this? Or maybe a better way to check for the width of the screen so that the toggle only happens when the screen is smaller then 768px? I wish there were media queries for jQuery!
(ps I also tried looking at the window width but it isn't accurate enough)
Thanks!
This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.
jQuery check for window resize triggers toggle to many times
Aucun commentaire:
Enregistrer un commentaire