Window resizing and mouseover and mouseout events

Question

Window resizing and mouseover and mouseout events

Navigation

#1 by (0 votes)

0

I had the following problem today, I created a function that checks the size of the browser window and if it is greater than 1300 , li receives two classes and the link ( <a> ) inside it receives an event of mouseover and mouseout .

Otherwise, it only adds three classes to li . I call this function in the page load and resize function of window so that when it is resized it also checks the size of the window.

Everything is beautiful and such, but the problem happens, when I resize it, it continues with the events of li , even the window receiving a new width . But when I refresh with the page smaller than the value of 1300 , it does not get the event of mouseover and mouseout .

Does anyone have any idea why this happens?

Follow the code below:

var areaRestrita = function(larguraJanela) {

    if(larguraJanela > 1300) {

        $('#menu-item-7436').addClass('barra-lateral-area-restrita-default area-restrita-default')
        .removeClass('area-restrita');

        $('#menu-item-7436>a').mouseover(function(v){

            $('#menu-item-7436')
            .removeClass('barra-lateral-area-restrita-default area-restrita-default')
            .addClass('barra-lateral-area-restrita area-restrita');
        });

        $('#menu-item-7436>a').mouseout(function(v){

            $('#menu-item-7436')
            .removeClass('barra-lateral-area-restrita area-restrita')
            .addClass('barra-lateral-area-restrita-default area-restrita-default');

        });

    } else {

        $('#menu-item-7436').addClass('area-restrita')
        .removeClass('barra-lateral-area-restrita barra-lateral-area-restrita-default area-restrita-default')
    }

}

areaRestrita($(window).width());

$(window).resize(function(){

    areaRestrita($(window).width());
});

javascript jquery

asked by anonymous 21.09.2017 / 23:19

1 answer

Application xamarin.forms stopped from nowhere Align footer for a div, with the footer of another div

score 0 · Answer 1

The problem is that you have to turn off the events of mouseover and mouseout when the window gets smaller, otherwise they remain there.

This is done through the unbind function of JQuery.

In your code you would enter the else part and look like this:

else {

    $('#menu-item-7436').addClass('area-restrita')
    .removeClass('barra-lateral-area-restrita barra-lateral-area-restrita-default area-restrita-default');

    $('#menu-item-7436>a').unbind("mouseover"); //desligar o hover in
    $('#menu-item-7436>a').unbind("mouseout"); //desligar o hover out
}