ENTRY LEVEL WORKER
Joined: 06 Aug 2013
Posts: 5
|
 Posted: Tue Aug 06, 2013 11:23 pm Post subject: jQuery And Responsive Web Design |
| |
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
_________________
judi bola |
|
FAQ
Search
Memberlist
Usergroups
Profile
Log in to check your private messages
Log in
Register
