Jquery Tools Touch horizontal only disable vertica

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

I was struggling with the same issue for a while until I found the following fix-

Initialization-

var $scroller1 = $('#outer-container1').kinetic({'y':false});

This prevents vertical scroll on the container but does not hand the vertical scroll to the browser scroller.

Then go to the jquery kinetic source code and comment out the e.preventDefault() for all mouse and scroll action events.

This hack worked for me. https://github.com/davetayls/jquery.kinetic/issues/33

Answer 2

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.