Today we were working on some JavaScript code for a small HTML5 iPad app. We wanted to use the Farbtastic Color Picker jQuery Plugin to allow users to quickly select from a wide range of colors.
“Farbtastic is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript. Each widget is then linked to an existing element (e.g. a text field) and will update the element’s value when a color is selected.”
Problem…
Unfortunately Farbtastic was not developed with touch events in mind. As usual with any UI code developed for desktop, the mobile user experience is pretty terrible, when it worked. We really liked the Farbtastic Color Picker, so we set out to add iOS Touch Events.
Solved!
The iOS Touch Events are super-easy to work with, so it did not take long to get Farbastic to behave itself appropriately. We ran into a binding issue where the mouse and touch events were clobbering each-other’s callbacks, but that was quickly solved.
Try This Live Demo on Your iPad!
About The Code
We added four functions to the main “fb” object to handle the HTML5 iOS Touch Events:
- touchconvert() – converts an iOS touch event into mouse-event friendly data
- touchmove() – passes touch events to the existing mouse handler
- touchend() – unbinds touch events so default page gestures are not blocked
- touchstart() – starts the ball rolling when a touch event begins
Here is a sneak-peek at the code for all the HTML5 JavaScript developers out there:
GIT The Code
If you would like to use the code in your project, go right head! We would love to hear how you used it.
Here are some useful links to get you started:
- Github: Fartastic Color Picker with iOS Touch Events
- SVG File: HTML5_Logo_Small.svg
- Standalone Demo: Farbtastic Spinning HTML5 Demo
