Solved

iPad - page flip effect

Posted on 2010-11-19
28
2,380 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
  • 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

With mobile becoming increasingly important to the business world, it is in your best interest to make sure that your email signature looks great across all types of devices. Find out how to create a mobile email signature with this guide.
A brief look into what is, how to use, and how to make GIFs
Users will learn how resize a batch of photos from a single command in Photoshop via Photoshop's Image Processor. Open up an Image you'd like to resize in Adobe Photoshop: Adjust the image size according to your preferences. Image > Adjustments > …
CodeTwo Sync for iCloud (http://www.codetwo.com/sync-for-icloud?sts=6554) automatically synchronizes your Outlook 2016, 2013, 2010 or 2007 folders with iCloud folders available via iCloud Control Panel. This lets you automatically sync them with…

830 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