Creating and delivering content for the iPad

Add Finger-Swipe Support to Webpages

One of the more interesting and fun aspects of iPad usage is the ability to effect change in a webpage by swiping a finger across the screen of the iPad. For example, swiping to the left to navigate to the next page in a series of pages, or swiping to display the next image in a series of images. For iPad users, these actions are intuitive and natural.

However, for those who compose webpages, adding touch detection to a page can be a challenging and difficult process. No more. The information presented on these pages will make it easy to add touch sensing to your pages, requiring only a minimum of JavaScript coding on your part.

Add the JavaScript Script

The first step in implementing swipe support for specific page elements is to copy and add this script to the HEAD section of the webpage. Copy the entire script, including opening and closing <script> tags, and paste it into the webpage code after the title tag, but within the head section:

	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<!-- iPad Setup -->
	<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0,
	width=device-width, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<title>My Swipable Webpage</title>

	<script type="text/javascript">
		var fingerCount = 0;
		var startX = 0;
		-- ETC. --

Tag the Page ELement

Once you've added the script to the head section, you need to add some parameters to the tag declaration of the page element you want to respond to swipe events, for example, a <div> page element.

For a finger-swipe to be interpreted correctly by the iPad, four events have to be tracked and responded to:

The JavaScript code to handle these events is already done for you in the provided routine. You don't need to write any more code for sensing events. What is required, however, is for you to identify the page element you want to respond to swiping, as being able to trigger these events.

Tagging the page element to support events is easy, simply follow these steps:

That's all you need to do for enabling for a finger-swipe on the page element to trigger actions. The next step is to add the code for responding the the swipe.

Add Your Action Code

The reamining task is to add your JavaScript code into the processing function of the JavaScript.

The two global variables used by this function: triggerElementID and swipeDirection will already have their values set when the function is called. You use those variables to target the triggering page element (if that is what you want to do) and to determine the appropriate action to take based on the direction of the finger-swipe.

The example below uses those variables to identify and change the color of the swiped element based upon the direction of the finger-swipe. Replace this code with your own routines:

function processingRoutine() {
	var swipedElement = document.getElementById(triggerElementID);
	if ( swipeDirection == 'left' ) {
	} else if ( swipeDirection == 'right' ) {
	} else if ( swipeDirection == 'up' ) {
	} else if ( swipeDirection == 'down' ) {

Try It Out!

Try the default script by tapping here on your iPad, then try the other examples linked from the right column of this page. Enjoy!