Articles

Links

All scripts are licenced:
Creative Commons 3.0 -NonCommercial

Valid HTML 4.01 Transitional


Speed: Book Flip


Are You Ready Kids?

I can't hear you.

Aye-Aye Captain!

OHHHHHHH

Who lives in a pineapple under the sea?

Sponge Bob Square Pants!

Absorbent and yellow and pourous is he!

Sponge Bob Square Pants!

If nautical nonsense be something you wish!

Sponge Bob Square Pants!

Then drop on the deck and flop like a fish!

Sponge Bob Square Pants!

Ready?

Sponge Bob Square Pants




Sponge Bob Square Pants

Sponge Bob Square Pants

Sponge Bob

Square Paaaaannttss!!!

Domains to be Licenced:










Copywrite: http://coastworx.com


Leave instructions
here or
leave it blank.


Description

December 08 2011 - Updated: Totally javascript Book Flip for page turn effects.
Bookflip engine has been totally rebuilt for better modern browser performance(IE8 & 9).
Place any html code within the books pages - div id="pages" (#no longer inside bookflip div). Each code block within the pages div will be treated as a seperate book page. Setting are adjustable in the script. Please read the readme.txt file inside the zip. Download Zip

Bookflip V4.0 Examples

Bookflip 4 example
Bookflip Shrek
Myer Catalog with Lightbox and Image Map

August 11 2008 - Updated: Totally javascript Book Flip for page turn effects.
Sound Manager is the only Flash component courtesy of Scott Schiller (schillmania.com).
Ideal for Online story books as a teachers aid or just for fun.
Now has the ability to utilize html within each page and still maintain proper layout.
Place any html code within the books pages - div id="myBook". Each code block within the myBook div will be treated as a seperate page. Setting are adjustable in the script. Download Zip

Bookflip V3.0 Examples

Myer Catalog
Fun with Borders
Gratitude

Free Licence

This Script is wholly developed and owned by CoastWorx.com. Copywrite: http://wwww.coastworx.com/ Licenced under Creative Commons - Non Commercial | Legal Code for Non Commercial use.

- You are free to use this script so long as all copywrite notice/s stays intact in its entirety.
- You are free to use this script so long as a link back to coastworx.com stays intact and remains visible.
- You are NOT Permitted to claim this script as your own or use this script for commercial purposes without the express permission of CoastWorx Technologies!
- Commercial Purposes is defined as profiting directly from the script, eg. profiting directly from the functionality of the script. eg a catalog type enterprise or advertising that utilises the script.
- Please purchase a Commercial Licence to remove copywrite notices and link (below).
- Full credit to Scott Schiller (schillmania.com) for soundManager.

Commercial Licence per Domain:

A Commercial Licence has the same conditions as a Free licence with these exceptions:
  • Can be used for Commercial Websites
  • Copyright notices may be removed
  • Unlimited copies may be used on a per domain basis
  • Cannot be resold or claimed as your own
Domains to be Licenced:

Comments

Joe: Hi Will
I am currently attempting to use this on an iPad as well and was wondering if it would be possible and if so how, to change it so that instead of tapping the corner, you can just slide it to turn the page?

Thanks in advance
(31.05.2012, 14:29)

Will: @Joe: grab and slide like flash, you need to find someone to customize it for you. It's a lot of work for no gain IMHO :)
(31.05.2012, 20:36)

usman nasir: hi will
i am trying to display pdf files on each page dynamically. but the problem is it shows some pdf files and then error generated is "maximum no of pdf files" so what should i do?
(01.06.2012, 03:31)

Joe: Will - Thats what I thought but thank you very much for your help. On a side note, would it be possible to add a horizontal scroll bar at the bottom which achieve the same purpose or would this again be flash?
(01.06.2012, 15:42)

Will: @Joe, not sure what you mean exactly there but it soundslike the same thing. Plenty of things can be done but an example helps. Remember this is non-flash and relies on the capabilities of javascript. Some animations eat too much cpu or are unpractable cross-browser.
(01.06.2012, 18:05)

Will: @ hi usman nasir, I can't even guess without seeing it. Could be the browser your using or any number of things.
(01.06.2012, 18:07)

dongho kang: hi. very nice program! thx!! but low speed on ipad2
how can i ? sorry, i can't speak english~
(10.06.2012, 20:38)

dinesh: hi. i have double side content page need. another one paper fold is must beautiful want
(22.06.2012, 12:17)

alexander: Hello,

Everytime you make a div within the pages div you make a new page right? Is there a way to 'not' make a new page if I make a div?
(25.06.2012, 08:32)

Will: If it is a div within a div it won't be a new page.
(26.06.2012, 06:43)

alexander: Oh, I see, thanks.
Also, is it possible to have the length and width of each page set to a percentage instead of a hard number? Like make each page fit 45% of the screen?
(27.06.2012, 15:23)

Will: It's probably possible but the script would need a major re-work.
(28.06.2012, 15:14)

Curtis: Will, Is the bookflip.html supposed to be included in the download? And do we need to link the html page to java with a scr= code?
(02.07.2012, 12:36)

Will: the download has everything setup to run out of the box.
(02.07.2012, 20:45)

Nikita: I downloaded version 4, inserted the code (i think correctly), and dragged the JS and some images in my server, and tested it out on one my site. However, the book flipper itself wont show up.I don't know why. I tried the one on Dynamic Drive and it worked, unfortunately I need a template with a cover first. Could you help me out?
(14.07.2012, 22:00)

Will: @Nikita, you haven't referenced bookflip.js correctlt for V4. It is a totally new js file & is located in 'bookflipjs' folder. I have sent you an email outlining more detail.
(16.07.2012, 19:44)

Alvin: Hi Will,

I have a few questions, but will start with 2.

1. What does the commercial license cost?
2. In other bookflips I've seen, the top or bottom corner flaps/waves, with some text behind it that says "Next Page". Can this be done on your script? Here's an example. See top right corner (not a bookflip, but you'll see what I mean) http://www.mortgagepluscc.co.za/index.php
(19.07.2012, 13:25)

Will: @1. Click the buy now button above.
@2. Other bookflip youve seen use flash this does not. This cant be done like the flash versions using javascript alone however all sorts of navigation arrows/aids could be incorporated & most likely something similar to the one you linked to also.
(19.07.2012, 19:02)

Alvin: Thanks Will. Excellent script.
(19.07.2012, 19:18)

Hardik: Hi will,

I have used this plugin one of my website but i have little problem with mobile devices...Its wouldn't be display correctly in iphone and android device...
(20.08.2012, 01:43)

Will: The script & this webpage works & displays fine in my android (gingerbread) phone and my windows6 smartphone.
I can only suggest you check your implementation is valid html and optimised for the wide variety of smart phones with lower CPU.
(20.08.2012, 08:34)

Joe: Having a problem with this coming up on a PC on IE. Works fine on firefox and safari whether it be a Mac or Tablet, just IE is the problem. Anyone have any input?

Thanks in advance
(21.08.2012, 09:20)

Will: What version of IE, 8 or 9? Works fine on my IE8. Any js error msgs? Does the demo above work ok in your IE browser?
(21.08.2012, 22:43)

Joe: Will I tested our site on IE 9 - I had to bombard you with issues but would you possibly be able to take a look at let me know. As for Firefox, Safari, it all works fine, so not sure if there is a setting that may be turned off.

Thank you in advance

http://bulova-web-ads.com/stitchins/October/Macys_October_Sale.htm
(22.08.2012, 08:16)

Will: Joe, I think your issue is a html validation issue rather than a browser issue. Clean up your code and start from scratch by adding a page at a time until the problem arises.
(23.08.2012, 02:00)

Joe: Will Thanks for the quick response. Going to go thru this all this weekend and try to figure out the issues. I went thru W3C and had them cleanup my HTML - tested that and to no avai, still not working on IE. Thanks for the heads up though hopefully I can figure this out.
(24.08.2012, 11:06)

Joe: Ok so not sure if this makes sense but I believe I found my problem issue to be located in the page 1 coding. The odd thing is that as a test, I copied the exact code but put it below page 2 in my code (still leaving it above page 1). This causes the page 1 to appear when it did not originally and then again after page 2. Does this make any sense? Not sure if there is something in this region that is messing up my HTML so it cannot be viewed in IE.
(27.08.2012, 10:46)

Will: It makes sense.You could be missing a </closing> element or any numb of things.
Have you tried creating a html file using the html code from each of your pages and see if they display correctly as stand alone from the bookflip.
The first tip I can offer anyone writing or pasting any type of code is to keep it clean and structured helps maintanence and error detection not to mention bloated non-required code.
end clean/structured code lecture.
(28.08.2012, 04:42)

pittsburgh penguins jerse: What a fantastic article, I learned from your article many useful knowledge, broaden my horizons and enrich my knowledge. Thank you very much and hope you can to write more and better articles.
(28.08.2012, 20:04)

Will: @Joe. Had a chance to download your source code and uploaded here. Cleaned out the unecessary stuff. Let me know if it works for you (images are linked to those on your website) http://www.coastworx.com/macys/Macys_October_Sale21.html
(28.08.2012, 22:45)

Joe: Will

Thank you very much for your help. Everything works great now. We've been going crazy over this and couldn't figure it out for the longest time. Im going to take some time and analyze both sets of code this week so I can figure it out myself but thank you again.
(07.09.2012, 15:48)

Jerome: Hello,
Very nice script. I would like to know if it's possible to reduce the size of the line between pages.
Even with no gradient and no border, something like 2 pixels remains.
Maybe somewhere in the js file?

Thanks in advance,
Jerome
(13.09.2012, 05:26)

Will: At the bottom of your html file (not in the js file) are settings. Try:
pageBorderWidth="0";
(14.09.2012, 02:30)

lotfey: can i make the book from right to left when flip?
(23.09.2012, 19:52)

Will: @lotfey, yes please see previous answers.
(23.09.2012, 20:27)

Jeremy: Hi Folks. I am using this great script - I was wondering how i can go beyond 45 pages? I've already made the divs to correspond to 148 pages but its only showing 45. Please help!
(26.09.2012, 17:44)

Will: @Jeremy, there is no restiction. Check you are not missing a closing or misplased/malformed html element.
(27.09.2012, 02:06)

Joe: Will

Back again. We are trying to setup Google Analytics, specifically event tracking on our site to track each individual item. We are using an image map in order to make each watch clickable. Do you happen to have any knowledge of this? We are running into a problem with even tracking and not sure if it is due to the page flip?

Thank you in advance
(02.10.2012, 09:31)

Makro Web: Great page flip effect, also nonrequired flash player.thank you..
(02.10.2012, 17:16)

Will: @Joe. I dont use google analytics and you didnt mention what the problem is however. Could be a simple as a malformed closing tag on a page. I cant guess without seeing it. If your not already use Firefox browser with Web Developer addon which gives you tha ability to drill down to any js errors or html issues.
(02.10.2012, 19:12)

Will: Thanks Makro Web.
(02.10.2012, 19:14)

maaz: very good
(11.10.2012, 03:06)

maaz: amazing
(13.10.2012, 10:16)

Neofito: Hi Will,just say thanks for this great script,it works fine;I've removed the navigation buttons;you can see it here:
http://auteriacompendio.weebly.com/historia.html
Hope it isn't against free licence,otherwise let me know.
Also,I've read in previous post the problems of some people because the book begins opened,I've setted the book inside a div with a background with a plain color and I've used the same color for first and last pages, hope this can help.
(17.10.2012, 06:32)

Will: Terrific! Looks great so well done. Great to see & thanks. Maybe we should start a gallery of live examples of the script if there are enough willing to share.
Cheers
(18.10.2012, 03:10)

Neofito: Thanks for your words Will, I'm glad you liked it.
The hard work is in your code, after that we only have to add stuff. Hence, thanks again for the great script.
(18.10.2012, 12:44)

Nithya: Hi,Thanks for this post,help to me for displaying single page instead of double page,our coding shows only double page.
(16.11.2012, 00:25)

Will: @Nithya, basically by leaving the left page div blank.
(16.11.2012, 16:20)

Joe: Hey Will

I have purchased already, as we use this for one of our clients. Now, an additional client would like to use this. Do we need to re-purchase in order to use for an additional site?

Thanks again
(19.11.2012, 13:01)

Will: Hey Joe. Afraid so. Licence is per domain.
(19.11.2012, 15:28)

50 of 472 comments (part 2) [ « ] [ » ] [ * ]

Your comment:

Name:
E-mail or homepage:
Enter Turning Number: