Responsive Javascript

Presented by your friends atPresented by your friends at

Responsive JavascriptResponsive Javascriptin Drupal Sitesin Drupal Sites

About MeAbout Me

CEO of Trellon

on drupal.org@techsoldaten

Chief Internet Strategistfor Trellon

One of the first Drupal firms in North America

10+ years architecting large scale Drupal

environments

Passionate about scalability, third-party

integration, contributions

Responsive Javascript in Drupal Sites

https://www.drupal.org/u/techsoldaten

Responsive JavascriptResponsive Javascript


Scripts that run:

In specific browser dimensionsOn devices with specific capabilitiesCan be activated / removed in response to changesin device dimensions, including rotation

There's No One WayThere's No One Way


Popular solutions. Each has benefits and drawbacks:

jQuery MobilejQuery FactoriesConditional javascript with @mediaJust using display: none and duplicating the markupwith a different selector

Why is This a DrupalWhy is This a DrupalProblem?Problem?


Drupal has a lot of things that don't respond well to mobile.

CKEditor: Try using this on mobileViews Slideshow: No destroy methodBreakpoints: No integration outside theme

Recipe for ResponsiveRecipe for ResponsiveJavascriptJavascript


jRespondDefine breakpoints in theme

ViewsJust views, no slideshows

jRespondjRespond

Allows you to set breakpoints


<script> // adds breakpoints used by javascript var jRes = jRespond([ { label: 'handheld', enter: 0, exit: 640 },{ label: 'tablet', enter: 768, exit: 979 },{ label: 'desktop', enter: 1200, exit: 10000 } ]); </script>

jRespondjRespond



<script> jRes.addFunc({ breakpoint: 'handheld', enter: function() { // turns on slideshows nav = showSlideshow('#slideshow'); }, }); function showSlideshow(item){ item.cycle(); }</script>

Structured around functionsthat fire when dimensionschange (instead of useractivity)

jRespondjRespond



<script> jRes.addFunc({ breakpoint: 'handheld', enter: function() { // turns on slideshows nav = showSlideshow('#slideshow'); }, // here's my exit function exit: function() { // removes slideshows '#slideshow'.cycle('destroy'); }, }); function showSlideshow(item){ item.cycle(); }</script>

Code executes when usersenter and exit

Structured around functionsthat fire when dimensionschange (instead of useractivity)

ViewsViewsInstead of using a Views plug in to generate something,use responsive jQuery


ExamplesExamplesLet's look at some sitesLet's look at some sites

Questions?

Thank you!https://github.com/ten1seven/jRespond

[email protected]/trellon

Responsive Javascript

Technology

Transcript of Responsive Javascript