Responsive JavaScript

Adaptivetheme 7.x-3.x includes an implementation of JS Media Queries, a neat way to trigger JS when media queries change.

This allows you to avoid having to set media queries twice - once in the theme settings or CSS and again in JavaScript, probably using matchMedia().

How this works

First you must enable the Responsive JavaScript option under Polyfills. This will load the plugin and the media_queries.js file in your subtheme. Additionally a font-family declaration will be added to the responsive layout CSS for each breakpoint.

NOTE: when using this feature do not add a font-family to the html element in your theme - use the body element instead. Adaptivetheme is automatically adding a very specific font declaration to the generated layout CSS and it needs this for the plugin to work. If you check your generated files and look at the themename.responsive.layout.css file you will see font-family declarations, like this:

@media only screen and (max-width:320px) {
  html {font-family: smartphone_portrait} /* Font family for media_queries.js */
}

Remember, this all just works automatically, you do not need to manually add these font-family declarations yourself.

media_queries.js

You will find this file in your subtheme in the /scripts/ directory. You can add JS to the media_queries.js file for each breakpoint or target multiple breakpoints. For example you can taget both Smartphone orientations like this:

  // Smartphone
  {
    context: ['smartphone_portrait', 'smartphone_landscape'],
    call_in_each_context: false,
    callback: function() {
      // Debug
      console.log('smartphone');
    }
  },

Or just one:

  // portrait only
  {
    context: 'smartphone_portrait',
    callback: function() {
      // Debug
      console.log('smartphone portrait');
    }
  },

For more information on the actual plugin please see the Github project page: https://github.com/JoshBarr/js-media-queries/blob/master/README.md

Last updated 5th July, 2012 - 1:24am