unbind event when browser width is bellow 990px

[Anonymous]

I want to unbind the .hover event when the browser width is bellow 960px, and re-apply it when its above 960px. How can i achieve this?

/* drop menu hide and show */
$(".header-main-tabs").hover(function() {
    $(this).children(".header-drop-menu").fadeIn("fast");
}, function() {
    $(this).children(".header-drop-menu").fadeOut("fast");
});

I tried this but it didn’t work.

$(window).resize(function() { browserWidth = $(window).width(); if (browserWidth > 990) { $(".header-main-tabs").unbind("hover"); } });

[Senff]

Something like this perhaps: http://codepen.io/senff/pen/AJxlE

[Anonymous]

I have a dropdown menu that fades in when hovering over the tab. Although in the responsive menu nav (which is the same one as the desktop nav). I want the drop down menu to always display as long as its the mobile version. And it displays with css media query, but because of the fadeToggle in jquery, when i hover over the mobile dropdown tabs, the toggle fade event is triggered. I don’t want the event to be triggered when hovering over the mobile tab. So i want to disable the fade fadeIn and fadeOut events on mouse hover only when the width is bellow 960. and then re-enable when its above. I don’t know if that code you provided will work but ill give it a try.

[Anonymous]

It looks like its working but as i mentioned the previous fadeToggle event is triggered when hovering over the nav in mobile view. That event is for desktop view, (when browser is above 990px).

So to simplify thing what i need to do is somehow disable the .hover or fadeToggle event when the brwoser is bellow 990 and re-enable it when above 990 without refreshing.

So what its doing now is blinking. It cant make up its mind wether to hide or show the drop menu when hovering

[Senff]

It’s likely not the right way of doing it, but I would probably end up doing it like this: http://codepen.io/senff/pen/bIFKd

[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();
    });

});

[Author]

Posts