Add swipe left/right to web page, but use default swipe up/down

Question

I'm using padilicious to detect swiping gestures for web pages that will be viewed on iOS and desktops. It works great to swipe left/right for previous and next pages of my site. However, it seems to override the default behavior in iPhone/iPad when swiping up/down. I'd like an up/down swipe to scroll the page, which it does when I don't have padilicious running. Just having the code ignore up/down swipes doesn't seem to work.

The section of padilicious code that I've been

function processingRoutine() {
    var swipedElement = document.getElementById(triggerElementID);
    if ( swipeDirection == 'left' ) {
        document.location = document.getElementById('nextPage').href;
    } else if ( swipeDirection == 'right' ) {
        document.location = document.getElementById('prevPage').href;
    } else if ( swipeDirection == 'up' ) {
        return;
    } else if ( swipeDirection == 'down' ) {
        return;
    }


}

Solution 1

Remove event.preventDefault(); from all functions. In the function processingRoutine() {} add event.preventDefault(); for what you want.

function processingRoutine() {
    var swipedElement = document.getElementById(triggerElementID);
    if ( swipeDirection == 'left' ) {
        // REPLACE WITH YOUR ROUTINES
        //swipedElement.style.backgroundColor = 'orange';
        event.preventDefault();
    } else if ( swipeDirection == 'right' ) {
        // REPLACE WITH YOUR ROUTINES
        //swipedElement.style.backgroundColor = 'green';
        event.preventDefault();
    } else if ( swipeDirection == 'up' ) {
        // REPLACE WITH YOUR ROUTINES
        //swipedElement.style.backgroundColor = 'maroon';
    } else if ( swipeDirection == 'down' ) {
        // REPLACE WITH YOUR ROUTINES
        //swipedElement.style.backgroundColor = 'purple';
    }
}

Solution 2

there's a jquery library, which does the job (by not providing up/down methods): http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture

Solution 3

I'm not familiar with padilicious, but check and see if the ontouchmove="BlockMove(event);" is set anywhere, that prevents the page from scrolling like you describe, I'm not sure how you would get it to keep the vertical scrolling but swipe horizontally.

Edit: I've since found a really helpful overview for doing "native" feel iOS web apps, it might not be exactly what you're looking for, but could provide you with another avenue of approach to your problem. Check it out: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Solution 4

Padilicious seems to be preventing default in all cases. See the call to event.preventDefault() in all cases.

function touchStart(event,passedName) {
  // disable the standard ability to select the touched object
  event.preventDefault();

You will have to change start, stop, ... handlers to not call preventDefault() in up and down cases.

View more solutions