Responsify

About

Responsify allows you to set up devices which have FROM and TO pixel breakpoints. You can use these devices in drupal_add_js calls to load in different JavaScript depending on whether the user is in the device bounds you specified. This allows you to for example load in different libraries if the user is on a mobile device width.

How to install and configure

Activate the module, setup permissions, and then go to admin/settings/responsify to set up your devices.

How to use

Let's say you set up a device in the admin settings called "mobile" with a from breakpoint of "0" and a to breakpoint of "480" and you had a mymobilestuff.js which you only wanted to load in on mobile device widths. You would add your JS file like this:

drupal_add_js(path_to_theme() . '/js/mymobilestuff.js?device=mobile');

If you want to know when a new device has loaded in listen to a custom deviceload event on the html element. This is useful because there is no automatic way to "unload" JavaScript. For the sake of older jQuery I will demonstrate with the bind handler:

$('html').bind('deviceload', function(ev, device_name, breakpoint_from, breakpoint_to) {...});

The settings page also gives the option to dynamically load in new JavaScript if the browser window width changes.

Important: Remember to use Drupal Behaviors in your JS files that are loaded with Responsify as they are not guaranteed to be loaded before the document ready event.

Performance Tips

It is best to load the bulk of your scripts normally to avoid visual delays. By default Responsify will load your scripts sequentially - that is to say it will wait for a script to return from the server before loading the next. If your script however does not depend on others that are loaded with the device arg then you can add the argument async=true to your drupal_add_js call and these will load without waiting for each other to complete.

Code Maturity & Comments to Reviewers

I started writing this code in Spring 2012 and it has been tested, adapted, simplified until now for use on a high traffic website. On that site it doesn't exist as a module but I have just written it out as one because I think it will be a nice contribution to the community as I couldn't find something similar.

Git checkout: git clone --recursive --branch master ferahl@git.drupal.org:sandbox/ferahl/1789654.git responsify
Sandbox Project Link: http://drupal.org/sandbox/ferahl/1789654
Core: 7.x