Responsive Javascript
0 likes681 views
1) The document discusses using responsive JavaScript in Drupal sites to adapt content for different devices and screen sizes. 2) It presents the jRespond module as a way to define breakpoints and add functions that fire when screen dimensions change. 3) Examples are given of using jRespond to conditionally show and destroy slideshows depending on screen size to provide responsive experiences.
![jRespondjRespond
Allows you to set breakpoints
Responsive Javascript in Drupal Sites
<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>](https://image.slidesharecdn.com/responsivejavascript-150310074050-conversion-gate01/85/Responsive-Javascript-7-320.jpg)
Responsive Javascript
- 1. Presented by your friends atPresented by your friends at Responsive JavascriptResponsive Javascript in Drupal Sitesin Drupal Sites
- 2. About MeAbout Me CEO of Trellon on drupal.org@techsoldaten Chief Internet Strategist for 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
- 3. Responsive JavascriptResponsive Javascript Responsive Javascript in Drupal Sites Scripts that run: In specific browser dimensions On devices with specific capabilities Can be activated / removed in response to changes in device dimensions, including rotation
- 4. There's No One WayThere's No One Way Responsive Javascript in Drupal Sites Popular solutions. Each has benefits and drawbacks: jQuery Mobile jQuery Factories Conditional javascript with @media Just using display: none and duplicating the markup with a different selector
- 5. Why is This a DrupalWhy is This a Drupal Problem?Problem? Responsive Javascript in Drupal Sites Drupal has a lot of things that don't respond well to mobile. CKEditor: Try using this on mobile Views Slideshow: No destroy method Breakpoints: No integration outside theme
- 6. Recipe for ResponsiveRecipe for Responsive JavascriptJavascript Responsive Javascript in Drupal Sites jRespond Define breakpoints in theme Views Just views, no slideshows
- 7. jRespondjRespond Allows you to set breakpoints Responsive Javascript in Drupal Sites <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>
- 8. jRespondjRespond Allows you to set breakpoints Responsive Javascript in Drupal Sites <script> jRes.addFunc({ breakpoint: 'handheld', enter: function() { // turns on slideshows nav = showSlideshow('#slideshow'); }, }); function showSlideshow(item){ item.cycle(); } </script> Structured around functions that fire when dimensions change (instead of user activity)
- 9. jRespondjRespond Allows you to set breakpoints Responsive Javascript in Drupal Sites <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 users enter and exit Structured around functions that fire when dimensions change (instead of user activity)
- 10. ViewsViews Instead of using a Views plug in to generate something, use responsive jQuery Responsive Javascript in Drupal Sites
- 11. ExamplesExamples Let's look at some sitesLet's look at some sites
- 12. Questions?