JQuery Mobile for Absolute Beginners – Part 4

Home » Tutorials » JavaScript » JQuery Mobile for Absolute Beginners – Part 4

Tutorials / JavaScript / Tutorials / Mobile Content
Monday, 17th Sep, 2012

JQuery Mobile for Absolute Beginners – Part 4

The Full Series

Hi guys! Welcome to the part 4 of jQuery Mobile for Absolute Beginners. In this lesson,you will learn to create a simple interactive page using Touch Event provided by jQuery Mobile framework. If you haven’t already, be sure to read the previous articles of this series first!

Touch Event in jQuery Mobile

jQuery Mobile offers several touch events that allows user to interact with jQuery page that look and feel like native mobile application. Following is the list of touch events that we could use for our jQuery Mobile project.

tap: Tap event triggers after a quick, complete touch event.
taphold: Tap Hold event triggers after a held complete touch event. By default, user must hold their tap for 750 milliseconds before the taphold event is fired on the target element.
swipe: Swipe event triggers when a horizontal drag of 30px or more (and less than 75px vertically) occurs within 1 second duration.
swipeleft: Swipe Left event triggers when users swipe from right to left on the target element.
swiperight: Swipe Right event triggers when users swipe from left to right on the target element.

Creating An Interactive Page Using Touch Events

Ok, let’s create an interactive page using the touch events that we just learned. The idea is to have a face illustration and reveal more facial expression when swipe & tap hold on it. You can check out the demo before we proceed.

Note: Best viewed in iOS Safari & Android browser.

View Demo

HTML Structure

<!DOCTYPE html>
<html>
	<head>
	<title>jQuery Mobile Touch Event Demo From onlyWebPro.com</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
	<div data-role="header">
		<h1>Interactive Facial Expression</h1>
	</div><!-- /header -->

	<div data-role="content">
    	<div class="swipe_area">
            <div id="pic" class="front"></div><!-- END pic -->
            <p><em>Instruction:</em><br />
            <strong>Swipe Left / Right</strong> to change the facial expression.<br />
            <strong>Tap &amp; Hold</strong> for a second to change back its original facial expression.</p>
        </div><!-- END swipe_area -->
	</div><!-- /content -->

    <div data-role="footer">
		<p>&copy; Copyright 2012 by onlyWebPro.com</p>
	</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>

We will have a basic structure of jQuery Mobile Page where consists of header bar, content region and footer bar. Within the content region, we will have a division called “swipe_area” which contains a picture division and instruction. The picture divison contains class that gives us ability to control the facial expression using jQuery and CSS later.

CSS Style

<style>
	#pic {background:url(swipe_pic.png) no-repeat -19px 0; width: 100px; height: 100px; margin: 0 auto;}
	#pic.front { background-position: -19px 0;}
	#pic.left { background-position: -127px 0;}
	#pic.right { background-position: -236px 0;}
	p { text-align: center; };
</style>

We have given width and height for the picture division, and assign a CSS sprites (The facial expression graphic) as background image to it.

We have re-position the background image to just show the part of the image we need when user swipe left /swipe right / tap hold on the page.

jQuery Code

Here is the section where we make our page look lively.

<script>
	$(document).ready(function() {
		$('.swipe_area').bind('swipeleft', function(event) {
				$('#pic').removeClass().addClass('left');			
		});
		
		$('.swipe_area').bind('swiperight', function(event) {
				$('#pic').removeClass().addClass('right');			
		});
		
		$('.swipe_area').bind('taphold', function(event) {
				$('#pic').removeClass().addClass('front');			
		});
	});
</script>

We have bind the swipeleft, swiperight and taphold events to the swipe_area division. If user is swipe the page from right to left, a new class “left” will be added to the picture holder; Conversely, if user is swipe the page from left to right, a new class “right” will be added to the picture holder.

To change back original facial expression, user is requires to tap and hold for a second for triggering taphold event.

That’s it! Save your document and view it in your smart devices!

Conclusion

You have just learned about the usage of Touch Events of jQuery Mobile. You know how to make your jQuery Mobile page lively by implementing touch events such as swipe left, swipe right and tap hold.

Stay tuned for more.

ahmad ali

thanks i am looking forward for more great tuts .. thanks
- http://www.onlywebpro.com onlyWebPro
  
  You’re welcome!
Ovidiu

How can I ignore the inital tap event that is triggerent when a user swipes? I have a click even on an element, so when I swipe on it the click even is fired at the same time (or should I say it’s the first one that gets fired).
- http://www.onlywebpro.com onlyWebPro
  
  Hi Ovidiu,
  
  Thanks fr your comment. Regarding your question, may be you can write an if else condition, to ignore the initial tap event being triggered. I’m not sure, whether it works or not, but you can give a try on that.