Detect resize and execute code at X resolution in JQuery

Question

I want the following:

1. Detect page width on load and add/remove class if it's below/above 959px
2. If I resize the page I want to do the same

$(window).on("resize load", function(e) {
   e = $("body").width();
   if (e <= 959) { 
      $("#button").addClass("active")
   }
   if (e >= 960) {
      $("#button").removeClass("active")
   }
})

This code works, but it removes the active class even if I resize the window from 500px to 501px. I want that to only add the class if I go above 960px or remove it if I go below 959px. How can I do that?

EDIT

Thanks for the answers! In the meantime I figured out a solution that works and suit my needs.

$(window).one("load", function () {
    r = $("body").width();
    if (r >= 960) {
        $("body").attr("mobile","0")
        //do something
    }
    if (r <= 959) {
        $("body").attr("mobile","1")
        //do something
    }
});

$(window).on("resize", function() {
    r = $("body").width();
    if ($("body").attr("mobile") == "0") {
        if (r <= 959) { 
            //do something
            $("body").attr("mobile","1")
        }
    }   
    if ($("body").attr("mobile") == "1") {
        if (r >= 960) { 
            //do something
            $("body").attr("mobile","0")
        }   
    }
})

Explanation:

It's a very specific solution since I modify the tabindex values in mobile view and I don't want to change these values back to 0 on a simple resize, only in the case I switch from mobile view to desktop.

Answer 1

The width of the window is different than the width of the body . Using $('body').width() will account for the overflow, whereas using $(window).width() will give you the actual screen width.

$(window).on('load resize', function() {
  $('#button').toggleClass('active', $(this).width() <= 959)
});

However, using media queries is much more straight forward if in fact, you are just adding CSS properties.

#button {
  opacity: 0.5;
}

@media (max-width: 959px) {
  #button {
    opacity: 1;
  }
}

Answer 2

You could ouse window.matchMedia for this. If you look at the perf test, matchMedia is a lot faster than resize.

var mq = window.matchMedia("(min-width:959px)");

// onload
setButton(mql);

// add listener for the query
mq.addListener(setButton);

function setButton(mq) {
    if (mql.matches) {
        // do something with your setButton
    } else {
        // no match....
    }
}

Answer 3

Here you go with a solution https://jsfiddle.net/hLkv1xan/1/

 $(window).on("resize load", function(e) { e = $("body").width(); if (e <= 959) { $("#button").addClass("active") } else { $("#button").removeClass("active") } }); 

 .active{ background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button"> Submit </button> 

I just modified your code a bit, change in the condition.

Hope this will help you.