0

I'm trying to find a method or a plugin that will replicate the effect in iOS App where you can slide from left or right and it will lock onto the next pane when lift your finger if you've slid enough in that direction.

How to have it know when you've scrolled enough and then set the new position to focus on? Is there a good jQuery plugin for this kind of thing? jQuery Mobile doesn't seem to have this sort of feature.

The layout that I have in mind is like 4-5 DIVS next to each other inside side a single DIV with maybe overscroll set to hidden. Then when you start to slide over to the next pane it can fire of an Event that changes the left/right CSS position with some Transition effect and then also update the tab to show that new new pane is selected.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Cake
  • 751
  • 1
  • 9
  • 19

1 Answers1

1

you should use touchstart/mousedown,touchmove/mousemove and touchend/mouseup events for this purpose to support both touch and desktop devices.

  • On touchstart use the JQueryEventType Object to store the initial X and Y coordinates and also set some parameter to denote valid swipe (lets say init=true)
  • On touchmove, first check whether its a valid swipe (if init==true), then again use the JQueryEventType Object to get the new X and Y position of the cursor/finger.

Now comes the tricky part: use these new X and Y position to calculate the displacement and direction. Use these value to either set offset of your DIV(s) or use CSS 3.0 translate(x,y).

For instance if delta X > 10 (some threshold value to filter mistakes) and delta Y ~ 0 then its movement to the right. I would translate all my DIVs to RIGHT by delta X.

I would suggest not to use any Animation 'cause it will not look as per your needs. Plus keep transition delay very short and probably no timing function. This will give some crisp reflexes on movement.

For the Problem of when to assume "Its Enough sliding", I guess you will have to take constant value of your choice or calculate it using screen width. If Delta X or delta Y is not less than a thresh hold value... bounce back. If it is greater than this value...bounce forward.

Sunny
  • 151
  • 4
  • This is a good answer. I also found a plugin called touchSwipe. Saves a little bit of the gritty work: http://labs.rampinteractive.co.uk/touchSwipe/demos/ – Cake Feb 13 '14 at 04:17