Description

It’s becoming more and more common for web sites and applications to provide different layouts dependent upon the user’s window size, or resolution. This can be accomplished in a variety of ways, ranging from CSS to JavaScript solutions.

In this video quick tip, we’ll learn how laughably simple it is to do this with a touch of jQuery, and the resize() method.

By utilizing jQuery’s “resize()” method, we can easily listen for when the user changes the width of their browser window.

function checkWindowSize() {

if ( $(window).width() > 1800 ) {
$('body').addClass('large');
}
else {
$('body').removeClass('large');
}

}

$(window).resize(checkWindowSize);

Then, subsequently, we target our desired CSS properties accordingly.

#container {
width: 800px;
height: 1000px;
background: #e3e3e3;
margin: auto;
}

/* Change container size for larger windows. */
.large #container {
width: 1000px;
}

#nav {

width: 100%;
height: 100px;
border-bottom: 1px solid white;
background: #999999;

}

.large #nav {
float: left;
width: 200px;
border-bottom: none;
border-right: 1px solid white;
height: 1000px;
}