Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2386
  • Last Modified:

iPad - page flip effect

New to developing for iPad and to make matters worse -I don't have one!

Anyway, my client (who does) wants to be able to flip through the pages of his website on his ipad.

I've seen a couple of jQuery apps but am looking for some direction in, not just the page flip effect but with iPad and mobile device development in general.

Thanks in advance!
0
phillystyle123
Asked:
phillystyle123
  • 12
  • 10
  • 4
1 Solution
 
Michel PlungjanIT ExpertCommented:
I think this is what you want:

http://plugins.jquery.com/plugin-tags/ipad


0
 
phillystyle123Author Commented:
thanks -  can you give me some direction re: how to build this into my webpage?
0
 
Michel PlungjanIT ExpertCommented:
Please read the instructions. they are pretty clear I think
http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
phillystyle123Author Commented:
sorry to leave this question hanging - i'm going to be workng on this shortly
0
 
phillystyle123Author Commented:
OK - I'm starting to wrap my brain around this. The only thing I don't see is a solid example of how to use finger swipes to navigate between pages. I see routines for changing page colors, image galleries, but nothing for navigating through pages.

I found this which is straightforward and easy to follow but, again, i can make the page turn colors with a 1 finger swipe, but I don't know what the routines for navigating between pages look like:

http://padilicious.com/code/touchevents/

See this at the bottom:
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';
      }
}
0
 
Michel PlungjanIT ExpertCommented:
Hi

Have a look here. I found several good tutorials and API descriptions

http://pcunleashed.com/jquery/thinking-of-creating-a-few-ipd-html-pages/

Did you not get anything out of  the link I posted earlier? http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
0
 
Michel PlungjanIT ExpertCommented:
Not sure what you ask.

location ="page2.html";

or

location.replace("page2.html");

if you do not want page 1 in history

perhaps

var page = 1;
var numberOfPages = 10;
function whatever() {
  if (swipeDirection=="left") page--;
  else if (swipeDirection=="right") page++;
  if (page <0 || page > numberOfPages) page=0;
  location = "page"+page+".html";

}
0
 
phillystyle123Author Commented:
thanks mplungjan - the link you sent will work for swiping gallleries - and maybe for pages as well -i just don't know how to modify it so it'll swipe from page to page -i'll try your code
0
 
phillystyle123Author Commented:
so, something like this:

function processingRoutine() {
                        var page = 1;
                var numberOfPages = 10;
                        if (swipeDirection=="left") page--;
                      else if (swipeDirection=="right") page++;
                      if (page <0 || page > numberOfPages) page=0;
                      location = "page"+page+".html";
                        }

Again, I'm trying to be able to finger swipe from web page to web page. How does the code know which pages to swipe to? Do i not need to hardcode specific pages (i.e. warhol.cfm) into the code?

also not sure if I'm supposed to work

location ="page2.html";

or

location.replace("page2.html");

into the code somewhere.

I've attached my full js - function processingRoutine()  is toward the bottom of the code - thanks for your helpwith this!
<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 page = 1;
                var numberOfPages = 10;
				if (swipeDirection=="left") page--;
			    else if (swipeDirection=="right") page++;
			    if (page <0 || page > numberOfPages) page=0;
			    location = "page"+page+".html";
				}
			}
		
		</script>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Like this
<script type="text/javascript">
.
.
.
.
var pages=[
"warhol.cfm",
"The_Factory.cfm",
"Velvet_Underground.cfm"
]; // notice the last item has no trailing comma
var page=0;
function processingRoutine() {
  if (swipeDirection=="left") page--;
  else if (swipeDirection=="right") page++;
  if (page <0 || page > pages.length) page=0;
  location = pages[page]; // change the page
}
</script>

Open in new window

0
 
phillystyle123Author Commented:
ok - i'm just about ready to implement this -question:

say i have 3 pages:

var pages=[
"http://ikonltd.com/newaq/swipe.cfm",
"http://ikonltd.com/artists/swipe.cfm",
"http://ikonltd.com/past/swipe.cfm"
]; // notice the last item has no trailing comma
var page=0;
function processingRoutine() {
  if (swipeDirection=="left") page--;
  else if (swipeDirection=="right") page++;
  if (page <0 || page > pages.length) page=0;
  location = pages[page]; // change the page
}

