Add swipe left / right to the webpage, but use the default swipe up / down

Question

I use padilicious to detect gestures for web pages that will be viewed on iOS and desktop computers. It is great for scrolling left / right for the previous and next pages of my site. However, it seems to override the default behavior in the iPhone / iPad when scrolling up / down. I would like the page to scroll up and down, which happens when I don't have additive work. Just the lack of up / down ignore code doesn't work.

The section of additive code that I was

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

Answer 1

Remove event.preventDefault(); of all functions. In the processingRoutine() {} function, add event.preventDefault(); for what you want.

 function processingRoutine() { var swipedElement = document.getElementById(triggerElementID); if ( swipeDirection == 'left' ) { // REPLACE WITH YOUR ROUTINES //swipedElement.style.backgroundColor = 'orange'; event.preventDefault(); } else if ( swipeDirection == 'right' ) { // REPLACE WITH YOUR ROUTINES //swipedElement.style.backgroundColor = 'green'; event.preventDefault(); } else if ( swipeDirection == 'up' ) { // REPLACE WITH YOUR ROUTINES //swipedElement.style.backgroundColor = 'maroon'; } else if ( swipeDirection == 'down' ) { // REPLACE WITH YOUR ROUTINES //swipedElement.style.backgroundColor = 'purple'; } } 

Answer 2

there is a jquery library that does the job (without using the up / down methods): http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture

Answer 3

I am not familiar with padilicious, but check and see if ontouchmove="BlockMove(event);" anywhere that prevents the page from scrolling as you describe, I'm not sure how you could keep the vertical scroll, but swipe it horizontally.

Change Since then I have found a very useful overview for creating native iOS web applications, this may not be exactly what you are looking for, but it may provide you with another prospect of approach to your problem. Check this out: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Answer 4

The malicious environment appears to prevent default in all cases. In all cases, see event.preventDefault ().

 function touchStart(event,passedName) { // disable the standard ability to select the touched object event.preventDefault(); 

You will need to change the start, end, ... handlers so that you don't call preventDefault () when you do this.

Answer 5

I changed the script, this work:

  // TOUCH-EVENTS SINGLE-FINGER SWIPE-SENSING JAVASCRIPT // Courtesy of PADILICIOUS.COM and MACOSXAUTOMATION.COM // this script can be used with one or more page elements to perform actions based on them being swiped with a single finger var triggerElementID = null; // this variable is used to identity the triggering element var fingerCount = 0; var startX = 0; var startY = 0; var curX = 0; var curY = 0; var deltaX = 0; var deltaY = 0; var horzDiff = 0; var vertDiff = 0; var minLength = 72; // the shortest distance the user may swipe var swipeLength = 0; var swipeAngle = null; var swipeDirection = null; // The 4 Touch Event Handlers // NOTE: the touchStart handler should also receive the ID of the triggering element // make sure its ID is passed in the event call placed in the element declaration, like: // <div id="picture-frame" ontouchstart="touchStart(event,'picture-frame');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);"> function touchStart(event,passedName) { // disable the standard ability to select the touched object //event.preventDefault(); // get the total number of fingers touching the screen fingerCount = event.touches.length; // since we're looking for a swipe (single finger) and not a gesture (multiple fingers), // check that only one finger was used if ( fingerCount == 1 ) { // get the coordinates of the touch startX = event.touches[0].pageX; startY = event.touches[0].pageY; // store the triggering element ID triggerElementID = passedName; } else { // more than one finger touched so cancel touchCancel(event); } } function touchMove(event) { //event.preventDefault(); if ( event.touches.length == 1 ) { curX = event.touches[0].pageX; curY = event.touches[0].pageY; } else { touchCancel(event); } } function touchEnd(event) { //event.preventDefault(); // check to see if more than one finger was used and that there is an ending coordinate if ( fingerCount == 1 && curX != 0 ) { // use the Distance Formula to determine the length of the swipe swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2))); // if the user swiped more than the minimum length, perform the appropriate action if ( swipeLength >= minLength ) { caluculateAngle(); determineSwipeDirection(); processingRoutine(); touchCancel(event); // reset the variables } else { touchCancel(event); } } else { touchCancel(event); } } function touchCancel(event) { // reset the variables back to default values fingerCount = 0; startX = 0; startY = 0; curX = 0; curY = 0; deltaX = 0; deltaY = 0; horzDiff = 0; vertDiff = 0; swipeLength = 0; swipeAngle = null; swipeDirection = null; triggerElementID = null; } function caluculateAngle() { var X = startX-curX; var Y = curY-startY; var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels var r = Math.atan2(Y,X); //angle in radians (Cartesian system) swipeAngle = Math.round(r*180/Math.PI); //angle in degrees if ( swipeAngle < 0 ) { swipeAngle = 360 - Math.abs(swipeAngle); } } function determineSwipeDirection() { if ( (swipeAngle <= 45) && (swipeAngle >= 0) ) { swipeDirection = 'left'; } else if ( (swipeAngle <= 360) && (swipeAngle >= 315) ) { swipeDirection = 'left'; } else if ( (swipeAngle >= 135) && (swipeAngle <= 225) ) { swipeDirection = 'right'; } /* else if ( (swipeAngle > 45) && (swipeAngle < 135) ) { swipeDirection = 'down'; } else { swipeDirection = 'up'; }*/ } function processingRoutine() { var swipedElement = document.getElementById(triggerElementID); if ( swipeDirection == 'left' ) { // REPLACE WITH YOUR ROUTINES event.preventDefault(); swipedElement.style.backgroundColor = 'orange'; } else if ( swipeDirection == 'right' ) { // REPLACE WITH YOUR ROUTINES event.preventDefault(); 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'; }*/ }