Jquery Tools Touch horizontal only disable vertical touch

Question

I have jquery tools scroller... I like it to have touch option implemented for swipeLeft swipeRight only.

When I use touch: true, it does rotates when swipeUp/Down as well..

I followed instructions here:

jQuery Tools Scrollable on touch disable vertical scroll

and here:

http://awardwinningfjords.com/2010/09/22/handling-touch-events-in-jquery-tools-scrollable.html

but none seem to work.. any ideas? my Fiddle/demo is below for reference

fiddle: http://jsfiddle.net/mmp2m/7/

demo: http://jsfiddle.net/mmp2m/7/show

Thanks

Answer 1

If the only control you are using is Scrollable then you could edit the source code for it from here to fix that behaviour or adapt it as you see fit.

I modified the fiddle you had posted to include the code for the Scrollable control in the JavaScript code section.

The lines added in the code for the control are the ones with the comment // added at the end in the following snippet:

    // 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,
                     absX = Math.abs(deltaX),                              // added
                     absY = Math.abs(deltaY);                              // added

                // Only consider the event when the delta in the
                // desired axis is greater than the one in the other.
                if(vertical && absY > absX || !vertical && absX > absY)    // added
                    self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();

                e.preventDefault();
            }
        };
    }

I've tried this in Android with the native and Opera browsers and seems to work as expected.