iPad Swipes

Usage example

Well, since I don't have to many ideas to swipe at the moment, for the best example I would like to direct you to my projects page. If you are viewing this page on a desktop, you will see red arrows in the header which will allow you to go from this project to the next and previous ones. If you are viewing it on a touchscreen device you will get a notification.

Implementation

Here, I'm using Matt Bryson's TouchSwipe - you can get the exact file by clicking here. And of course you need to initialize it somehow. I went ahead and created initialization on the body, and added two functions - swipe left with two fingers and swipe right with two fingers. Note also that I used 0 threshhold, which you can get away when using two fingers, but may want to increase it for a single finger, otherwise each time someone touches it they will activate these functions. Also note that you need jQuery for this example - it's usually a given with my code... :)

Icon Usage

I personally think it's very important to show these notifications with icons, otherwise people will never know that this is an option, but I suppose it differs one project to another. Common icons used would include: one finger swipes and two fingers swipes left and right.

$("body").swipe({
    
    //swipe left
    swipeLeft:function(event, direction, distance, duration, fingerCount) {
        if(fingerCount == 2){
            $('#swipeCoverRight').animate({
                right: '0'
            }, 1000, function() {
                location.href = $('#swipeCoverRight').attr('title');
            });
        }
    },

    //swipe right
    swipeRight:function(event, direction, distance, duration, fingerCount) {
        if(fingerCount == 2){
            $('#swipeCoverLeft').animate({
                left: '0'
            }, 1000, function() {
                location.href = $('#swipeCoverLeft').attr('title');
            });
        }
    },

    //options
    threshold:0,
    excludedElements:$.fn.swipe.defaults.excludedElements,
    fingers:'all'
});