jQuery check for window resize triggers toggle to many times

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!

asked 2 mins ago

Kater89

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