Advertisement
Advertisement
Advertisement
by Jeffrey Way
Length:QuickLanguages:
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; }
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Advertisement
Advertisement
Weekly email summary
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Advertisement
Translations
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this postPowered by![Native Native]()

Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.