Jquery functions not changing on window resize

Question

I have the following jquery code that is aimed at running one function when the window is large (>=1024) and another when it is resized and small.

The console.logs appear as expected on resize, but the functions do not change. Meaning, if the browser was loaded in large size, when resized, the large function is still used.

(Resize code used from https://stackoverflow.com/a/4541963/1310375 and https://stackoverflow.com/a/9828919/1310375 )

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

$(window).on('resize', function(){
  var win = $(this); //this = window

  waitForFinalEvent(function(){
  console.log('Resize...');

    if (win.width() >= 1024) { 
      console.log('large');

      $('.header-navigation-menu > div > ul > li').on({
        mouseenter: function() {
          console.log('waitEnterExit');
          waitEnterExit(this, true);
          $(this).children('.nav-menu-div').addClass('open');
        },
        mouseleave: function() {
          waitEnterExit(this, false);
        },
      });

      function waitEnterExit(el, inside) {
        var button = $(el);
        setTimeout(function() {
          var hovered = button.is(':hover');
          if (hovered && inside)
            button.children('.nav-menu-div').addClass('open');
          else if (!hovered && !inside)
            button.children('.nav-menu-div').removeClass('open');
        }, 500);
      }
    }

    if (win.width() <= 1023) { 
      console.log('small');

      $('.menu-link-button').on({
        click: function() {
          $(this).parent().children('.nav-menu-div').slideToggle();
        }
      });
    }
  }, 500);
});

Answer 1

You are doing it in a wrong way, try the below steps and code,

First separate all functions and event bindings from window resize event. Then check window's width and toggle the elements which are to be hide(if visible)

function waitEnterExit(el, inside) {
  var button = $(el);
  setTimeout(function() {
    var hovered = button.is(':hover');
    if (hovered && inside)
      button.children('.nav-menu-div').addClass('open');
    else if (!hovered && !inside)
      button.children('.nav-menu-div').removeClass('open');
  }, 500);
}

$('.header-navigation-menu > div > ul > li').on({
  mouseenter: function() {
    console.log('waitEnterExit');
    var win = $(window);
    if (win.width() >= 1024) {
      console.log('large');
      waitEnterExit(this, true);
      $(this).children('.nav-menu-div').addClass('open');
    }
  },
  mouseleave: function() {
    if (win.width() >= 1024) {
      console.log('large');
      waitEnterExit(this, false);
    }
  },
});

$('.menu-link-button').on({
  click: function() {
    var win = $(window);
    if (win.width() <= 1023) {
      console.log('small');
      $(this).parent().children('.nav-menu-div').slideToggle();
    }
  }
});

$(window).on('resize', function() {
  var win = $(this); //this = window
  waitForFinalEvent(function() {
    if (win.width() >= 1024) {
      console.log('large');
      $('.menu-link-button').parent().children('.nav-menu-div').slideUp(); // hide it any way on large screen
    }  else {
      $('.header-navigation-menu > div > ul > li .nav-menu-div').removeClass('open'); // hide it in small screens
    }
    console.log('Resize...');
  }, 500);
});

If window>= 1024 and $('.menu-link-button') is sliding up again and again then check a condition for its visibility like

if (win.width() >= 1024) {
  console.log('large');
  $('.menu-link-button').parent().children('.nav-menu-div').is(':visible') // if visible then slideup
  &&
  $('.menu-link-button').parent().children('.nav-menu-div').slideUp(function(){ // hide it any way on large screen
      $(this).hide();/*make it hide after slide up*/
  });
}  else {
  $('.header-navigation-menu > div > ul > li .nav-menu-div').removeClass('open'); // hide it in small screens
}