Solved

iPad - page flip effect

Posted on 2010-11-19
28
2,383 Views
Last Modified: 2013-11-17
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
Comment
Question by:phillystyle123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 12
  • 10
  • 4
28 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34210872
I think this is what you want:

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


0
 

Author Comment

by:phillystyle123
ID: 34210905
thanks -  can you give me some direction re: how to build this into my webpage?
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 34210910
Please read the instructions. they are pretty clear I think
http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
0
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!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34210912
0
 

Author Comment

by:phillystyle123
ID: 34312783
sorry to leave this question hanging - i'm going to be workng on this shortly
0
 

Author Comment

by:phillystyle123
ID: 34365455
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34367223
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34367235
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
 

Author Comment

by:phillystyle123
ID: 34371969
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
 

Author Comment

by:phillystyle123
ID: 34372157
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34372251
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
 

Author Comment

by:phillystyle123
ID: 34372830
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34375041
Very good question. I must have been tired. I'll give some alternatives when I get to a computer in about 2 hours.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34375724
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
 

Author Comment

by:phillystyle123
ID: 34380646
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34381346
I'll ask someone with an iPhone
0
 

Author Comment

by:phillystyle123
ID: 34382562
thanks! please let me know!
0
 
LVL 13

Expert Comment

by:IT-Monkey-Dave
ID: 34382667
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
 
LVL 13

Expert Comment

by:IT-Monkey-Dave
ID: 34382676
Viewing that page on my PC (IE8) does exactly the same thing.
0
 

Author Comment

by:phillystyle123
ID: 34382689
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
 
LVL 13

Expert Comment

by:IT-Monkey-Dave
ID: 34382908
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
 

Author Comment

by:phillystyle123
ID: 34382972
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
 
LVL 13

Expert Comment

by:IT-Monkey-Dave
ID: 34383183
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
 

Author Closing Comment

by:phillystyle123
ID: 34385915
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34393107
YW
0
 

Author Comment

by:phillystyle123
ID: 34394314
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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Short answer to this question: there is no effective WiFi manager in iOS devices as seen in Windows WiFi or Macbook OSx WiFi management, but this article will try and provide some amicable solutions to better suite your needs.
The case of the missing phone talks about the way a small electronic gadget (the mobile phone) has penetrated into our lives and has made us addicted to it.
This Micro Tutorial hows how you can integrate  Mac OSX to a Windows Active Directory Domain. Apple has made it easy to allow users to bind their macs to a windows domain with relative ease. The following video show how to bind OSX Mavericks to …
This video demonstrates how to sync Microsoft Exchange Public Folders with smartphones using CodeTwo Exchange Sync and Exchange ActiveSync. To learn more about CodeTwo Exchange Sync and download the free trial, go to: http://www.codetwo.com/excha…

628 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question