Speed: Book Flip
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 ExamplesBookflip 4 example
Myer Catalog with Lightbox and Image Map
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 ExamplesMyer Catalog
Fun with Borders
Free LicenceThis 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.
Commercial Licence per Domain:A Commercial Licence has the same conditions as a Free licence with these exceptions:
Joe: Hi Will
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 :)
usman nasir: hi will
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?
Will: @ hi usman nasir, I can't even guess without seeing it. Could be the browser your using or any number of things.
dongho kang: hi. very nice program! thx!! but low speed on ipad2
dinesh: hi. i have double side content page need. another one paper fold is must beautiful want
Will: If it is a div within a div it won't be a new page.
alexander: Oh, I see, thanks.
Will: It's probably possible but the script would need a major re-work.
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?
Will: the download has everything setup to run out of the box.
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?
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.
Alvin: Hi Will,
Will: @1. Click the buy now button above.
Alvin: Thanks Will. Excellent script.
Hardik: Hi will,
Will: The script & this webpage works & displays fine in my android (gingerbread) phone and my windows6 smartphone.
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?
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?
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.
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.
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.
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.
Will: It makes sense.You could be missing a </closing> element or any numb of things.
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.
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
Will: At the bottom of your html file (not in the js file) are settings. Try:
lotfey: can i make the book from right to left when flip?
Will: @lotfey, yes please see previous answers.
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!
Will: @Jeremy, there is no restiction. Check you are not missing a closing or misplased/malformed html element.
Makro Web: Great page flip effect, also nonrequired flash player.thank you..
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.
Will: Thanks Makro Web.
maaz: very good
Neofito: Hi Will,just say thanks for this great script,it works fine;I've removed the navigation buttons;you can see it here:
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.
Neofito: Thanks for your words Will, I'm glad you liked it.
Nithya: Hi,Thanks for this post,help to me for displaying single page instead of double page,our coding shows only double page.
Will: @Nithya, basically by leaving the left page div blank.
Joe: Hey Will
Will: Hey Joe. Afraid so. Licence is per domain.