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!