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
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
