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

Inherent

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.

Aneto

I tried to modify the code but without luck... I set the deltaY = 0 and ` vertical && deltaY > 0 ||` but didn't work... but ur solution work :) can u tell me what || and ? Mean? – Inherent

The ? is used to express an inline if statement, its structure is boolean-expr ? then-expr : else-expr;. The || is just the logical or operator that's being used in the boolean-expr of the inline if statement. For more information on the ? operator check this SO question: #10270851 – Aneto

Had a slight bug where it e.preventDefault(); prevented the scrolling down the page when swiped... fixed version is here jsfiddle.net/shavindra/nvyU8/4 – Inherent

This worked beautifully after making one change. The e.preventDefault should be part of the if statement, otherwise the vertical scroll doesn't scroll the page. – Armipotent

Answer 2

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

Addie