CODEWITHSUNDEEP
ipadtouchjquery-toolsscrollable
user1370288
user1370288

Reputation: 919

jQuery tools scrollable touch trigger

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?

Upvotes: 4

Views: 1583

Answers (2)

Ben
Ben

Reputation: 21

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"]();
}

Upvotes: 2

Dar&#237;o Vasconcelos
Dar&#237;o Vasconcelos

Reputation: 78

You disable touch events on the "constructor" for the object, like this:

            root = $('#content').scrollable({
                keyboard:false,
                mousewheel: false,
                touch: false
            });

Upvotes: 4

Related Questions