jQuery : Add class dynamically depending on the browser window resolution

Question

Hello friends I am trying to add a class to body dynamically depending on the browser window resolution. Here is the code I am trying to use but need help tuning it as I dont kn

Answer 1

This worked for me thanks to Naina's comment here: https://www.quora.com/How-do-I-add-and-remove-CSS-classes-using-jQuery-based-on-the-screen-size

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        if($(window).width() < 768) {
           $("#myDiv").addClass("myClass");
           $("#otherDiv").removeClass("myClass");  
        }    
    });
</script>

Answer 2

If you aren't storing any other classes on the body element, you could do this:

function checkWindowSize() {
    var width = $(window).width();
    document.body.className = width > 1600 ? 'wLarge' :
                              width > 1440 ? 'w1680' :
                              width > 1280 ? 'w1440' :
                              width > 1024 ? 'w1280' : '';
}

Some people might advise you to do it with a switch statement, but then, some people also like to eat their young.

This function will overwrite the body's class every time it's called (the default, if the browser is smaller than/equal to 1024 pixels, is no class at all), so like I said it won't work if your body has other classes that need to be maintained.

EDIT Per Šime's suggestions, here's a safer way to do it:

function checkWindowSize() {
    var width = $(window).width(),
    new_class = width > 1600 ? 'wLarge' :
                width > 1440 ? 'w1680' :
                width > 1280 ? 'w1440' :
                width > 1024 ? 'w1280' : '';

    $(document.body).removeClass('wLarge w1680 w1440 w1280').addClass(new_class);
}