5

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

Community
  • 1
  • 1
MonteCristo
  • 1,471
  • 2
  • 20
  • 41

2 Answers2

5

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.

juan.facorro
  • 9,791
  • 2
  • 33
  • 41
  • 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? – MonteCristo Aug 13 '12 at 23:35
  • 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: http://stackoverflow.com/questions/10270351/how-to-write-a-inline-if-statement-in-javascript – juan.facorro Aug 14 '12 at 02:32
  • 1
    Had a slight bug where it e.preventDefault(); prevented the scrolling down the page when swiped... fixed version is here http://jsfiddle.net/shavindra/nvyU8/4/ – MonteCristo Aug 14 '12 at 12:46
  • 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. – kgiff Sep 20 '12 at 14:56
0

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

Mad Scientist
  • 340
  • 4
  • 14