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.
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
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
What’s happening in your mind about this post !