>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #1789676. --> Reported by: [ferahl](https://www.drupal.org/user/1618294) >>> <h2>About</h2> <p>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.</p> <h2>How to install and configure</h2> <p>Activate the module, setup permissions, and then go to <code>admin/settings/responsify</code> to set up your devices.</p> <h2>How to use</h2> <p>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 <code>mymobilestuff.js</code> which you only wanted to load in on mobile device widths. You would add your JS file like this:</p> <p><code>drupal_add_js(path_to_theme() . '/js/mymobilestuff.js?device=mobile');</code></p> <p>If you want to know when a new device has loaded in listen to a custom <code>deviceload</code> event on the <code>html</code> element. This is useful because there is no automatic way to "unload" JavaScript. For the sake of older jQuery I will demonstrate with the <code>bind</code> handler:</p> <p><code>$('html').bind('deviceload', function(ev, device_name, breakpoint_from, breakpoint_to) {...});</code></p> <p>The settings page also gives the option to dynamically load in new JavaScript if the browser window width changes.</p> <p><strong>Important:</strong> 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.</p> <h2>Performance Tips</h2> <p>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 <code>device</code> arg then you can add the argument <code>async=true</code> to your <code>drupal_add_js</code> call and these will load without waiting for each other to complete.</p> <h2>Code Maturity &amp; Comments to Reviewers</h2> <p>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.</p> <p><strong>Git checkout:</strong> <code>git clone --recursive --branch master ferahl@git.drupal.org:sandbox/ferahl/1789654.git responsify</code><br> <strong>Sandbox Project Link:</strong> <a href="http://drupal.org/sandbox/ferahl/1789654">http://drupal.org/sandbox/ferahl/1789654</a><br> <strong>Core:</strong> 7.x</p>