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 know jQuery at all.

The options I want to achieve are :

Once a visitor comes to my site, this code must check his browser windows size and add class to body as per the following rules

1. If window size is more than 1024px but less than 1280px then add class .w1280.

2. If window size is more than 1280px but less than 1440px then add class .w1440.

3. If window size is more than 1440px but less than 1280px then add class .w1680.

4. If window size is more than 1680px then add class .wLarge.

To achieve this, I am trying to use the following script. My questions are:

1. Is this the correct code? If not what is the correct code?

2. Is this the best shortest possible code? If not what will be the correct code?

Kindly help as my knowledge of jQuery is almost ZERO.

function checkWindowSize() {  
    if ( $(window).width() > 1024) { 
        $('body').addClass('w1280');  
        } else {  
        $('body').removeClass('w1280');  
    } 
    if ( $(window).width() > 1280 ) { 
        $('body').addClass('w1440');  
        } else {  
        $('body').removeClass('w1440');  
    } 
    if ( $(window).width() > 1440) { 
        $('body').addClass('w1680');  
        } else {  
        $('body').removeClass('w1680');  
    } 
    if ( $(window).width() > 1600) { 
        $('body').addClass('wLarge');  
        } else {  
        $('body').removeClass('wLarge');  
    } 
}    
checkWindowSize()

Flake

Answer 1

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);
}

Trost

@sdl No need to overwrite the className property altogether. Just put the string into a variable: var c = width ... and then: c && $('body').addClass(c); – Cepheus

@Šime But if this function is going to be called multiple times (like, say, whenever the user resizes the window), it would be good to get rid of older, no-longer-relevant classes. – Trost

@sdl The OP didn't say that he intends to call it multiple times. But regardless of that, you don't want to delete all classes, since other scripts may be appending class names. This would be the way to go: $('body').removeClass('w1280 w1440 w1680 wLarge').addClass(c); – Cepheus

@Šime You're right; I forgot jQuery could remove multiple classes at the same time. – Trost

So @sdl is this the correct syntax with @sim's suggestion? otherwise may I request @sim to please provide a correct syntax as per his suggestions? – Flake

Hey @sdl so nice of you. Thanks a lot for the help. – Flake

LOL - "some people also like to eat their young..." – Godsend

Answer 2

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>

Canister