Responsive Page Layouts with jQuery and CSS

Screen resolutions vary tremendously these days.  As a web developer, you want your site to present itself nicely no matter what platform you’re viewing it on.  For years now, many companies thought the best approach to delivering content to a mobile device would be to create a clone of the site specifically styled for mobile devices.  Nice thought I guess.  If you don’t have the budget, or the time to invest in a mobile site or a mobile app, there’s a quick and easy way to have your website go from a static width to a responsive one, and this is all possible with some basic CSS and javascript (I use jQuery, but you can accomplish this with traditional JavaScript).

So here’s what I’m thinking:

I’ll create a site as I normally would with a main stylesheet.  This stylesheet will be where most of my rules are defined for the layout minus the main width of the site.  Keep this in mind when you’re writing your CSS so it will be a simple modification to change the width of the site.  I’m also going to include a copy of jQuery right above the stylesheet.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Website</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="container">
    Website content goes here...
  </div>
</body>
</html>

Then, I’ll create another stylesheet and give it an ID of “smartCSS” so I can reference it via JavaScript (jQuery).  This stylesheet will basically be used set the width of the site to the industry standard.  It should also be placed directly below the existing “main.css” file like so…

...
<title>My Website</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/normal.css" rel="stylesheet" type="text/css"id="smartCSS" />
...

normal.css:

body {
  background:#AAAAAA;
}
div#container {
  width:500px;
}

Now, I’m going to prepare a 3rd stylesheet called “wide.css”. This will be replacing “normal.css” with jQuery when the browser window is wider than 800 pixels.

wide.css:

body {
  background:maroon;
}
div#container {
  width:700px;
}

Here’s where the power comes in… jQuery. This code can be placed anywhere in the document. Some popular places are within the <head> (if you’re going to place it here, it should be directly before the closing head tag. You’re stylesheets and jQuery source file should be above this). You could also put it directly before the closing body tag.

<script type="text/javascript">
  function setWidth() {
    var theWidth = $(window).width();
    if (theWidth > 800) {
      $("#smartCSS").attr("href""css/wide.css");
    else {
      $("#smartCSS").attr("href""css/normal.css");
    }
  }
  $(document).ready(function() { setWidth(); });
  $(window).resize(function() { setWidth(); });
</script>

Allow me to explain:

Line 2 creates a function that gets the width of the browser window. It then checks if the window is greater than 800 pixels. If it is, it sets the “href” attribute of the smartCSS stylesheet to “css/wide.css”. Otherwise, it sets it to “css/normal.css”. This is just defining a function. It never runs unless it’s called. On line 10, it does just that. When the page is loaded, it fires off the function once. This will make the website determine your browser’s width and set it accordingly when the page is loaded. The neat part is on line 11. The jQuery resize() function is called hundreds of times while the browser window is being resized by the user. Every time this occurs, the site is making a choice on how to display the content.

I prepared a demo for you so you can see it in action:

View the Demo