add remove class in resize window using jQuery

Question

I have this jQuery code for add remove class using jQuery in resize window:

JS:

$(function () {

    $(window).bind("resize", function () {
        console.log($(this).width())
        if ($(this).width() < 500) {
            $('div').removeClass('yellow').addClass('red')
        } else {
            $('div').removeClass('red').addClass('yellow')
        }
    })
})

HTML:

<div style="width:300px; height:100px;" class="yellow"></div>

In action, This worked only when i manualy resize window But in default if device window < 500 this function not work.

how do fix this ?!

Demo HERE

Initial painting is a different Event then resize. You could extract the logic into a function and bind it to resize as well as document.ready. — flaschenpost
– flaschenpost, Commented Sep 1, 2015 at 6:49
Check my answer and fiddle in the below. It is the simplest way of doing that — Rajesh kannan
– Rajesh kannan, Commented Sep 1, 2015 at 6:52

Tushar · Accepted Answer · 2015-09-02 07:29:02Z

7

Use trigger() to run function on page load

Execute all handlers and behaviors attached to the matched elements for the given event type.

$(window).bind("resize", function () {
    console.log($(this).width())
    if ($(this).width() < 500) {
        $('div').removeClass('yellow').addClass('red')
    } else {
        $('div').removeClass('red').addClass('yellow')
    }
}).trigger('resize');

Demo

You can also use CSS media queries to set the style properties of elements on page load. This will have little performance gain and better user experience than using Javascript.

@media (max-width: 500px) {
    div {
        color: red;
    }
}
@media (min-width: 500px) {
    div {
        color: yellow;
    }
}

edited Sep 2, 2015 at 7:29

answered Sep 1, 2015 at 6:47

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rajaprabhu Aravindasamy Over a year ago

Using media queries is a good option, but what if OP want to perform some other stuffs when window size is something? OP didn't ask for that but any how just wondering.

Tushar Over a year ago

@RajaprabhuAravindasamy Yes, that's why I've added both the approach, using Javascript and CSS

Rajaprabhu Aravindasamy · Accepted Answer · 2015-09-01 06:47:40Z

4

Try to invoke the resize event once when the DOM got ready,

$(function(){
   $(window).bind("resize",function(){
    if($(this).width() <500){
      $('div').removeClass('yellow').addClass('red')
    }
    else{
      $('div').removeClass('red').addClass('yellow')
    }
   }).resize();
});

DEMO

answered Sep 1, 2015 at 6:47

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Comments

Rajesh kannan · Accepted Answer · 2015-09-01 06:51:56Z

0

Use media Query

Use the following Css

.yellow{
background:yellow;
}

@media (max-width:500px) {
    .yellow {
    background:red;
    }
}

Check the folowing fiddle

http://jsfiddle.net/adxg3079/

Let me know if it is helpful

answered Sep 1, 2015 at 6:51

Rajesh kannan

6343 silver badges16 bronze badges

Collectives™ on Stack Overflow

add remove class in resize window using jQuery

3 Answers 3

2 Comments

DEMO

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related