CODEWITHSUNDEEP
jquerycss
valentin
valentin

Reputation: 5

Change CSS style with jQuery

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

http://jsfiddle.net/EQUu5/

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,

Upvotes: 0

Views: 197

Answers (2)

Deryck
Deryck

Reputation: 7658

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

Upvotes: 0

m59
m59

Reputation: 43745

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

Upvotes: 1

Related Questions