Solved

iPad - page flip effect

Posted on 2010-11-19
28
2,370 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
Comment Utility
I think this is what you want:

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


0
 

Author Comment

by:phillystyle123
Comment Utility
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
Comment Utility
Please read the instructions. they are pretty clear I think
http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
0
 

Author Comment

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

Author Comment

by:phillystyle123
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Very good question. I must have been tired. I'll give some alternatives when I get to a computer in about 2 hours.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
Comment Utility
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
Comment Utility
I'll ask someone with an iPhone
0
 

Author Comment

by:phillystyle123
Comment Utility
thanks! please let me know!
0
 
LVL 13

Expert Comment

by:IT-Monkey-Dave
Comment Utility
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
Comment Utility
Viewing that page on my PC (IE8) does exactly the same thing.
0
 

Author Comment

by:phillystyle123
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
YW
0
 

Author Comment

by:phillystyle123
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Once again I push the limits of my phone.  An introduction to the Android Google Now Launcher.
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.
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 > …
Users will learn how to set proper sequence settings, scale images, paste attributes, add transitions, fades, and music. Open up Final Cut Pro 7 and Create a new Project: Set the Sequence Settings. a) Click File > Easy Setup > Format > Apple ProRe…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now