Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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;
    }


}
like image 949
Vector Instructional Design Avatar asked Mar 14 '11 20:03

Vector Instructional Design


People also ask

How do you get a swipe event?

The swipe event is triggered when the user press down and swipes over an element horizontally by more than 30px (and less than 75px vertically). Tip: You can swipe in both right and left direction.

How do you detect swipe direction react native?

To detect swipe left in React Native, we can use the react-native-swipe-gestures package. To install it, we run npm i react-native-swipe-gestures . to add the GestureRecognizer component which wraps around any component we want to detect swipes for. Then we set the onSwipe prop to the onSwipe function.


1 Answers

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';
    }
}
like image 52
user25992 Avatar answered Oct 06 '22 00:10

user25992