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, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

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.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • Kevin

    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.

      • Kevin

        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.