CODEWITHSUNDEEP
javascriptjquerycssinternet-explorer-7
harley_woop
harley_woop

Reputation: 1849

CSS/Javascript: Apply javascript according to window width

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

Upvotes: 1

Views: 179

Answers (3)

Chris Baxter
Chris Baxter

Reputation: 16353

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.

Upvotes: 2

Wez
Wez

Reputation: 10712

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.

Upvotes: 1

andy
andy

Reputation: 550

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>

Upvotes: 0

Related Questions