15 jQuery Plugins That Handle Touch Events for Designers

September 22, 2014
1 Star2 Stars3 Stars4 Stars5 Stars

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.

Hammer.js

eightmedia_github_com_hammer_js

Hammer.js is a javascript library that can be used to control gestures on touch devices. It supports the following gestures: Tap, Double tap, Hold, Drag, Swipe, Transform (pinch)

iScroll 4

cubiq_org_iscroll-4

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.

Ember.js

emberjs_com

Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.

jquery.pep.js

pep_briangonzalez_org

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

swipejs_com

Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic

Overscroll

www_azoffdesign_com_overscroll

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

www_idangero_us_sliders_swiper

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.

Multi-Touch for your Desktop Browser

smus_com_multi-touch-browser-patch

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.

Generalized input on the cross-device web

smus_com_mouse-touch-pointer

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!

FlipPage

marcbuils_github_com_Flippage

jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets

jquerymobile_com

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.

jQuery UI Touch Punch

touchpunch_furf_com

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

github_com_HotStudio_touchy

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.

Zynga Scroller

github_com_zynga_scroller

A pure logic component for scrolling/zooming. It is independent of any specific kind of rendering or event system.

jGestures: a jQuery plugin for gesture events

jgestures_codeplex_com

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.

Leave a Reply

Your email address will not be published. Required fields are marked *