Sunday 9 June 2013

Detect screen size with jQuery and apply a CSS style

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.


<div>

The colour of this text will change.

</div>

Let's test if the user screen size is less than 1024x768 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.

How to enable JavaScript in your browser

quote Nowadays almost all web pages contain JavaScript, a scripting programming language that runs on visitor's web browser. It makes web pages functional for specific purposes and if disabled for some reason, the content or the functionality of the web page can be limited or unavailable. Here you can find instructions on how to enable (activate) JavaScript in five most commonly used browsers.

Internet Explorer Mozilla Firefox Google Chrome Apple Safari Opera
javascript enabled JavaScript is enabled in your web browser. If you disable JavaScript, this text will change.

Developer Instructions for web developers

You may want to consider linking to this site, to educate any script-disabled users on how to enable JavaScript in five most commonly used browsers. You are free to use the code below and modify it according to your needs.
<noscript>
 For full functionality of this site it is necessary to enable JavaScript.
 Here are the <a href="http://www.enable-javascript.com/" target="_blank">
 instructions how to enable JavaScript in your web browser</a>.
</noscript>
On enable-javascript.com we optimize the script-disabled user experience as much as we can:
  • The instructions for your browser are put at the top of the page
  • All the images are inlined, full-size, for easy perusing
  • This developer-centric message is out of the way
We want your visitors to have JavaScript enabled just as much as you do!

Firefox Mozilla Firefox

  1. On the web browser click "Firefox" menu and then select "Options".
  2. In the "Options" window select the "Content" tab.
  3. Mark the "Enable JavaScript" checkbox.
  4. In the opened "Options" window click on the "OK" button to close it.
  5. Click on the "Reload current page" button of the web browser to refresh the page.
  • 1. On the web browser click "Firefox" menu and then select "Options".
  • 2. In the "Options" window select the "Content" tab.
  • 3. Mark the "Enable JavaScript" checkbox.
  • 4. In the opened "Options" window click on the "OK" button to close it.
  • 5. Click on the "Reload current page" button of the web browser to refresh the page.

Internet Explorer Internet Explorer

  1. On web browser menu click "Tools" menu and select "Internet Options".
  2. In the "Internet Options" window select the "Security" tab.
  3. On the "Security" tab click on the "Custom level..." button.
  4. When the "Security Settings - Internet Zone" dialog window opens, look for the "Scripting" section.
  5. In the "Active Scripting" item select "Enable".
  6. When the "Warning!" window pops out asking "Are you sure you want to change the settings for this zone?" select "Yes".
  7. In the "Internet Options" window click on the "OK" button to close it.
  8. Click on the "Refresh" button of the web browser to refresh the page.
Internet Explorer < 9 Internet Explorer < 9
  1. On web browser menu click "Tools" and select "Internet Options".
  2. In the "Internet Options" window select the "Security" tab.
  3. On the "Security" tab click on the "Custom level..." button.
  4. When the "Security Settings - Internet Zone" dialog window opens, look for the "Scripting" section.
  5. In the "Active Scripting" item select "Enable".
  6. When the "Warning!" window pops out asking "Are you sure you want to change the settings for this zone?" select "Yes".
  7. In the "Internet Options" window click on the"OK" button to close it.
  8. Click on the "Refresh" button of the web browser to refresh the page.
Firefox < 4 Mozilla Firefox < 4
  1. On the web browser menu click "Tools" and select "Options".
  2. In the "Options" window select the "Content" tab.
  3. Mark the "Enable JavaScript" checkbox.
  4. In the opened "Options" window click on the "OK" button to close it.
  5. Click on the "Reload current page" button of the web browser to refresh the page.

Chrome Google Chrome

  1. On the web browser menu click on the "Customize and control Google Chrome" and select "Settings".
  2. In the "Settings" section click on the "Show advanced settings..."
  3. Under the the "Privacy" click on the "Content settings...".
  4. When the dialog window opens, look for the "JavaScript" section and select "Allow all sites to run JavaScript (recommended)".
  5. Click on the "OK" button to close it.
  6. Close the "Settings" tab.
  7. Click on the "Reload this page" button of the web browser to refresh the page.

Safari Apple Safari

  1. On the web browser menu click on the "Edit" and select "Preferences".
  2. In the "Preferences" window select the "Security" tab.
  3. In the "Security" tab section "Web content" mark the "Enable JavaScript" checkbox.
  4. Click on the "Reload the current page" button of the web browser to refresh the page.

Opera Opera

  • 1. a) Click on "Menu", hover mouse on the "Settings" then hover mouse on the "Quick preferences" and mark the "Enable JavaScript" checkbox.
  • 1. b) If "Menu bar" is shown click on the "Tools", hover mouse on the "Quick preferences" and mark the "Enable JavaScript" checkbox.
  • 1. a) opera10 a
  • 1. b) opera10 b
Opera < 10 Opera < v. 10
  1. On the web browser menu click "Tools" and select "Preferences".
  2. In the "Preferences" window select the "Advanced" tab.
  3. On the "Advanced" tab click on "Content" menu item.
  4. Mark the "Enable JavaScript" checkbox.
  5. In the opened "Preferences" window click on the "OK" button to close it.
  6. Click on the "Reload" button of the web browser to refresh the page.