• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Ty the Web Guy

Everything Web™ Since 1995

  • Home
  • About Me
  • Experience
  • Services
  • Contact

jquery.tappable.js

September 26, 2014 By Ty Cahill

 

 

/*
 * jquery.tappable.js version 0.2
 *
 * More responsive (iOS-like) touch behaviour for buttons and other 'tappable' UI
 * elements, instead of Mobile Safari's 300ms delay and ugly grey overlay:
 *
 * - A 'touched' class is added to the element as soon as it is tapped (or, in
 * the case of a "long tap" - when the user keeps their finger down for a
 * moment - after a specified delay).
 *
 * - The supplied callback is called as soon as the user lifts their finger.
 *
 * - The class is removed, and firing of the callback cancelled, if the user moves
 * their finger (though this can be disabled).
 *
 * - If the browser doesn't support touch events, it falls back to click events.
 *
 * More detailed explanation of behaviour and background:
 * http://aanandprasad.com/articles/jquery-tappable/
 *
 * See it in action here: http://nnnnext.com
 *
 * I recommend that you add a `-webkit-tap-highlight-color: rgba(0,0,0,0)`
 * style rule to any elements you wish to make tappable, to hide the ugly grey
 * click overlay.
 *
 * Tested on iOS 4.3 and some version of Android, I don't know. Leave me alone.
 *
 * Basic usage:
 *
 * $(element).tappable(function() { console.log("Hello World!") })
 *
 * Advanced usage:
 *
 * $(element).tappable({
 * callback: function() { console.log("Hello World!") },
 * cancelOnMove: false,
 * touchDelay: 150,
 * onlyIf: function(el) { return $(el).hasClass('enabled') }
 * })
 *
 * Options:
 *
 * cancelOnMove: If truthy, then as soon as the user moves their finger, the
 * 'touched' class is removed from the element. When they lift
 * their finger, the callback will *not* be fired. Defaults to
 * true.
 *
 * touchDelay: Time to wait (ms) before adding the 'touched' class when the
 * user performs a "long tap". Best employed on elements that the
 * user is likely to touch while scrolling. Around 150 will work
 * well. Defaults to 0.
 *
 * onlyIf: Function to run as soon as the user touches the element, to
 * determine whether to do anything. If it returns a falsy value,
 * the 'touched' class will not be added and the callback will
 * not be fired.
 *
 */

Filed Under: JavaScript, Webdev

Footer

Ty the Web Guy has been immersed in web design and development for over 20 years. Serving businesses and non-profits locally in the Sacramento area and across the United States. Find out how Ty can help you!

Call 1-800-754-5470 or email [email protected].

Copyright © 2021 Ty the Web Guy · All rights reserved.

Ty the Web Guy and Everything Web are trademarks of Ty Cahill.