1

When I view my site in Chrome mobile, the jQuery resize event gets triggered on scroll. As far as I can tell, it’s the change in height when scrolling that’s triggering it. My event should only be triggered when the width changes, not height…

    $(window).resize(function() {
      if ($(window).width() < 688) {
            $('nav ul').css('display', 'none');
            $('nav p').removeClass('active');
      }

     else {
        $('nav ul').css('display', 'inherit');
     }
    });

The only related answer I could find to this is mobile chrome fires resize event on scroll.

onOrientationChange is mentioned, but that’s not what I need as it's not based on device orientation, but rather any width under 688px width.

Another mention is:

var width = $(window).width(), height = $(window).height();

then in your resize event handler you can do.

if($(window).width() != width && $(window).height() != height){
//Do something
}

Which looks like something I need, but I don’t understand jQuery well enough to know how to change that to work with what I need it to do.

Any ideas?

Community
  • 1
  • 1
CrystalOzone
  • 9
  • 6

1 Answers1

0

Maybe do something like:

var saveWindowWidth = true;
    var savedWindowWidth;

//set the initial window width
    if (saveWindowWidth = true){
        savedWindowWidth = windowWidth;
        saveWindowWidth = false;
    }


//then on resize...


$(window).resize(function() {

//if the screen has resized then the window width variable will update
        windowWidth = window.innerWidth;


//if the saved window width is still equal to the current window width do nothing
        if (savedWindowWidth == windowWidth){
            return;
        }


//if saved window width not equal to the current window width do something
        if(savedWindowWidth != windowWidth) {
           // do something

            savedWindowWidth = windowWidth;
        }

    });
Gee_63
  • 76
  • 1
  • 8