CSS/Javascript: Apply javascript according to window width

Question

I have a site that I am developing, that uses a grid system In IE7, when the window is resized, one column "pops" down below the other. This is not a massive issue, but as there is no margin at the top/left, the layout is fairly unreadable.

So how can I apply a class to a

<div>

only when the window (viewport?) is resized to below a certain width?

eg

width > 500px = class="smallerwindow"

I then can style that class appropriately.

I have jQuery, modernizr etc.

Thanks,

Harley

Answer 1

As per my comment above, you can use respond.js to enable media query support for IE6-8.

Conditionally include the respond.js script:

<!--[if lte IE 8]>
<script type="text/javascript" src="~/Scripts/respond.min.js"></script>
<![endif]-->

NOTE: Recommended to include respond.js in head as will impact dom rendering

Then define your CSS as follows:

.myWindow { width: 500px; }

@media (min-width:1200px) {
    .myWindow { width: 400px; }
}

@media  (min-width: 768px) and (max-width:979px) {
    .myWindow { width: 300px; }
}

Just some sample viewport sizes and widths; tweak accordingly.

Answer 2

I would do something like this..

$(window).resize(function() {

    if((window).width() > 500 && !$("div").hasClass("smallerwindow")){

        $("div").addClass("smallerwindow");

    } else if((window).width() < 500 && $("div").hasClass("smallerwindow")) {

        $("div").removeClass("smallerwindow");

    }

});

Check for the window size being greater than 500, then if the div dosen't have the class add it, else if the window size is smaller than 500 and the div has the class remove it.

Answer 3

jQuery:

if ($(window).width() > 500) {
   $("#myDiv").attr("class","smallerWindow");
}

This checks the Viewports width, and resets the current 'class' attribute of

<div id='myDiv'> </div>