Swipeup & Swipedown test

by Dragan Gaić

HTML

<script src="https://raw.githubusercontent.com/blackdynamo/jquerymobile-swipeupdown/master/lib/jquerymobile-swipeupdown.js"></script>
<!DOCTYPE html>
<html>
    
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
        <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    </head>
    
    <body>
        <div data-role="page" id="index" data-theme="a">
            <div data-role="header">
                 <h3>
                    First Page
                </h3>

            </div>
            <div data-role="content" class="content">
                swips this div up and down
            </div>
        </div>
    </body>

</html>

CSS

.ui-content {
    padding: 0 !important;
    margin: 0 !important;
    position : absolute !important;
    top : 42px !important; 
    right : 0;
    bottom : 0 !important; 
    left : 0 !important; 
}

JavaScript

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