Browse By

14 jQuery Plugins That Handle Touch Events useful for WebDesigners

oday 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. 

dojox.gesture

dojotoolkit_org_reference-guide_1_7_dojox_gesture_html

This module provides a machinery for writing unified gesture events which can run well across a wide range of devices(most single touch gesture events can also work well on desktops).

dojo.touch

dojotoolkit_org_reference-guide_1_7_dojo_touch_html

This module provides an unified set of touch events – “press | move | release | cancel”, which can run well across a wide range of devices(including desktops).

Overthrow

github_com_filamentgroup_Overthrow

The goals of Overthrow are simple: create a reliable way to safely use CSS overflow in responsive designs, polyfilling support in non-native environments where possible. As such, the scope is very tight, and we’re mostly looking for contributions to make it do what it already does better, rather than add more features. That said, we are interested in exposing hooks and events to make it easy to extend so that Overthrow could be used for more custom behavior, like snapping to regions.

jQuery Mobile Pagination Plugin

filamentgroup_com_lab_jquery_mobile_pagination_plugin

TouchSwipe: a jQuery plugin for touch devices

labs_skinkers_com_content_touchSwipe

TouchSwipe is a jquery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc.

Phantom Limb

viewinglens_com_phantom-limb

So, you know when you’re hackin’ away on that mobile webapp of yours, and you need to debug something, but mobile Safari’s debug console is kinda worthless so you just end up doing a bunch of alerts like it’s 1997?

energize.js

github_com_davidcalhoun_energize_js

Touch devices sometimes add an artificial delay to click events, just to make sure the user isn’t double-tapping to zoom. In the case where you don’t mind disabling double-tap to zoom functionality (or in cases where you’ve disabled viewport zooming), there’s no reason to preserve the click delay. That’s where energize.js comes in!

TipTap

github_com_marcbourlon_TipTap

The TipTap library is a javascript library to ease mouse and touch complex gestures definition and management on HTML DOM elements (so, though not tested, on SVG and Canvas too), as well as to provide a unified way of managing different input devices systems: mouse, touch systems and their specific data structure (iOS, Android, Windows…), Leap Motion hopefully, etc. In fact, it’s mostly a present & future based library, mostly aimed at multi-pointers interactivity, instead of our old-fashioned and already outdated mouse. But it of course supports mouse!

Touché

github_com_davidcalhoun_touche

Mouse event to touch event mapping for testing touch interfaces with desktop browsers. This means that touchstart, touchmove, and touchend are hooked up to mousedown, mousemove, and mouseend, respectively. This is generally recommended for testing purposes.

toe.js

github_com_dantipa_toe_js

toe.js is a tiny library based on jQuery to enable sophisticated gestures on touch devices.

Jester: Simple Gesture Recognition in JavaScript

github_com_plainview_Jester

A JavaScript plugin for touch-capable devices, enabling multi-touch drag, scale and rotate on HTML elements.

Interact

github_com_DamonOehlman_interact

Interact is essentially a wrapper on top of touch and mouse events. It exists to make the process of writing apps / demos that handle touch events both simpler to write and also allow them to support mouse events easily.

Lightning Touch

github_com_ucsf-ckm_LightningTouch

Lightning Touch makes links responsive without the several hundred millisecond delay typical in a hendheld touchscreen browser.

jsTouchLayer

github_com_andyjamesdavies_jsTouchLayer

JS Touch Layer is a javascript framework that abstracts away the decision of what the gesture is. It will decide for you if a tap is a tap, or a swipe is a swipe. Allowing you to bind your functions to these events without any worry.

Leave a Reply

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