zeptojs swipe horitzontal - Part 1
Been researching on webkit touch controls recently and came across a feature that I wanted to replicate from Google+ iOS app (previous gen). I wanted a carded view but the user can swipe (flick) left to right to get a different card view. Quite similar to flickable.js. My only problem with flickable.js was that I wanted to scroll vertically on each card, and when the user swipes left or right, then the card would swipe.
Part 1 (still figuring out the rest) is to detect a left/right swipe. I’m using zepto.js just because of the small footprint. Code is adapted from zepto.js but slimmed down only for horizontal detection. Using the 80/20 rule, if the travelled distance on the x-axis is 80% more than the y-axis, this would be considered as a swipe on the x-axis.
Here’s the quick code:
$(document).ready(function(){
var touch = {}
$(document.body).bind('touchstart', function(e){
touch.x1 = e.touches[0].pageX
touch.y1 = e.touches[0].pageY
}).bind('touchmove', function(e){
touch.x2 = e.touches[0].pageX
touch.y2 = e.touches[0].pageY
}).bind('touchend', function(e){
var xdist = Math.abs(touch.x1 - touch.x2)
var ydist = Math.abs(touch.y1 - touch.y2)
if ((xdist / ydist) >= 4) {
if (touch.x1 < touch.x2) {
alert("swipe right")
} else {
alert("swipe left")
}
}
touch = {}
}).bind('touchcancel', function(){
touch = {}
})
});
Next I’ll post up what I’ll do after the swipe event.
