Change CSS style with jQuery

Question

I am having throuble using the jQuery to change some CSS style. This is the jsfiddle:

When I re-size the browser, my div does not change the properties. Any help would be great full. And here is the code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<!-- change css style -->
<script type="text/javascript">
    $(document).resize(function() {

        var red = $('.red');
        red.on('resize', function(){
            if ( red.width() < 600 ){
                red.addClass('green');
            }
        });

             });
</script>


<style type="text/css">
.red {
    height: 500px;
    margin: 0 auto;
    background-color: #F00;
    width: 80%;
    max-width: 1000px;
}
.green {
    width: 100px;
    background-color: #0F0;
    height: 500px;
}
</style>
</head>

<body>

<div class="red">
</div>

</body>
</html>

Thanks,

What do you expect red.on('resize', ...) to do? The DIV isn't resizeable. — Barmar
– Barmar, Commented Dec 28, 2013 at 1:48
That's the point. I would like to change the width size and the background of the div when you re-size the browser. — valentin
– valentin, Commented Dec 28, 2013 at 2:08
Resizing the browser triggers the resize event on the window, not on the red div. — Barmar
– Barmar, Commented Dec 28, 2013 at 2:09

m59 · Accepted Answer · 2013-12-28 01:47:13Z

1

I believe that should be $(window).resize(function() { and you shouldn't need the additional resize.

$(window).resize(function() {
  var red = $('.red');
  if ( red.width() < 600 ){
    red.addClass('green');
  }
});

answered Dec 28, 2013 at 1:47

m59

43.9k14 gold badges122 silver badges139 bronze badges

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

2 Comments

valentin Over a year ago

Magic. Thank you so much. I've tried to add an else statement, just in case the user drag the window back but not working for me. Do you have an idea?

m59 Over a year ago

@valentin see console.log(red.width()). When you add the green class, you're changing the width of red to 100px and nothing ever changes it back, so an else will never fire because 100 < 600. Perhaps you want to check red.parent().width() or window.width().

Deryck · Accepted Answer · 2013-12-28 02:28:10Z

You are targeting the wrong object (as mentioned in other comments/answers, it is $(window) that will re-size, not $('.red')).

However, this is not the only issue here. Below is an example fiddle to show a more efficient way of ordering this code.

Better Fiddle Demo

The main differences here will be shown in memory and CPU consumption for the browser.

CSS:

div {
    margin: 0 auto;
    max-width: 1000px;
}
.red {
    height: 500px;
    background-color: #F00;
    width: 80%;
}
.green {
    width: 100px;
    background-color: #0F0;
    height: 500px;
}

The CSS above puts the common properties shared by the classes together so changing to green from red only changes necessary values.

jQuery:

var $red = $('.red');
if ($red.width() < 600) {
    $(window).on('resize', function () {
        $red.switchClass('red', 'green');   //  Used with jQueryUI for animated change, can easily be .addClass('green') if preferred.
        $(this).off('resize');
    });
}

Many things here. First, the variable to cache your .red object is created outside to keep it from being re-created every time the window re-sizes. Of course, this ends up working out either way with my next change that will A) only change to .green if .red is < 600px and B) remove the event handler entirely so re-sizing the page once it is .green doesn't call the function repeatedly for no reason.

Essentially all of these changes make the assumptions that you want the .red to .green change to be permanent, that .green and .red both are centered and have a max-width of 1000px, and that you don't want any further conditions evaluated on future re-sizes (such as changing back to .red, altering other elements, etc).

Collectives™ on Stack Overflow

Change CSS style with jQuery

2 Answers 2

2 Comments

Better Fiddle Demo

CSS:

jQuery:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

CSS:

jQuery:

Comments

Your Answer

Sign up or log in

Post as a guest

Related