Answered by:
finger swipe on ipad/iphone for datapager control

Question
-
User1090305680 posted
hi all,
i am currently develping a webpage for ipad/iphone user, but the problem now i face is adding the finger swipe feature for the datapager control, if the user swipe finger to the left, i want the pager to go previous and swipe right side for the next page.
after i research, i got the code for swiping using javascript, when swiping different direction, the background of the page will be changed, but i just dont know how to implement the code to my datapager control, please help me, thank you.
<script type="text/javascript">
// 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
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';
}
}
</script>Sunday, September 19, 2010 10:41 PM
Answers
-
User1943143334 posted
Hi,
Finger Swipe in Apple iPhone/iPad has to be code in the Native Code of Mac iOS. You may not get the finger swipe up to mark in the asp.net controls in the web browser.
Check the website for developing web applications for Apple iPhone/iPad
http://developer.apple.com/devcenter/safari/index.action
Hope it helps u...
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Wednesday, September 22, 2010 9:38 AM