Responsive Javascript

Change the functionality of your site based on responsive state

What is Responsive Javascript?

Responsive Javascript is the title given to Javascript which reacts to the state of the browser. This can include reacting to the size of the viewport, whether or not the display of your device supports touch events, whether geolocation is supported to name but a few examples.

What are the Browser APIs?

The browsers provide us with 2 key APIs which allow us to add Responsive Javascript to our site, they are the window.matchMedia API and the window.onresize API.

window.matchMedia

The window.matchMedia API allows you to test a particular media query and add an event listener for when it is matched or unmatched. The benefit of this being that we can use the same media queries in the Javascript as we have used in our CSS. The disadvantage being that we are limited to only test for things that media queries can test for.

//Prepare a MediaQueryList
var mql = window.matchMedia("(max-width:768px)");

//Add a listener to the MediaQueryList
mql.addListener(function(e){
        if(e.matches){
                console.log('enter mobile');
        }
});

Methodology

  • Prepare a MediaQueryList by using a media query with window.matchMedia
  • Add listener to MatchQueryList
  • When listener fires check if its a match or unmatch

Browser support

  • IE10*+
  • Chrome 9+
  • Firefox 6+
  • Safari 5.1+
  • Opera 17+

* polyfill avaliable to add support for older browsers

window.onresize

The window.onresize method runs whenever the browser is resized by the user so can be used to detect changes to the viewport size. As this is the most common way we may want to differentiate our Javascript across responsive states this works great for writing our responsive Javascript.

As the window.onresize API has been arround as part of the browsers for a long time it is likely you have used it before however with responsive Javascript we will be simply using it to run any Javascript handling the change between browser states.

var resizeMethod = function(){
    if (document.body.clientWidth < 768) {
        console.log('mobile');
    }
};

//Attach event for resizing
window.addEventListener("resize", resizeMethod, true);

Methodology

  • Add event to window.onresize
  • Use conditional statements to detect current width of browser
  • Add debounce to resize event to prevent it firing excessively

Browser support

  • IE
  • Chrome
  • Firefox
  • Safari
  • Opera

Are there libraries?

There are a couple of popular libraries which can be used for responsive Javascript.

SimpleStateManager Logo

SimpleStateManager

SimpleStateManager is a responsive state manager which allows you to target different Javascript towards different states of your site. It allows you to define as many states as your site requires and allows you to have independent Enter, Leave and Resize events for each of the states.

Key features

  • Uses browser on resize event
  • Debug your states using the SSM debug panel
  • Write your own tests so you can test for anything Javascript can test for
  • Extend with plugins

Methodology

  • Prepare a state in the onEnter
  • Clean up a state in the onLeave
  • Define a onResize event per state (optional)

Examples

Browser support

  • IE
  • Chrome
  • Firefox
  • Safari
  • Opera
Enquire.js Logo

enquire.js

Enquire.js is a Javascript library which enables you to make your Javascript respond to CSS media queries. It uses the same media queries that you use in your CSS to detect when the Javascript should be enabled or disabled.

Key features

  • Uses matchMedia API
  • Manages registering and unregistering

Examples

Browser support

  • IE10*+
  • Chrome 9+
  • Firefox 6+
  • Safari 5.1+
  • Opera 17+

* polyfill avaliable to add support for older browsers

yepnope.js Logo

yepnope.js

yepnope.js is an asynchronous conditional resource loader. It allows you to load only the scripts that your users needs.

Example usage

yepnope({
  test : Modernizr.geolocation,
  yep  : 'normal.js',
  nope : ['polyfill.js', 'wrapper.js']
});

Browser support

  • IE
  • Chrome
  • Firefox
  • Safari
  • Opera
Modernizr Logo

Modernizr

Modernizr is a Javascript library that detects HTML5 and CSS3 features in the user’s browser.

One of Modernizr's less known features is its ability to test media queries using the method Modernizr.mq(str).

Example usage

//Returns true or false
Modernizr.mq('only all and (max-width: 767px)');

Browser support

  • IE9+
  • Chrome 4+
  • Firefox 3.5+
  • Safari 3.1+
  • Opera 9.5+