Reply To: unbind event when browser width is bellow 990px

[noahgelman]

@Taufik I don’t like that since that block of code is only run once. that still doesn’t handle the binding/unbinding if the user resizes their browser (or rotates their tablet).

I would create a function that checks the page width, and then binds or unbinds the hover event depending the the result. I would run the function once onload and each time the page is resized.

$(document).ready(function() {

    function headHover() {
        if($(document).width() > 991) {
            $(".header-main-tabs").hover(function() {
                $(this).children(".header-drop-menu").fadeIn("fast");
            }, function() {
                $(this).children(".header-drop-menu").fadeOut("fast");
            });
        } else {
            $(".header-main-tabs").unbind('hover');
        }
    }

    headHover();

    $(document).resize(function() {
        headHover();
    });

});