In Browser Multitouch Gestures with the Trackpad
I recently got myself a MacBook Pro, after waiting for over 5 whole years. In doing so I quickly found out how powerful multitouch gestures are and how quickly users become accustom to using them, some even religiously. I’ve got a UI I created for the CLARA Insight portal which is designed around the idea of telling a story, from left to right, and therefor scrolls the viewport horizontally, either with the user clicking on arrows, a menu or with keyboard shortcuts. I thought it would be awesome to add multitouch gestures to this and enable the users to swipe with two fingers to move the viewport, and so I began my search.
Not a Happy Ending Story
I want to be clear right from the start. As of writing this post, I haven’t found a jQuery plugin or a JS library that works right of the bat so as of right now, this story doesn’t have a happy ending, but please continue reading to see where I got and how tall the wall is we need to climb to reach this goal.
Lack of Browser Support
The only browsers enabling multitouch gestures right now are mobile browsers, but here we’re trying to tackle it with the trackpad in a desktop based browser, not mobile. If you want more info on that, I found a really good article on HTML5 Rocks about mobile browser support for multitouch gestures, written by Boris Smus. Short quote from that article:
Mobile devices such as smartphones and tablets usually have a capacitive touch-sensitive screen to capture interactions made with the user’s fingers. As the mobile web evolves to enable increasingly sophisticated applications, web developers need a way to handle these events.
With desktop OS browsers on the other hand, the support for multitouch gestures is almost non-existent, with the exception of Firefox. Firefox enables a few gestures but they don’t seem to be customizable enough for the use case I demonstrated in the beginning of this post. For an example, you can’t do two finger swipes, but only three fingers. We could use the MozSwipeGesture function, but as the documentation says:
The MozSwipeGesture event is sent when the user uses three fingers to “swipe” the trackpad.
The only mention of using two finger swipe gestures comes when rotating, which can most definitely be useful for image manipulation and such, but not for the use case I’m searching for. Now, I could use the three finger swipe and simply return the events preventDefault() to force the browser to prevent OS X receiving the gesture, but that’s bad UX and would get myself quickly frustrated. On top of that, I’m not even sure the browser has priority in getting mouse gestures and so, that might not even be possible.
An Use Case Specific Idea
All the major browsers support multitouch gestures. Wait, didn’t we just acknowledge that they don’t?! Well yes, you can’t talk to the gestures in JS – but, the major browsers do enable you to go back or forward in your history by swiping with two fingers on the trackpad. Why don’t we just use that to move the viewport horizontally, essentially tricking the browser into thinking that he’s going back or forward in the history? By doing that, we would need to add something to the browsers history on page load, so that by going forward it would trigger the URL to change to another view, triggering the javascript that moves the viewport and moving the viewport to the right. Going back from there would then already be implemented in the browsers history, since the last view we had open was the one on the left, so that would happen automatically.
Again, this is a shit-mix idea only valid for my own use case. I’m sorry to bore you with this burst of brain spill, but hopefully it helps or enlightens you in any way. If it doesn’t, please write a letter and send it to Bessastadir 1, 101 Reykjavik. Thank you.
What Else Can We Do?
Right now, from what I can gather, it doesn’t look like there’s much we can do, except wait. It doesn’t look like multitouch gestures for the desktop versions of webkit based browsers are on their frontline roadmap. Firefox has a limited support for it, but I couldn’t find any evidence of that support expanding. With Opera I can’t find anything relating to multitouch gestures being forwarded all the way to the javascript engine and Internet Explorer – I’m not even going to touch!
What do you think? Have you found a JS plugin that ports multitouch gestures from the trackpad to simple functions? What would you use it for? Don’t hesitate to join the discussion:
