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:

<head>
	<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">
		// TOUCH-EVENTS SINGLE-FINGER SWIPE-SENSING JAVASCRIPT
		// Courtesy of PADILICIOUS.COM and MACOSXAUTOMATION.COM
	
		var fingerCount = 0;
		var startX = 0;
		
		-- ETC. --
		
	</script>
</head>

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 Start Event is triggered when the user touches the iPad screen. It is used to determine how many fingers have touched the screen, and the location (screen coordinates) of the touches in X (horizontal) and Y (vertical) pixels from the top and left of the iPad screen.
The Move Event responds as the finger is dragged across the screen and returns a constant flow of data about where on the screen the finger currently is.
The End Event is triggered when the user lifts their finger from the screen.
The Cancel Event is used to stop an event in the case of a miscue, error, or to reset the script to be ready for the next event.

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:

Add an ID to the opening page element tag if it already doesn't have one. For example: <div> becomes <div id=swipeBox>. Use whatever ID name works best for you.
Add a Start Event handler call to the opening page element tag: <div id=swipeBox ontouchstart=touchStart(event,'swipeBox');>. Note that the ID of the page element is also duplicated within a pair of single-quotes within the inserted event handler.
Add handler calls in the page element declaration for the other three events: <div id="swipeBox" ontouchstart="touchStart(event,'swipeBox');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">. Note that the other handler calls do not require the inclusion of the element ID.

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' ) {
		// REPLACE WITH YOUR ROUTINES
		swipedElement.style.backgroundColor = 'orange';
	} else if ( swipeDirection == 'right' ) {
		// REPLACE WITH YOUR ROUTINES
		swipedElement.style.backgroundColor = 'green';
	} else if ( swipeDirection == 'up' ) {
		// REPLACE WITH YOUR ROUTINES
		swipedElement.style.backgroundColor = 'maroon';
	} else if ( swipeDirection == 'down' ) {
		// REPLACE WITH YOUR ROUTINES
		swipedElement.style.backgroundColor = 'purple';
	}
}

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!

SWIPE SENSOR

A page returning information about the current swipe. Demonstrates how to track and respond to the touch events of a single-finger swipe.

Each of the main events (start, move, end) displays its own color and event information during the event. After the finger release, a summary screen displays the swipe data, including swipe length, angle, and direction.

iPad users: TAP HERE

MULTIPLE PAGE ELEMENTS

The swipe-sensing JavaScript, provided on this page, can be used to swipe-enable one or more page elements. The following is an example of how two page elements can use this script.

iPad Users: TAP HERE

IMAGE SLIDESHOW

An example demonstrating how to make a swipe-enabled slideshow of images.

iPad Users: TAP HERE

SWIPE SENSING JAVASCRIPT

This swipe-sensing JavaScript script, can be used to swipe-enable one or more page elements. Click the link below to view the script source.

CLICK HERE

DISCLAIMER

Mention of third-party websites and products is for informational purposes only and constitutes neither an endorsement nor a recommendation. PADILICIOUS.COM assumes no responsibility with regard to the selection, performance or use of information or products found at third-party websites. PADILICIOUS.COM provides this only as a convenience to our users. PADILICIOUS.COM has not tested the information found on these sites and makes no representations regarding its accuracy or reliability. There are risks inherent in the use of any information or products found on the Internet, and PADILICIOUS.COM assumes no responsibility in this regard. Please understand that a third-party site is independent from PADILICIOUS.COM and that PADILICIOUS.COM has no control over the content on that website. Please contact the vendor for additional information.