jQuery And Responsive Web Design

Responsive Web Design (RWD) is very much the buzzword and way forward in web design these days. Many people are using CSS media queries to control the layout of sites at different resolutions, but jQuery can be used too for controlling content.

Just a quick reminder with media queries first: You can set a variety of conditions such as min or max-width, resolution, viewport (screen/handheld) etc and you will find a lot of resources online that go in to these in great detail. For that reason, I’m not going to post samples here, just refer you to a couple of useful resources.

A good starting point is Ethan Marcotte’s book “Responsive Web Design” available here at A Book Apart. Also worth reading, is an article on the OneXtraPixel website that gives clear instruction and examples.

But… what if you want to control content that appears or gets hidden with changes to your screen width? This is something that can be done fairly easily with a dash of jQuery, like this:

if ( $(window).width() < 768) {
   alert('This window is LESS than 768 pixels wide');
}
else {
   alert('This window is MORE than 768 pixels wide');
}

In our code above, we are checking to see if the browser width is less than 768 pixels wide and displaying an alert. If it’s wider, we show a different message. This can be adapted to suit your needs using whatever code you like. Just remember, it needs jQuery (JavaScript) enabled to work.

Related posts:

Colossal Bundle of Design Resources – Amazing Deal Light Blue Software Custom Web Gallery Templates Derren Brown Lottery Prediction