Sometimes we need to format the content differently according to the screen resolution of the user. One of the ways to do this is to simply detect the screen width using the screen.width property and change the stylesheet. In this tutorial we're going to see how to do that using jQuery.

The first step is to load our base stylesheets, the jQuery library and our javascript.

The colour of this text will change.

Let's test if the user screen size is less than 1024×768 and if it is, we will change the stylesheet.

The changing style

Define the same style in two different sheets. Once for the 1024 x 768 and once for the 800 x 600. Just make something quick and distinctive, for style1.css I'm adding:

div{
color: #006699;
font: 24px Georgia, serif;
}


and for style2.css
 

div{
color: #df0000;
font: 24px "Trebuchet MS", sans-serif;
}


 

Detecting screen width

We are going to add a JavaScript alert so the execution will pause until we click OK and we get to see the former style.
 

$(document).ready(function() {

if ((screen.width>=1024) && (screen.height>=768)) {
alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "style2.css"});
}
else {
alert('Screen size: less than 1024x768, 800x600 maybe?');
$("link[rel=stylesheet]:not(:first)").attr({href : "style1.css"});
}
});


As a selector, we look for the link element with a rel attribute with a value of stylesheet. We are going to redirect its href to a different stylesheet. Now, since I'm loading a reset stylesheet in the first place, i will add the :not(:first) modifier, so it won't affect the first element.
 

Enjoy!

 

0 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *

fourteen + 11 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like
Read More

HTML & CSS: A Beginner’s Guide

HTML & CSS: A Beginner's Guide teaches you with the aid of colourful screenshots and diagrams how to create web sites and style them using Cascading Style Sheets. This book offers practical guidance, examples and know how without the long boring technical fluff and how to apply it to related Web development issues.

jQuery: Setting cookies

Setting and clearing cookies with jQuery is really easy but it's not included in the jQuery core and requires a plug-in. This post shows how to set, get the value of and clear cookies with jQuery.