what happens when i swipe left and right- in other words, do have to put this same code with the same page order in each page i want to be swipable?  if i access the site from the 2nd page in my list:

"http://ikonltd.com/artists/swipe.cfm",

how does it know to swipe back to

"http://ikonltd.com/newaq/swipe.cfm",

?
0
 
Michel PlungjanIT ExpertCommented:
Very good question. I must have been tired. I'll give some alternatives when I get to a computer in about 2 hours.
0
 
Michel PlungjanIT ExpertCommented:
On each page have the same script, just vary the order

the one in the middle is the current page

var pages=[
"http://ikonltd.com/newaq/swipe.cfm",
"http://ikonltd.com/artists/swipe.cfm",
"http://ikonltd.com/past/swipe.cfm"
]; // notice the last item has no trailing comma
var page=1; // the page is the 2nd page - js use 0 based arrays
function processingRoutine() {
  if (swipeDirection=="left") page--;
  else if (swipeDirection=="right") page++;
  if (page <0 || page > pages.length) page=0;
  location = pages[page]; // change the page
}



so on the next page you have

var pages=[
"http://ikonltd.com/artists/swipe.cfm",
"http://ikonltd.com/past/swipe.cfm",
"http://ikonltd.com/newaq/swipe.cfm"
]; // notice the last item has no trailing comma


watch the commas
0
 
phillystyle123Author Commented:
OK!  Thanks for the help with this- can you check out:

http://ikonltd.com/index.cfm

and let me know if all of these main level pages swipe?

THANKS!
0
 
Michel PlungjanIT ExpertCommented:
I'll ask someone with an iPhone
0
 
phillystyle123Author Commented:
thanks! please let me know!
0
 
IT-Monkey-DaveCommented:
On my iPhone 4 several images are displayed one at a time, each for a few seconds, then it stops.  Touching or swiping the screen doesn't seem to do anything.  If I reload the page the cycle repeats.
0
 
IT-Monkey-DaveCommented:
Viewing that page on my PC (IE8) does exactly the same thing.
0
 
phillystyle123Author Commented:
so the swipe doesn't work - can anyone send me a screen shot of the homepage with the images all loading at once?

also, try to swipe from here:

http://ikonltd.com/newaq/index.cfm

let me know if thatworks - thanks!
0
 
IT-Monkey-DaveCommented:
The homepage looks exactly the same for me on a regular computer browser and on the iPhone.  An image dissolves in, remains for a few seconds, then dissolves out and is replaced by another image.  This happens several times and then an image stays, no more changing.

The 2nd link looks like a standard web gallary of thumbnails.  Click on one and it opens to full size.  Same on iPhone and PC.
0
 
phillystyle123Author Commented:
Thanks for checking. I'm using the attached script to TRY and create the ability to finger swipe from page to page. Let me ask a question - I don't an iPad so this is really hard. But, do most sites have the ability to finger swipe from page to page or is it just normally used with photogalleries and the like?
<!--js for finger swipes-->
<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';
				}
			}
			
			
			var pages=[
"http://ikonltd.com/contact/index.cfm",
"http://ikonltd.com/index.cfm",
"http://ikonltd.com/current/index.cfm"
]; // notice the last item has no trailing comma
var page=0;
			function processingRoutine() {
				if (swipeDirection=="left") page--;
			    else if (swipeDirection=="right") page++;
			    if (page <0 || page > numberOfPages) page=0;
			    location = "page"+page+".html";
				}
			}
		
		</script>
<!--eof js for finger swipes-->

Open in new window

0
 
IT-Monkey-DaveCommented:
I don't have an iPad either so can't help on that. On the iPhone, I don't recall any web pages that do that. Some sites use Flash for that but Flash won't work on iProducts. Sorry I can't help more.
0
 
phillystyle123Author Commented:
This actually works! Since I don't have an iPad, I misunderstood what was being asked of me, the client actually just wants to use fingerswipe for the photo galleries - not for the pages.

Thanks for all the help!!!
0
 
Michel PlungjanIT ExpertCommented:
YW
0
 
phillystyle123Author Commented:
Figured out a way to include text in the fingerswipe too-just wrap whatever you want to include in the fingerswipe in a div:

 <div id="imagegallery"><div><img src....>descriptive text</div>
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 12
  • 10
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now