Being a PC user for as long as I can remember it pains me to say this; if there’s one thing Apple does well it’s the User Interface (UI). When the iPhone was first released it really shook up the mobile market, with a touch screen interface and a tonne of applications to expand its functionality, it forced the other mobile phone manufacturers to play catch-up.
Something that comes naturally when you start to use the iPhone is the swipe between screens, allowing you to quickly view all your different applications. Just out of interest I decided to recreate this effect for the web using jQuery. Is it of any use to anyone? I doubt it, as it isn’t very natural to swipe using the mouse (unless you’re used to using mouse gestures). But I enjoyed putting it together.
If you swipe left/right toward a panel that doesn’t exist, it simply bounces back. The same goes for small mouse movements; the full animation will only occur when you swipe over a third of the width of a panel. View a demo.
Update: As requested by Matias I’ve added an indicator to show the total number of panels and the currently selected panel.
Update 2: I’ve uploaded a ZIP file here containing all the code used.
Update 3: For those of you who hate how the text is sometimes selected on drag (I do), you may want to take a look at this thread from Stackoverflow for a potential solution.
Matias on March 19 10 / 77 Permalink
Very cool! is it possible to add some bullets in the down side so you can know how much items yo have?
Great Work!
Matt on March 19 10 / 77 Permalink
Hey Matias,
Great idea, I forgot about the little dots at the bottom of the UI, I’ll add those a.s.a.p. for you.
Adil on July 19 10 / 199 Permalink
nice plugin, but it’s possible to put a zip file or check your css file beacause the server is down
thanks in advance :)
Matt on July 19 10 / 199 Permalink
Hi Adil,
Thanks for the comment, it’snot really a plug-in but it should be easy to see how it works. It was more of an experiment.
I’ve updated the post with a zip file as requested.
Iain van der Wiel on December 21 10 / 354 Permalink
Hey Matt,
Nice plugin! I came across this and thought this was exactly what I needed for an iPad web app we’re making for a client, but i saw i acted on mouse events and not on touch events. I tried binding the touch events to the plugin, but it didn’t work, the divs don’t slide when dragging them on the ipad. Would you care to help me out a bit?
I’m using these events: touchstart, touchmove and touchend. Thx in advance!
Matt on December 22 10 / 355 Permalink
Hi Iain,
That could be quite difficult as I don’t actually own an iPad to test the plug-in on. But looking about it could be that there are issues with touch events when using jQuery. It may be worth taking a look at this plug-in that may solve these issues Touchable. Maybe test out by adding ‘ontouchstart’ and ‘ontouchend’ inline on the divs at first to get the events firing.
Sorry I can’t be much more help. If I ever have access to an iPad I’ll update it accordingly.
Mr Anderson on May 26 11 / 145 Permalink
Hi,
The same as Iain van der Wiel. I have come across this page looking for this feature for my iPad & iPhone webapps. Have you found out anything new about the touch events?
If you have any info please post it as i really can’t find anything else like this on the net!
Matt on May 26 11 / 145 Permalink
Hello,
I’ll publish this comment as others may have a bit more information on the touch events. I haven’t looked into it much myself as I don’t own an iPad and no longer own an iPhone. You may find a little information on the API here.
Hope that helps!
chovy on June 3 11 / 153 Permalink
It doesn’t appear to work in IOS Simulator for iPhone.
Matt on June 3 11 / 153 Permalink
That doesn’t surprise me. I built it to recreate the drag effect for desktop browsers purely for fun. Not sure how well it will work in a production environment.
Yousef on October 30 11 / 302 Permalink
There is no events :mouseup,mousedown with IOS. So how can that works?
Matt on October 31 11 / 303 Permalink
Hi Yousef,
The experiment wasn’t intended to be used on IOS, it’s purely to try a recreate the IOS effect of dragging in the browser as a bit of fun.