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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Hehe nice tip thank you jeffrey! This is awesome for mobilephones!
Except for the fact most mobile phones do not have javascript hencce this doesnt work :/ (most smartphones do however)
Instead of working with Javascript to try to customize mobile devices, you should implement mobile-specific CSS by choosing an appropriate “media”.
http://www.w3.org/TR/CSS21/media.html#media-types
Hey really nice tuts I hope i am gone use this sooner or later……………….
useful tip. tnx jeff
yea great tip for all those readers out there using old monitors. they aren’t as lucky as us web designers to have huge monitors. =D
That’s a pretty awesome tip. I love how it seems complex but only requires a few additional lines of code. Thanks!
You have taught me SOOOOO Much,,, I learn best by watching the results,, but could I ask a favor,,,,on your demo’s you use a black background,,, it makes it hard to see the code as you type it in,,,,,could you use a white background,,?
Thank you for teaching an old dog the new tricks,,,
Dixie
Thanks, Dixie! Sure – I’ll try to remember to default back to the basic TextMate skin when I record.
That’s really a quick tip.
Thanks
Everybody should checkout Elastic CSS Framework, to accomplish this in a simpler way
or you could drop the dumb fixed-width websites and make one that actually works at multiple resolutions! It’s not that hard!!
Fluid websites have been done before but some screens now are close to 2000 pixels wide. Would you want to read a line of text that wide? because with fluid layouts the potential is there. Designing for 1024 is what I go for now, always put in one of these tricks to compensate for widescreen users.
Thanks, this could be very useful soon
thanks Jeff, what happen to ur blog? http://www.jeffrey-way.com/ getting goddady default page
Yikes! I must have screwed up with the forward. You can go to jeffrey-way.tumblr.com for now. :)
FYI, your site is still not forwarding.
Also, what’s an “almost wife”?
———-
You are providing great little screencasts!
Just as I was scratching my head over how to get this effect. This site is a godsend! Thanks Jeffrey. :)
You could use media queries for the better browsers to accomplish this without javascript. I did an article on orientation detection for the iPhone using CSS3 media queires http://www.thecssninja.com/css/iphone-orientation-css. This could be modified to do what you’re demo does and fallback to javascript when it’s not available.
Nice Tut…
never thought of that but it’s a great idea. anyone have an idea of how to animate that?
Nice man ! tnx for this! you are the best !
nice tip Jeffrey, thanks for sharing. :)
Great as always Jeff!
This is A useful tip jeff!: Thanks a lot!
very nice tip, thanks for sharing Jeffrey
good tutorial, thanks
nice tut, thnx
Great stuff Jeff well done!
Hey nice tut but the if statement in checkWindowSize has the same code for both branches…
Right – because it’s calling toggleClass – which will remove the class if one is present, or add the class if it’s not.
it’s the same as this:
var a
var b
if (a == 1)
b = 5
else
b = 5
no matter what a is, b will always get set to 5.
I think it was just supposed to be a quick example.
99% of people would realize to switch the code.
No. It checks the size of the browser when resized. ToggleClass
performs a different operation dependent on whether or not a class is currently set.
Hey Jeffery great screencast.
Do you or anyone else know of a Windows Editor that auto completes your lines of code like yours? That’s a huge time saver!
Beautiful way to maximize your site’s compatibility to different resolutions. simple and great!
Hello Jeffrey, I have been following a lot of your jQuery tuts lately, but for this one, my page only resizes after I shrink and then click refresh. I have it set to
$(function () {
rather than
function checkWindowSize() {
because with the latter option my page won’t resize at all, with or without refresh
Thanks for the tips
your are the best teacher I have…
everyday I learn something new and very useful!
thank’s a lot!
quick and tasty…
Very cool tip! I like it so much. I’m working on a Mac with a very high resolution and all my Designs look very chaotic on a windows pc… Helpful!
Nice. Thanks Jeff!
Thanks Jeffrey.
Great tip. thank you jeffrey!
Nice walk through!
One of the best I’ve seen. Quick, simple and great information.
That is great, I know some clients still use 800×600 on a 22 inch monitor :-)
This is a great tip. Especially because it degrades fine. Thanx Jeff!
woot ! what an awesome tip … Thanks Jeff !!!
Awesome! Very helpful
That’s a big one! Thank you very much!
I always had a problem similar to this, when I try to make a bar type thing with an iframe. The only issue is that I have thought myself to always assume that the user has javascript off… :/
Cool. I’ve been doing exactly this on a website I’m doing at work. I basically listen for users resolution on page load and window resize. If below 1280, nothing, if above, it adds a “wide” class to the body :)
Great Tip!
Also, this is a good way to incorporate some advertising space in your websites for those who sufficient screen real estate to show it.
Very cool.. these webdesign studies are so muchfun since I found this site – Caution highly addictive ! Thank you so much
Hi,
I have just one question. The resizing function works great, but if I have my browser window maximized, the code does not add the large class to the body. Is there a way how to solve it?
Are you sure? It seems to be working for me. What browser are you using?
I tested in FF3.6, Safari 4, Opera 10 – it is not working in the moment, when the browser starts in maximized window. If I resize the window, it works, even if I maximize it from not maximized window.
Btw. Using PC Windows Vista.
No one has the same problem as me?
I’m working on Windows 7 and have the same problem. No matter what browser I use (Firefox, IE, Opera, Safari or Google Chrome), when the window is maximized and I load my site, it doesn’t apply the large class.
It seems that the script used for the Nettuts site (tutsResize.js) is different and it works even when you start out with a maximized browser window. I’m no Javascript / jQuery expert, but I think that script works better because it also fires when the page is loaded.
I’ll see if I can come up with a solution, because I’d love to get this working properly. Great tip, Jeffrey :)
I found the problem.
There’s a difference between the code in the screencast and the code on this page.
In the screencast you’ll see the following two lines:
checkWindowSize();
$(window).resize(checkWindowSize);
The first line fires the resize function on window load. The second line fires the resize function whenever the window is resized afterwards.
In the snippet on this page, that first line (checkWindowSize()) is left out, so the function won’t be fired when the window loads. Add the line, and everything works fine again.
Great! You are right Rogier! It is now working fine:-)
I don’t Knopw anything about javascript but i think if you help me to do that i’ll really Thank you , i say that because i try it but without any succes .
my probleme that i want to do that but me when the size is begger than 1800 put to my #Header a background else put an other background can you help to do that Please !?
WOW!!!!
Great tut!
I’d love it if you could make a tutorial how too make like rounded corners for internet explorer & opera!
That’s a pretty awesome tip. I love how it seems complex but only requires a few additional lines of code. Thanks!
Great tips. It is particularly useful when adjusting the site’s layout for different screen sizes.