Add swipeup and swipedown to jQuery Mobile

Written by on December 24, 2014

Add swipeup and swipedown to jQuery Mobile

For some reason unknown to me, even after releasing 4 major framework versions, jQuery Mobile developers never implemented swipeup and swipedown events. As always, jQuery community solved this problem, particularly user named blackdynamo.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

Plugin

Plugin can be found here: https://github.com/blackdynamo/jquerymobile-swipeupdown

If you can’t access it directly just use the code found below:

// jQueryMobile-SwipeUpDown
// ----------------------------------
//
// Copyright (c)2012 Donnovan Lewis
// Distributed under MIT license
//
// https://github.com/blackdynamo/jquerymobile-swipeupdown

(function () {
// initializes touch and scroll events
    var supportTouch = $.support.touch,
        scrollEvent = "touchmove scroll",
        touchStartEvent = supportTouch ? "touchstart" : "mousedown",
        touchStopEvent = supportTouch ? "touchend" : "mouseup",
        touchMoveEvent = supportTouch ? "touchmove" : "mousemove";

    // handles swipe up and swipe down
    $.event.special.swipeupdown = {
        setup: function () {
            var thisObject = this;
            var $this = $(thisObject);

            $this.bind(touchStartEvent, function (event) {
                var data = event.originalEvent.touches ?
                        event.originalEvent.touches[ 0 ] :
                        event,
                    start = {
                        time: (new Date).getTime(),
                        coords: [ data.pageX, data.pageY ],
                        origin: $(event.target)
                    },
                    stop;

                function moveHandler(event) {
                    if (!start) {
                        return;
                    }

                    var data = event.originalEvent.touches ?
                        event.originalEvent.touches[ 0 ] :
                        event;
                    stop = {
                        time: (new Date).getTime(),
                        coords: [ data.pageX, data.pageY ]
                    };

                    // prevent scrolling
                    if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
                        event.preventDefault();
                    }
                }

                $this
                    .bind(touchMoveEvent, moveHandler)
                    .one(touchStopEvent, function (event) {
                        $this.unbind(touchMoveEvent, moveHandler);
                        if (start && stop) {
                            if (stop.time - start.time < 1000 &&
                                Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
                                Math.abs(start.coords[0] - stop.coords[0]) < 75) {
                                start.origin
                                    .trigger("swipeupdown")
                                    .trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
                            }
                        }
                        start = stop = undefined;
                    });
            });
        }
    };

//Adds the events to the jQuery events special collection
    $.each({
        swipedown: "swipeupdown",
        swipeup: "swipeupdown"
    }, function (event, sourceEvent) {
        $.event.special[event] = {
            setup: function () {
                $(this).bind(sourceEvent, $.noop);
            }
        };
    });

})();

Example:

$(document).on('swipedown', '.content', function () {
    alert("swipedown..");
});
$(document).on('swipeup', '.content', function () {
    alert("swipeup..");
});

Working jsFiddle example can be found here: http://jsfiddle.net/Gajotres/8Yxnq/

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



Categories

5 thoughts on “Add swipeup and swipedown to jQuery Mobile”

  1. Dragan, thank you much for this script. However, i’m having a bit issue with it. I put this inside my mobile web and it made the whole page not scroll-able with 1 finger, I have to use 2 fingers to scroll the rest of the page. Can you give me a pin point where to enable 1 finger to scroll ?

    Thanks in advance!

    • Hi Kevin,

      unfortunately you can’t have both. Swipe like scroll requires one finger slide move and application is not smart enough to decide which one to use in an appropriate situation. My advice would be to limit swipe only to part of you UI and leave the rest for scrolling.

      • Dragic,

        Thanks for the quick reply. When I include the script only into , screen scroll still working just fine. But as soon as I included :
        $(document).on(‘swipedown’, ‘#swipeDrawer’, function () {
        $(‘.slideSummary’).slideDown(“slow”);
        });
        $(document).on(‘swipeup’, ‘#swipeDrawer’, function () {
        $(‘.slideSummary’).slideUp(“slow”);
        });
        I have to use 2 fingers to scroll page. #swipeDrawer is one of the DIV inside the page. Am i doing something wrong here ?

        thanks!

        • Advice, create an account at stackoverflow and post your question there (give it a jQuery Mobile tag), then send me a mail (or post here) and we will solve this problem together.

Leave a Reply