Using pure JS to determine page breakpoints

So far, we've worked mainly with modern browsers. These handle media queries effectively, allowing us to display the right image at the right time. What if we had to support old IE browsers, for example, that can't handle media queries without some form of help? No problem—enter breakpoints.js, one of the many JavaScript/jQuery libraries available to help us mimic media queries. I feel an exercise coming on, so let's make a start building an example to see how it works:

1. We'll begin with setting up our markup for the demo. This contains some simple textboxes set to show in a group. For this, we need to extract copies of breakpoints.html and breakpoints.css from the code download that accompanies this book. Save them both into the project folder: the HTML file at the root and the CSS file within the css subfolder.
2. We need a copy of jQuery 2.x—there should already be one in our project folder from earlier demos; if not, extract a copy from the code download that accompanies this book or from http://code.jquery.com.

   Note

   Although breakpoints.js is a few years old, I've tested it with jQuery 2.1.1 with no noticeable issues seen.

3. Next comes the all important breakpoints.js library. Go ahead and extract a copy from the code download that accompanies this book and save it to the js subfolder of our project folder. Newer versions will be available at http://xoxco.com/projects/code/breakpoints/.
4. We need to add the call to initialize our breakpoints, so go ahead and add this code in between the empty <script> tags:

     $(function () {
       $.breakpoints({
         '.article': {
           'small': [0, 320],
           'medium': [320, 480],
           'large': [480, null]
         }
       });
     });

5. Save your work. If all is well, we should see these three boxes when previewing our work in a browser session:
   

At this point, try resizing the browser window. Notice how each of the text boxes resize. We're using image placeholders from the Placehold.it service at http://placehold.it/; these automatically resize in the same manner.

Note

There is a working example of this exercise available on the code download for this book—extract breakpoints-finished.html and breakpoints-finished.css, along with jQuery and breakpoints.js, then rename the HTML and CSS files to breakpoints.html and breakpoints.css to view the demo. You will need to store them in the appropriate subfolder of our project folder for them to work correctly.

But hold on! A closer look at the CSS shows no media queries. This is the beauty of breakpoints.js; it allows us to replicate media queries for those browsers that don't support them natively. Sure, it's a little extra overhead; we can get around this using conditional comments (or Modernizr), so the overhead only appears when needed.

Tip

There are other examples available online that you may prefer to use. Take a look at http://www.responsivejs.com or search through GitHub to find alternatives.

Let's move forward and take a look at a different method of switching images; so far we've used media queries to handle which image should be displayed. However, we're not limited to using them. We can use an alternative method in the form of source shuffling.

Source shuffling uses both jQuery and CSS—if JavaScript is disabled, then CSS media queries will kick in and perform a similar function instead. Let's dig into an example to see how it works and why this could potentially provide the best of both solutions to us.