What is MQWatch?

Simply put, it is jQuery plugin designed to enhance working with complex Responsive Web Design layouts.

One of the limitations of Responsive Web Design is that the content must follow a specific flow across all devices. Unfortunately this sometimes just doesn't work as well as we would like. For example: we may have a blog post where the authors name is located above the article on a desktop view - but on a mobile we would rather have it below the article. This can be corrected using Javascript. We can also use it to load in new content specific to a screen size.

MQWatch is a jQuery plugin which enables you to detect Media Queries* and perform actions specific to each browser's resolution. It has been developed to work as far back as IE7.

Click here to see it in action

 

* This plugin doesn't actually detect the Media Query, instead it works from the width of the browser window directly

Download

Features

How to use the MQWatch Media Query Detection plugin

Using MQWatch very simple, you can simply head on over to our download page and grab latest version as a pack with a working example, or follow these instructions:

  1. Include your preferred version of jQuery (Tested from 1.5.0+) and the latest version of MQWatch:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="mqwatch-1.0.0.min.js"></script>

  2. Create a new instance of the MQWatch function when the DOM is ready:

    $(function() { var mqw = new $.mediaQueryWatch(); });

  3. Create the actual listeners with a callback(s). There are two types, one is an instant check and the other is a watcher to identify resolution changes:

    $(function() { var mqw = new $.mediaQueryWatch(); //Instant (one-off) check mqw.match( 0, // The minimum resolution to check 767, // The maximum resolution to check callback // Callback if the resolution matches your range ); //Listener to detect changes mqw.watch( 0, // The minimum resolution to check 767, // The maximum resolution to check callback, // Callback if the resolution enters your range callback, // Callback if the resolution exits your range true // Should we do an instant check when DOM is ready? If true executes the first callback. Boolean (default:false) ); });

  4. You can set multiple ranges to serve content to various devices. Eg: Desktop, Notebook, Tablet & Mobile. (match()'s and watch()'s can both be set up and have multiple instances if you like)

    $(function() { var mqw = new $.mediaQueryWatch(); //Mobile mqw.watch( 0, 767, function() { alert('Hello Mobile'); }, function() { alert('Goodbye Mobile'); }, false ); //Tablet mqw.watch( 768, 1023, function() { alert('Hello Tablet'); }, function() { alert('Goodbye Tablet'); }, false ); //Notebook mqw.watch( 1024, 1269, function() { alert('Hello Notebook'); }, function() { alert('Goodbye Notebook'); }, false ); //Desktop mqw.watch( 1270, 0, function() { alert('Hello Desktop'); }, function() { alert('Goodbye Desktop'); }, false ); });

MQWatch Global Settings

There is only one global setting and it is "resizeTimeOut" and its default value is 300ms. Basically it is a timer for how long after you resize your browser until the callback is executed for any watch()'s you have. It also serves as a timer to prevent the Chrome & IE issue where as you resize your browser the .on('resize') keeps firing constantly.

$(function() { var mqw = new $.mediaQueryWatch({ 'resizeTimeOut' : 300 }); });

Licence

MQWatch is licensed under the MIT license

Support

This is only a really quick and temporary page - the proper one will be launched soonish but if you have any questions or issues please feel free to ask me on Twitter.