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()

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