I haven’t done jQuery Mobile article for quite a while. A time has come to talk about a new topic, this time we’ll discuss touch gestures.
 
On its own jQuery Mobile supports only two gestures, swipe left and swipe right. In one of my previous articles, I showed you how to implement swipe up and swipe down but I never talked about other touch gestures. This article will try to fix this.
 
jQuery Mobile on its own can’t support other touch gestures, that’s why we need to include another library called Hammer.js. It is an open-source library that can recognize gestures made by touch, mouse and pointerEvents. It doesn’t have any dependencies, and it’s small, only 3.96 kB minified + gzipped!
 
 

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.


 

Table of Contents

Links

GitHub Documentation Hammer.js emulate multi-touch
 
 

Example

 
I wrote this example for mobile devices (smartphones and tablets) but you will be able to use it on your desktop browser.
 
Demo
 

Embedded working example

 
jQuery Mobile + Hammer.js example
 
Note: To test this example on desktop browsers hold a SHIFT key and drag your mouse pointer, you'll be able to resize blue rectangle.
 

Code

 

HTML:

<!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" />
        <link rel="stylesheet" href="style.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>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js"></script>
	<script src="http://example.gajotres.net/include/touchemulator/touch-emulator.js"></script>
        <script src="script.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">
                <div class="contents" id="content">	
					
                    <div class="wrap">
                        <div id="square">
                            <div>WIDTH = <span class="square-width"></span></div>
			    <div>HEIGHT =  <span class="square-height"></span></div>
			    <div id="textbox">Swipe Me!</div>
			</div>
                    </div>

                </div>
            </div>
            <div data-role="footer" data-position="fixed">
                 <h3>
                    Footer
                </h3>			
	    </div>
        </div>
    </body>

</html>
Continue Reading

  • djasedub

    hi I'm developing an application with phonegap framework [beginner]
    [Html 5 / css3 / jquery mobile / jquery / javascript] how I can display the content of the xml file in my application
    using Http Request from xml to ajax to display the contents of the xml file in the jquery mobile

    for exemple
    i want to display xml data on listview

    <cars>
    <car>
    <type> Subaru</type>
    <driver>X</driver>
    </car>
    <car>
    <type> BMW</type>
    <driver>Y</driver>
    </car>
    <car>
    <type> FORD</type>
    <driver>Z</driver>
    </car>
    </cars>

    i want to show those data on a listview on my page
    using <ul data-role="listview">
    <li></li>
    </ul>
    call them by ajax to display it
    with xmlhttp request

    thanks