jQuery tools scrollable touch trigger - ipad

Question

I am working with a touch based slideshow for the iPad using Jquery tools scrollable
http://jquerytools.org/demos/scrollable/vertical.html
It works great and does everything I want, but if my finger is ANYWHERE on the slider and moves every so slightly it triggers the slider to change sliders, is there a way I can change how much you need to drag your finger to change slide, or set specific areas where you can swipe to change slide?

Answer 1

You disable touch events on the "constructor" for the object, like this:
root = $('#content').scrollable({
keyboard:false,
mousewheel: false,
touch: false
});

Answer 2

I needed to do something similar where Scrollable was way too sensitive on an iPad. Here's what I changed to make it less sensitive for horizontal swiping:
// touch event
if (conf.touch) {
var touch = {};
itemWrap[0].ontouchstart = function(e) {
var t = e.touches[0];
touch.x = t.clientX;
touch.y = t.clientY;
};
itemWrap[0].ontouchmove = function(e) {
// only deal with one finger
if (e.touches.length == 1 && !itemWrap.is(":animated")) {
var t = e.touches[0],
deltaX = touch.x - t.clientX,
deltaY = touch.y - t.clientY;
self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();
e.preventDefault();
}
};
}
Becomes
// touch event
if (conf.touch) {
var touch = {};
itemWrap[0].ontouchstart = function(e) {
var t = e.touches[0];
touch.x = t.clientX;
touch.y = t.clientY;
};
itemWrap[0].ontouchmove = function(e) {
// only deal with one finger
if (e.touches.length == 1 && !itemWrap.is(":animated")) {
var t = e.touches[0],
deltaX = touch.x - t.clientX,
deltaY = touch.y - t.clientY;
if(deltaX > 200 || deltaX < -200) { // new line
self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();
} // new line
e.preventDefault();
}
};
}
Adjust the 200 to be however far you want folks to have to drag their finger before it changes to the next slide. Likewise, if you want to control a vertical scroller change deltaX in the new code to deltaY:
if(deltaY > 200 || deltaY < -200) { // new line
self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();
} // new line
If you're working with the minimized version of jQuery Tools you can use this code:
// horizontal change
if(h > 200 || h < -200) {
b[j && d > 0 || !j && h > 0 ? "next" : "prev"]();
}
// vertical change
if(d > 200 || d < -200) {
b[j && d > 0 || !j && h > 0 ? "next" : "prev"]();
}