13 jQuery Plugins That Handle Touch Events for Developers
A lot of issues emerged with the launch of the innovative smartphones that had touch screens, based on touch events and how they are managed through a mobile browser or on various websites.
iScroll finally received a complete rewrite. Now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability.
Pep was built out of a need for kinetic drag support for both mobile and desktop devices (click & drag). It uses the best of jQuery’s animate functions along with CSS3 animations to bring full-blown kinetic drag that works on all HTML5-ready devices.
Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic
Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser. The plug-in adds a draggable drift to overflowed DOM elements as well as a set of fading ‘thumbs’. OverScroll runs best on Safari 5+, Chrome 5+, and Firefox 3+ but should run just fine on most modern browsers. Below you can find an interactive demo of overscroll in action, as well as instructions on how to integrate it into your web application.
Swiper – is the free and ultra lightweight mobile touch slider with hardware accelerated transitions (where supported) and amazing native behavior. It is intended to use in mobile websites, mobile web apps, and mobile native apps. Designed mostly for iOS, but also works on Android and latest Desktop browsers.
In mobile development, it’s often easier to start prototyping on the desktop and then tackle the mobile-specific parts on the devices you intend to support. Multi-touch is one of those features that’s difficult to test on the desktop, since most desktops didn’t have multi-touch hardware, and thus desktop browsers don’t have touch event support. Things are different today (you hear every mother say). Most new Macs, for example, ship with multi-touch capable input of some sort. Unfortunately the browsers haven’t really caught up yet.
Mouse will soon cease to be the dominant input method for computing, though it will likely remain in some form for the forseeable future. Touch is the heir to the input throne, and the web needs to be ready. Unfortunately, the current state of input on the web is… you guessed it: a complete mess!
A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
Touch Punch is a hack. It duck punches some of jQuery UI’s core functionality to handle the mapping of touch events. Touch Punch works with all basic implementations of jQuery UI’s interactions and widgets.
Touchy is a jQuery plugin for managing touch and gesture events on WebKit browsers, such as Mobile Safari or Android Browser, or any browser that supports the ontouchstart, ontouchmove and ontouchend events.
It creates new custom events that a programmer may utilize at a high level, such as “touchy-pinch” and “touchy-rotate” among others, and thus avoid the low-level work of combining touch and gesture events to achieve these common gestural controls.
A pure logic component for scrolling/zooming. It is independent of any specific kind of rendering or event system.
A jQuery plugin that enables you to add gesture events such as ‘pinch’, ‘rotate’, ‘swipe’, ‘tap’ and ‘orientationchange’ just like native jQuery events. Includes event substitution: a “tapone” event can be triggered by “clicking”, a “swipe” by performing a swipe-ish mousegesture.