As I’m only using Mac computers at home, I’m used to the amazing and timesaving multi-touch gestures on my Macbook and the Magic Mouse. Wouldn’t it be nice to use this type of user interaction as a web developer to make your web app more useful?
Today I’ve made an interesting discovery. Safari uses the three-finger swipe gesture for going back and forth in the browser history. That’s the only gesture in the browser, that affects the content of the displayed site directly. With the use of the HTML5 History API it is possible to manipulate the browser history although you aren’t actually leaving the visited site. So let’s say You’ve a gallery page with 5 different photos and You want to swipe through them like it’s possible in iPhoto or on the iPhone. If you’re on a Mac and using Safari, you can check it out here.
The best way to start is to open a new pop-up window, so it doesn’t contain any previous page in the browsing history. Then you have to create a history entry for all items in your gallery and jump back to the very first one right after the page is loaded. If you’re now swiping with three fingers, you are going one page forward and it’s easy to catch this change with a simple event handler. The rest is just some fancy javascript trickery.
