If condition inside function called on resize not working properly

Question

I have the following code:

var hoverList = function(){
  var width = $(window).width();
  console.log(width);
  if(width > 992) {
    $( ".dropdown" ).mouseover(function() {
      $(this).addClass('open');
    });

    $( ".dropdown" ).mouseleave(function() {
      $(this).removeClass('open');
    });
  } 
}
//call function on load and page resize
$(window).on('load', hoverList);
$(window).on('resize', hoverList);

this code will add an open class to the dropdown class` only when the window width is less than 992px, since I want users to hover the menu on desktop but to click the mobile version of the navigation on mobile. And this kid of works, if I refresh the page on a size less than 992 and hover an li element the navigation does not toggle, then if I resize the window to be larger than 992px and hover an li element the navigation does toggle, but then if I go back to less than 992 and hover the li, this time the navigation toggles, I have no idea what might be causing this behavior, I''ve seen some questions similar to this one on SO but they did not help.

I would appreciate any help, thanks.

these are the questions that I foud but were not helpfull

if condition always work inside $(window).resize function

Problem with function within $(window).resize - using jQuery

Once you set an event listener, it is set. You should remove them in an `else` case. — Sebastian Simon, Oct 06 '17 at 17:36
Why do this with JavaScript? You can use min-width media query in css: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries — HMR, Oct 06 '17 at 17:40
@HMR Because the `open` class is given to me by bootstrap, and I just want to add it to the element. — OmarAguinaga, Oct 06 '17 at 17:44

score 1 · Answer 1 · answered Oct 06 '17 at 17:36

1

try writing the else condition too. whats happening is the if condition is only working when the width is greater than 992.

answered Oct 06 '17 at 17:36

lijnam

85
10

nothing should happen, only the default bootstrap functionality for the dropdown that is on click not hover. – OmarAguinaga Oct 06 '17 at 17:42
1

@OmarAguinaga This is a good answer, once you add an event listener it won't go away until you remove it so the else statement could be: `else { $( ".dropdown" ).off("mouseover").off("mouseleave")` – HMR Oct 06 '17 at 17:53
I'll keep your answer @HMR because both the first answer and your comment here helped me a lot, but thanks lijnam because your idea also worked. – OmarAguinaga Oct 06 '17 at 18:03

HMR · Accepted Answer · 2017-10-06T18:04:35.580

I think you may be better of doing it this way:

$( ".dropdown" ).mouseover(function() {
    if($(window).width() > 992) {
      $(this).addClass('open');
    }
});

$( ".dropdown" ).mouseleave(function() {
    if($(window).width() > 992) {
      $(this).removeClass('open');
    }
});

Just for completeness, your code did not behave the way you expected it because you never removed the event listener. So when you make the window big enough to add the event listener and then small enough to not want it you have to remove it. Here is an example using nampespaced events so when removing events I won't blast away all events (other code may still need the listeners)

var hoverList = function(){
  var width = $(window).width();
  console.log(width);
  if(width > 992) {
    $( ".dropdown" ).on("mouseover.autoopen",function() {
      $(this).addClass('open');
    });

    $( ".dropdown" ).on("mouseleave.autoopen",function() {
      $(this).removeClass('open');
    });
  }else{
    $(".dropdown").off("mouseleave.autoopen").off("mouseover.autoopen);
  }
}
//call function on load and page resize
$(window).on('load', hoverList);
$(window).on('resize', hoverList);

@OmarAguinaga For completeness I've added how your code could work as well but it is less effective. window resize can be triggered many times — HMR, Oct 06 '17 at 18:05

If condition inside function called on resize not working properly

2 Answers2