Handling Touch Events in jQuery Tools Scrollable

Today I was trying to optimize the experience of a website for the Apple iPad. One quick win is to respond to touch events on the device which will make your site feel much smoother and avoid the double tapping which Mobile Safari sometimes requires to activate javascript links. Additionally, your very nice paging controls may not be large enough to comfortably tap on the device (the common wisdom is touch targets need to be at least 40px square). A simple swipe can go a long way towards addressing these issues.

So, how can we get the Scrollable widget to handle touch events?

First, you’ll obviously need the jQuery Tools Scrollable widget.

Next, you’ll need Rick Olson’s excellent DoubleTap for jQuery which adds touch events to jQuery’s event system.

$.fn.handleSwipes = function() {  
  return this.each(function() {    
    var api = $(this).data("scrollable");     
    api.getRoot().addSwipeEvents()
     .bind('swipeleft', function() {         
       api.next();
     })
     .bind('swiperight', function() {         
       api.prev();       
     });  
   });
};

Once you have all three of these components on a page, initialize them like so:

$(".scrollable").scrollable().handleSwipes();

Now touch swipes will trigger the next and previous behavious built into the widget. Enjoy.

About

Second Story creates enchanting, informative, and entertaining media experiences with innovative technologies that empower connections to ideas.

Tagged with: , , ,
Posted in Technology