• Freeze Panes Table
• Dynamic Table
• Book Flip JavaScript
• Free PHP Web Site
• Downloads - Scripts

• Text-It engine - Online graphics generator
• Free Classifieds
• Quality ASP Host - HostHombre.com
• ASP Web Development
• ASP Classifieds Script

Make a PayPal Contribution to remove Script CopyWrite notices or for Non-Commercial use!

All scripts are licenced:
Creative Commons 3.0 -NonCommercial

Comments

Félix Almodovar: I would like to contact with you. - I'm interested at this script.
(28.06.2008, 07:48)

Will: The source code is readily available. - Right click -> view source to get the html code. - download http://coastworx.com/bookflip.js - And - For sound effects you''ll need soundmanager2 (only works server-side) from - http://schillmania.com/ - http://coastworx.com/flip.mp3 - - The location of images etc is setting in the bookflip.js file. - - I'll be bringing out a new version soon that supports HTML withing each page.
(29.06.2008, 09:21)

colin: This is really good..the best non flash version..I have tried the above but cant get it to work..as its a php page is there any php code that obviously I cant source.
(02.07.2008, 11:40)

Will: Colin, no php not required. The code is html and javascript. Script can now be downloaded as Zip. Added the download link to the description above.
(02.07.2008, 20:15)

Max: Well. It is very good! Whether it is possible to look through through some pages and to pass to the certain page? What parameter depends on it?
(05.07.2008, 14:07)

Will: Max, please state your question more clearly so i can understand exactly.
(05.07.2008, 21:47)

Max: Excuse, I not so well know English. - Whether probably to make transition through one page? What parameter depends on it? Instead of: 0,1 -> 2,3 - to make: 0,1 -> 4,5
(06.07.2008, 03:07)

Will: ok, navigate directly to selected book pages. Keep an eye out, i'll look into it.
(06.07.2008, 20:56)

Max: How will make, it will be possible to test?
(07.07.2008, 07:53)

Will: Updated to incorporate direct page navigation using the drop down select box containing page numbers. - Pages may be configured to be clickable for navigation between pages. Each page has on onclick function that filters through an event handler to determine what type of element on the page was clicked. For example clicking a link, we don't want the page to turn....the event handler filters links and inputs out of the page click event. - Zip is updated.
(11.07.2008, 12:05)

Will: Stumbled across this nice website demonstrating how to do border-images with css - http://bigbaer.com/css_tutorials/. Here's the book using it http://coastworx.com/bookflip_borders.html
(12.07.2008, 05:18)

Will: Using PNG images book frame example, (use the background colour buttons) http://www.coastworx.com/rounded.htm
(15.07.2008, 21:31)

Will: Full page demo updated: http://www.coastworx.com/bookflip.html
(24.07.2008, 10:58)

Will: Myer Catalog example: http://www.coastworx.com/myer.html
(25.07.2008, 21:56)

Patrick: hello, i am testing your book in the moment offline and got big troubles with it under safari, the sites flipping very very very slow. it works best with lets say 10 images, but not with my 74 images, but it works very well with firefox, is there any solution for this, thx for your help, patrick
(10.08.2008, 17:19)

Will: The animation speed can be adjusted by changing var pSpeed=20; and var numPixelsToMove = 20; variables in your html page(not bookflip.js). Download the latest http://coastworx.com/bookflip.js . - My testing shows speed issues only with Opera, conditionally you can add a routine to sniff browser type and adjust settings accordingly.
(10.08.2008, 22:20)

anthony: I can't download the html portion, but was able to get the php portion...is there a way that you can email it to me...baybeboie@gmail.com
(18.08.2008, 00:28)

Will: Download the zip from downloads page
(18.08.2008, 09:08)

vanbao: I donwloaded and installed the script which works fine except for the sound affect. Could you pleas help to get the sound affect to work when a page is turned.
(05.09.2008, 02:38)

Will: @vanbao: You need to download Sound Manager from schillmania.com. Only works when the script is installed on a server so i've not included it in bookflip.zip.
(05.09.2008, 20:51)

vanbao: Will, Thanks for the quick response. I don't quite know what you mean by installing on the server. I downloaded the soundmanager2-nodebug-jsmin.js and uploaded to my server in the same folder as the bookflip.js folder. Then in my html file, I linked to it with this tag: <script type="text/javascript" src="soundmanager2-nodebug-jsmin.js"></script> - - For some reasons, that does not do it. please help me understand how to install this script on my server. I don't quite know how to install.
(06.09.2008, 02:26)

Will: @vanbao: Make sure your folder permissions are set correctly for soundmanager folder. Upload the soundmanager demo folder/files as a test to make sure its set correctly on your server.
(06.09.2008, 10:31)

Will: Update Part1:*Jump to page* dropdown modified, can optionally be set to jump to page incrementally, the default is to go directly to selected page without animation...Add doIncrementalAutoFlip = false; to your html page in the js variables section. Set to true for incremental.
(08.09.2008, 19:48)

Will: Update Part 2:*Jump to page* dropdown can now support custom page names. Simply give your page container element a name and the script will takes care of the rest...eg. <div name="Home">....bookflip.zip and bookflip.js updated.
(08.09.2008, 19:52)

hemz shaw: Hi Will, - This is really awesome. was thinking of implementing the same for a school for physically challenged kids. There is a prob. Sometimes, text that these students want to copy & when ever we click on the text,page changes. Can you let me know how to set this to change on click of the button on the top, as well as a link on the bottom right and left of the page so that I can still copy the content of the page.
(18.09.2008, 17:22)

Will: @hemz: look in your html near the bottom for: allowPageClick=true; //allow clicking page directly, set to false will disable it. As for moving buttons around there are many ways to do it but an understanding of html is required....you need to copy the buttons html code to the required location/s on your page: - <input type=button class="buttons" value=prev onclick="goprev();"> - <input type=button class="buttons" value=next onclick="gonext();"> - Cheers :)
(19.09.2008, 03:21)

greg: I downloaded and used the script and works awesome. But i have one problem with the code in html, i was not able to create internal link with the pages, can you please help me with that?
(30.09.2008, 03:50)

Will: <a href="#" onclick="autoFlip(5);return false;">Page 5</a> - - 5 being the page to jump to....Is that what you mean?
(30.09.2008, 10:09)

greg: Yes, thanks for the quick response.
(02.10.2008, 01:43)

mmmaria: hello, I tried to open it with explorer. Just for double check. And the images doesnt apear (!) do you have any suggestion? - thanks!
(25.10.2008, 08:48)

Will: i can only guess? more details please....did youdownload the zip? - error messages?
(25.10.2008, 08:58)

mmmaria: I have downloaded the zip of version 3. And it works in safari and f.fox but Tried to open the html in explorer and no images loaded... - and thanks for sharing your work!!! :)
(25.10.2008, 14:38)

Will: mmmaria, the scipt definatly works in IE. Check your browsers settings...does a security bar warning come up when you open the bookflip....if not you possibly have settings disable for running javascript from the local file system. Test other local files that contain javascript to see if they work....you may have to adjust your browsers security level is too high. See http://netsecurity.about.com/cs/tutorials/ht/ht020203.htm and http://www.jfitz.com/tips/ie_security_config.html
(25.10.2008, 20:36)

Dan: Is there any way to insert image-mapping into each individual page? I'm trying to implement a way for users to click on portions of a page and have a new image pop up according to where they clicked. Any ideas?
(17.11.2008, 10:49)

will: Dan, in bookflip.js is function whichElement(e,dir). replace: if(tname=="A" || tname=="INPUT" || pname=="A" || pname=="INPUT") with: if(tname=="A" || tname=="INPUT" || pname=="A" || pname=="INPUT" || tname=="AREA") - - Tested using code from http://www.w3schools.com/TAGS/tag_map.asp
(18.11.2008, 01:14)

greg: By clicking the page or by clicking the button, your book automatically flips. Is there any way to disable the flipping effect of the page by clicking the page? It's hard for me to select the text on the page or even the image when i put the mouse pointer on the page.Any suggestion?
(26.11.2008, 02:06)

Will: allowPageClick=true; //allow clicking page directly, set to false will disable it
(26.11.2008, 09:05)

totz: is the flipping effect also best work for a 300 page book?
(02.12.2008, 22:24)

Will: no and neither is flash?
(03.12.2008, 03:02)

Carla White: Great script. Thanks for sharing. Can you tell me how to have an open book by default? Rather than just the cover? A page displayed on the left and right.
(03.12.2008, 21:44)

Will: @Carla White...Simplest solution: in your html file, after ini(); , insert autoFlip(1); // 1 being page 1.
(04.12.2008, 08:46)

nybbe: Hey! I have just one problem with this script. - How do i do too make the book appear on my homepage? Could you please tell me?
(05.12.2008, 17:09)

Carla White: Thanks for getting back to me Will. Another question. I want to add tabs outside of my pages for navigation. Right now set the pages to be wider than they actually are to I can add the tab outside. This works ok on the first page, but breaks after that. Given that the pages are an exact width, I can't figure out how to do this. You can see my work here: http://happytapper.com/Gratitude/ - - Hopefully seeing the site will help understand my question better. Thanks again! Carla
(06.12.2008, 09:27)

Will: @Carla White....Some absolute positioned divs...I've added a wrapper div to line up your book with the your body tags background image and slightly wider than your book to show the right links. Another div holds your home link/s set to the right of wrapper. Also Mod to bookflip.js to support pageShadow=false; - ...thought i'd done that but will update the zip soon. See it: http://coastworx.com/carla/index.htm
(07.12.2008, 09:53)

Carla White: You are amazing! Thank you so VERY much. I'm definitely making a paypal contribution. Thanks so much for helping me get my site together. You can see it here: http://happytapper.com/
(08.12.2008, 07:31)

jetsada: Can not resize the page.. I try to change width and Height in the main <div> but useless
(13.12.2008, 22:36)

Will: @jetsada: variables var myPageW=300; //page width - var myPageH=361; //page height are at the bottom of the html file...
(14.12.2008, 08:34)

Aneef Fashir: hi Guys, i have developped a website using the Javascript BookFlip - - URL: http://www.gunwebsystems.biz/ViewCatalog.aspx?catID=57 - - Everything works fine but when i have too many pages on my site..it flips very slowly in firefox..but works well in IE7, chrome, n safari. could somebody help me on this.
(17.12.2008, 07:30)

Will: @Aneef Fashir: You have javascript errors when using IE7, turn on script error notification in IE advanced settings. - FFox showing lots of warnings although no errors but using lots of cpu, the amount of pages should be fine, whowever lots of other javascript happening there with zoom etc, i suspect the other js your using is not fully compliant with FFox. Try validating your html and css first and or tst without the other scripts included to narrow down the cause. Nice job btw..:)
(17.12.2008, 10:33)

Will: @Aneef Fashir:Please respect my Copywrite notices. You have removed them from the code. - If you cannot respect my rights don't use the script!
(17.12.2008, 10:40)

Sable: It looks like a lovely script, and exactly what I've been looking for for ages, however I am not js savvy and it comes without any instructions on how to set the variables and what function does what, etc. So I am at a loss! LOL. Anyway, it looks perfect for me, but I am unable to figure out on my own how to use it so I guess I will keep looking. Thank you, anyway, you seem to have created a gem!
(19.12.2008, 14:56)

Will: Look towards the bottom of the html file(bookflip.html contained in the download zip). Settings for each variable are there and pretty self explanetory.
(20.12.2008, 03:27)

Aneef: @Will.. sorry will.. i actually got the script from through a friend and added it..i didnt see it has been removed..will surely add that..its really a wonderfull job you have done. could you please tell me what are the warnings in firefox. you mean does other js makes it slow down in firefox.. but how come it working faster for other flips where there are less pages.
(20.12.2008, 05:26)

Aneef: Will Ammended the Copyrights ..n thanks again :)
(20.12.2008, 05:33)

Aneef: Aneef@ will .. sorry for double posts... i really want to make a ASP.net Control using this script.. its really awsum..and i've use asp.net listview to achive this... i have altered some of the codes to dynamically pull out data from this.. like i update the database for each page turns. will this be a performance issue ?
(20.12.2008, 05:43)

Will: @Aneef: Thank you. I'd be happy to help but I don't know asp.net. Lots of additional js and calls to dotnet in your adaptation of the script making it hard to interpret whats happening and why.Start fresh with the original bookflip script,add each modification one at a time, test after each until the problem presents itself. For testing in FFox:Web Developer: https://addons.mozilla.org/en-US/firefox/addon/60 or Firebug https://addons.mozilla.org/en-US/firefox/addon/1843 to help you debug.
(20.12.2008, 08:17)

Aneef: @will.. i will do that and will inform you on my success :) thanks.
(20.12.2008, 12:40)

Brian: Will, I'm interested in using your script for a news display on my current project. The problem is the news data is stored on a SQL server with HTML inside it (I insert data into a asp:Literal) in it's own field and it's allowed to have one image which would be displayed on the first page. I can't figure out a solution to paginate the div's based on overflow. - - Thanks in advance, love the script I just can't figure out how to populate the div's dynamically.
(06.01.2009, 08:33)

Brian: Sorry for the double post.. I never really asked my question because I ran out of room.. I was wondering if you had any suggestions on how to paginate a div based on overflow? Or is there another method where I could chain together one long literal into separate pages?
(06.01.2009, 08:36)

Will: Brian, send me an example of the html output or example page via email of what your trying to use. Pagination is already taken care of by the script via the dropdown select so i'm not exactly sure what your trying to do there?
(06.01.2009, 20:15)

Scott: Any way to disable flip-on-click on a particular page or pages, while leaving it enabled globally(for all other pages)?
(20.01.2009, 15:36)

Scott: RE: disabling click on a particular page, I found a way... I used an iframe to reference the content that I did not want to instigate a page-flip. Now clicking inside that iframe (its size is specified) does not cause the page to flip, but clicking outside of the iframe still does.
(20.01.2009, 15:47)

Will: You could also use a custom tag to contain non-click content, eg: <dt>no page turn content here</dt> and add the dt element to the whichElement function...off the top of my head...not tested.
(20.01.2009, 19:04)

nemohn: i can't to make lose left shadown of image
(20.01.2009, 21:22)

nemohn: I did. thanks you
(20.01.2009, 21:31)

greg: How can i change the number or the book pages in the combo box?...Since its default number is 1, is there anyway to start on page number 54 and then increment?
(25.01.2009, 19:35)

Will: @Greg, those questions have been answered in prev posts. - Start on page 54: in your html file, after ini(); , insert autoFlip(54); // 54 being page 54 - -->The number of pages in the combo is determined by the number of pages in your book. Instead of the combo displaying "54" for page 54, give that page (54) a name attribute, eg:<div name="My page Name"....
(25.01.2009, 20:40)

Protheus: I found your Bookflip very well and I wondered a thing. would be it possible to load the cover of the book without the empty left part to consider it better as a cover may move it in the center during the opening of the book which would let appear the page 1 and the page 2
(02.03.2009, 06:28)

Will: Its possible, but no easy solution i'm afraid.
(02.03.2009, 09:16)

Aneef: will , Aneef again. i tried to remove the binder in the pages. but still its appearing the internet explorer. - http://gunwebsystems.biz.mytempweb.com/ViewCatalog.aspx?catID=72 - - could you please suggest how do i remove it
(06.03.2009, 16:24)

Will: This is nothing to do with the binder and everything to do with this routine for page shadow creation: if(!number_check(counter)){ if(document.all){...etc
(06.03.2009, 23:17)

Dave: Love the script. one question, I've created a large book (164 pages) loads fine, reads fine. page flipping is agonizingly slow in firefox 3. Not throwing any errors that the browser or firebug can see. Anyway to speed this up? It looks like the size of the page array effects the animation. haven't looked hard at the JS yet. Jumping directly to a page is quick so it's just flipping the page that seems to be dragging. ideas?
(09.04.2009, 15:11)

Will: @Dave, yeah, the script wasn't built with that many pages in mind. The browser has loaded your 164 pages plus twice as many again additional div's/dom elements that the script creates to make the effect work. Future release will incorporate ajax type functions to only load pages as required and reduce the load on the browser. Can't say when i'll get to it though.
(10.04.2009, 20:02)

Dave: I figure it has to do with the getElementById function.I think it would be nice if the flipping functions used the indexed array (as opposed to the div 'name' My guess is that the bottleneck is looking up all those divs eat a lot of cpu time. I'm going to break the book up into chapters and load one chapter at a time. I'll let you know how that turned out.
(13.04.2009, 07:37)

Will: Licencing under Creative Commons 3.0 information and links added to left column of this website.
(21.04.2009, 22:01)

ScorpioMan: Hi people i just got this script 2 days ago and it awesome, i only have a minor problem,how do i remove the dark shadind that appears on the left pages ?
(29.04.2009, 01:09)

Will: Look in the bookflip.js for original.style.filter="progid:DXImageTransform.Microsoft.Alpha....and below that for Mozilla browsers.
(29.04.2009, 20:31)

Protheus: How to use the tag <SELECT>: - - If as me you activated the option allowPageClick=true; you cannot use the tag <SELECT>. When you select a value in a tag <SELECT>, the page turns automatically. - - To resolve this problem, in Bookflip.js, modify the line 413: - if(tname=="A" || tname=="INPUT" || pname=="A" || pname=="INPUT" || ) by if(tname=="A" || tname=="INPUT" || tname=="SELECT" || pname=="A" || pname=="INPUT" || pname=="SELECT")
(14.05.2009, 09:22)

Allie: Hi is there any way to use this script so that the pages flip vertically instead? thanks!
(16.05.2009, 10:46)

Will: @Allie: Sorry, no way.
(17.05.2009, 01:57)

Mark: Hi Will, great script thank you! I would like to tone down the black_gradient.png and so have halved its size and lightened it. I have also modified myPngDiv width to 40 in bookflip.js. The result is fine in FF but seems to make no difference in IE7! Any ideas what I should do? thx!
(21.05.2009, 18:53)

Vipul G.: hello Will... - thanx for this beautiful page flip script. - your work is really commendable. - god bless u - t.c.
(21.05.2009, 23:31)

Will: @Vipul G - thank you!
(22.05.2009, 10:32)

Will: @Mark - IE browsers utilize DXImageTransform.Microsoft.Alpha to create the shadow. This was done to compensate for IE6 not fully supporting PNG's. If your not concerned about alder versions of IE, knock out the document.all routine, else modify the alpha filter settings in js file. - Cheers
(22.05.2009, 10:37)

Vic: Hello Will..Thanks for the great script! I have no problems running the script on my desktop, but it is pretty slow in my iphone. Do you know what is the cause and how to fix it? Thanks alot!
(30.05.2009, 00:19)

Will: @Vic - IE8? Seems like the worst browser ever from developers point of view :( - Try "Compatability View".
(04.06.2009, 10:10)

Deborah: will, great script. I would like to use this script for a business dirctory. It is possible to place two images on a page, adding a small amount of space in between? basically two business cards
(13.06.2009, 15:58)

Will: @Deborah: Sure is. Fundamentally this is why i developed the script with html/js so full control is given as to what displays on a page as opposed to flash bookflips which mostly rely on full page images with little interaction. - Simply place your html inside each pages div. - Thanx for the compliment on the script :)
(14.06.2009, 01:16)

Isabelle: Great script! The only problem I'm having is that I made a pop up and now the two pages don't show exactly in the middle, I mean, when the first page flips over, there's more space to the left. Any suggestions?
(19.06.2009, 00:56)

Isabelle: Me again! I have another problem: I can't see the entire album (except for the last one) on IE explorer. But I can on Firefox and Opera. But I can see the on you have on the site on IE. All I did was substitute the text for my pics and I changed their size. I also removed the text on the pictures. any suggestion on what am I doing wrong??
(19.06.2009, 04:59)

Isabelle: Problems solved!!!!
(19.06.2009, 19:05)

Jeff: Hey Will, love the script, and had a question on removing the page shading. Earlier posts state adjusting the alpha filter settings in the js, but when I do that, the whole left side (page) goes black. It looks great in everything except IE. Can you shed a little more light on how I can adjust that setting? Here is the line I'm editing: - original.style.filter ="progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=30, Style=1, StartX=80, FinishX=100, StartY=0, FinishY=0)";
(22.06.2009, 11:21)

Will: @Jeff, the "original.style.filter..." line is only there for ie6 which doesn't support png transparency. If your not worried about ie6 the comment(//) out the lines //if(document.all){ - //original.style.filter... - //}else{ and the closing brace} for the if statement.
(24.06.2009, 08:54)

Will: @Jeff-2, if you want to keep the filter modify StartX=80, 80 meaning start the shadow from 80% from left edge and continue to 100%(all the way). - Its a little tricky to explain: http://msdn.microsoft.com/en-us/library/ms532967(VS.85).aspx
(24.06.2009, 09:00)

Marko: Hi Will, love the script and thank you a lot for providing, however I'm facing a difficulty regarding Firefox 3 and IE8 where the pages are flipping very slowly. - - The issue is not that I have too many pages or additional functions slowing the site down considering I'm having this problem in the demo itself. - - Hard for me to understand especially considering that same demo works perfectly fine on your page which I'm viewing with Firefox 3.
(02.07.2009, 05:09)

Will: Hi Marko, agreed. Works fine for me in firefox and ie7, however somewhat slower in IE8. - If you click compatibility view in ie8 it runs better because its running under ie7 etc the. - Not sure what can be done for ie8 as the code is already cross browser valid, so i can only guess without completly disecting and testing under ie8 as to wether its ie8's javascript engine or something else.
(02.07.2009, 20:22)

Matthew: Hi there! I just found this, and I'm stoked to see a JavaScript alternative to the Flash page flippers. Great work.
(08.07.2009, 16:46)

Will: Due to IE8's js engine rendering slowly i have started on a newer version - which is still a work in progress - that utilises the css "clip" property to cut down on the number of animations required. - Ajax calls are used to dynamically load the html content of each page and cut down on the amount of created html element. Iframes could be used but unfortunatly FFox displays a flicker when animating iframes. - Here's a demo: http://coastworx.com/divs/clip.html
(09.07.2009, 11:36)

Sonya: Hi Will! Thanks for the script. I have a book that's got about 80+ pages, and moves slowly on some browsers. I saw in previous comments that too many pages can be a problem (due to rendering the animation?). Any chance that reducing the sizes of the background image files would help matters? Thanks for any input.
(20.07.2009, 18:01)

Will: Hi Sonya, try it with the background images removed and see how it goes, but yes 80 is really a large load on the browser even without images. The book is best with less than 20 pages. - Ideally an ajax solution is required for larger books.
(21.07.2009, 21:52)

Mei: Thanks for the greate script, Is there any way to RTL it (paging from right to left for hebrew and arabic)?
(22.07.2009, 10:36)

Will: @Mei,i guess you could setup the script to open at the last page. See previous posts regarding autoFlip();
(22.07.2009, 10:44)

marry: hi , if i want to link up my page top menu to flip page than how can i give link for e.g. - - home page is on my top menu if i have to link without using dropdown to give it href link then how it can possible please replay............
(08.09.2009, 05:00)

marry: hi,i m using this filp book for dynamic content from mysql so can u give me suggestion how can i give paging in page or how van page height is taken auto so page is go long or no need for paging so please reply me....
(08.09.2009, 09:43)

Will: http://www.coastworx.com/bookflip.php?autoflip=5
(08.09.2009, 10:44)

new guy 01: wow will must be hard. ill find this very useful thanks
(21.09.2009, 20:09)

Ivneet Singh: WOW, ITS NICE
(19.10.2009, 04:01)

Kristopher: Hey Will, - - Awesome work! How to I link an <a href> to autoflip directly to a certain page within the book. I see the bookflip.php?autoflip=5 link for PHP, but is there a way to do it for basic html links?
(30.10.2009, 10:59)

Will: @Kristopher: <h1><a href="http://google.com" target="blank" onclick="autoFlip(5);return false;">Aye-Aye Captain.</a></h1> - <input type="button" value="Inputs/buttons are ok too" onclick="autoFlip(5);">
(30.10.2009, 20:39)

Corey: This is awesome. I'm wondering whether it's possible to tweak this so that when using an HTML link to jump to a page, it can animate to that page instead of just jumping there.
(07.11.2009, 18:20)

Will: @Corey, use doIncrementalAutoFlip = true;
(08.11.2009, 23:19)

Corey: Thanks, Will! Unfortunately, that seems to make the HTML links buggy; you have to click on the link more than once to get to the desired page. Check out the sample I've linked in my name - the only alterations from your demo are the addition of a link to page 10 in two places: one in the text on the book's front page, and one underneath the book. They both behave identically, and the problem persists across all browsers. (I tested in IE8, Firefox 3, Chrome 3, Opera 9 and Safari 4) Confounding!
(09.11.2009, 16:42)

Anonym: In fact, I've discovered that this bug also affects the drop-down page selector; if doIncrementalAutoFlip=true, you have to select the same page several times before it will turn all the way there. For example, if I try to jump right to page 14 with the drop-down, it stops at page 7. I select 14 again, and it stops at 11. Select 14 a third time and I finally get to the page 13-14 spread (though the drop-down reads "13" unless I select 14 one more time). Is anybody else seeing this behavior?
(10.11.2009, 01:16)

Will: Its not a bug as such! - The script is undermined by the browsers speed capability...what you are seeing is the browsers js-engine failing to keep up with the script. - FireFox keeps up, but since the inception of IE8, IE fails to keep up with basic page turn animation and in Compatability mode IE7 now has issues keeping up too. Script is fine in IE6; IE7(stand alone) and FireFox.
(10.11.2009, 06:56)

Corey: Thanks, Will. I had tested in every browser and saw the same behavior, but I had them all open at the same time. When I test with one open at a time, Firefox and Opera work much better (but still hang a page short now and then); IE8, Safari and Chrome still hang the same way. Ah well. I don't suppose it could be gotten around with a tweak that would animate directly to the chosen page rather than flipping through all the in-between pages?
(10.11.2009, 14:46)

Will: You mean like the default setup doIncrementalAutoFlip = false is the best i can do. - For those interested here is barebones example using Ajax and animation is far better(opera is an issue) across browsers. - Note, for ajax function, some browsers need script to run via a server. - - http://coastworx.com/divs2/clip.html
(10.11.2009, 21:24)

Anonym: Awesome. I await the full bells'n'whistles Ajax version both eagerly & patiently. :) You are doing great work providing something I've been looking for for ages.
(10.11.2009, 21:45)

Abitha Banu: hi!Thanks for your Code.Am using big image which size aroung 655kb.Is it possible to put loadng message on each page or loading message untill all pages(42) get downloaded? pls guid me.
(23.11.2009, 09:04)

Swetha: Hi Thanks for your wonderful script....I need one help. I want to start the flip automatically. But i don't how to set this..Please help advance thanks for your help...
(27.11.2009, 21:11)

Jim: Any idea of how to have the pages flip automatically? I would like to have a 5 second delay and then the page flips. Is this possible? Thanks in advance for any help.
(14.12.2009, 18:49)

Brad: Anyway to have a slight curl at top end of the page ?
(23.12.2009, 10:22)

Anonym: "Anyway to have a slight curl at top end of the page ?" - - By putting a curl yourself on the corners of your background graphics.
(25.12.2009, 13:00)

Jazzer: I just downloaded this and congrats Will...nice work. No complaints here just wondering how I can pad the text on the pages so they don't run right to the edge or center. Say 10 pixels left and right on each page would work fine. Thanks. - Jazzer
(11.01.2010, 22:43)

Anonym: Jazzer, just use CSS formatting on the page divs or, if CSS ain't your style, add a table with cell padding inside each div. Pretty easy to Google it if'n you don't know how. The great thing about Will's script is you can do pretty much anything to the page divs that you can do with normal HTML or CSS.
(12.01.2010, 03:04)

Jazzer: I'm fine with html and OK with css but after several hours of attempting to add some padding to each page and searching online for answers I came back here to ask.
(12.01.2010, 13:46)

Anonym: Weird. So adding style="padding-left:10px; padding-right:10px" to the page divs (or a class defined as such) didn't work for you, and neither did adding a table where cellpadding="10"? Dunno what to tell you; works just fine for me, and Will hasn't been commenting here lately.
(13.01.2010, 23:08)

Jazzer: Well then I guess you have nothing more to tell. I "understand how" to write the code but regardless of where it's applied I am not seeing the end result of padding. I am refraining from adding tables. I'll move along now.
(14.01.2010, 13:41)

Will: Jazzer, adding padding to a div is the same as adding padding to any div eg.padding:10px; its up to you however to ensure you page contents stay within the confines of the page width & page height(pWidth, pHeight) settings. I'd recommend a child div and apply the padding to that: <div name="Home" style="background:#055123 url(spongebob300/page0.jpg);color:#ffffff;"> - <div style="padding:10px;" align=center> - <h1>Are You Ready Kids?</h1> - </div> - </div>
(14.01.2010, 19:50)

Michael: Awesome script Will I'm not so hot on the coding side but im trying to get into it. the problem im having is when i add new pages it wont allow me to turn the page when i click on it. i know this is a bsic question but can you help please. thanks
(16.01.2010, 12:43)

Michael: And if it helps in the drop down menu i can see the page 10 but it only goes as far as page 9 and then stops and displays page 9 in the drop down menu :s
(16.01.2010, 13:28)

Will: I can only guess, go back to the original script to eliminate all introduced errors and add you new pages one by one until the problem presents itself.
(16.01.2010, 21:41)

Michael: Thanks im not sure why but i seem to have to add 2 pages as opposed to 1 to make it work. Although I think that make sense in my head all of a sudden. Thanks
(18.01.2010, 19:06)

Josh: Hey, I've been working with this code for a week and i got a book with 35 pages. For some reason it won't display anything past 15 either in the drop box to select a specific page or when you hit next to go past page 15. Any clue why?
(08.02.2010, 13:50)

Will: check your html code for each page for properly closed divs etc..., there is no limitation inbuilt, only browser limitation.
(10.02.2010, 09:42)

Weidong Zhang: Will, you are definitely a genius. I spent days looking for a JS page flip plugin, and yours is definitely the best. I wonder if your lib can support one page one screen flipping effect, besides the default two page mode. Thanks for your time
(18.04.2010, 13:30)

Will: I'm not exactly sure what i "one page one screen flipping effect" is?
(18.04.2010, 20:51)

weidong zhang: Will, what I mean is the iPad iReader effect, which has one page taking up the screen center at one time.
(19.04.2010, 12:53)

Hamdy: Thank you Will very much for your professional code. - The thing that is missed and will make the script very good is to let the user selects if he wants to flip the book from left to right or from right to lift.
(29.04.2010, 17:09)

Will: Thank you. This was raised previously and addressed.
(01.05.2010, 03:01)

Anonym: Thanks for this great code, I'm not into programming and I wanted something without Flash. I found a way to make it autoflipping by adding "window.setInterval('gonext()',1000);" at the end of the ini, but I can't find how to stop the autoflipping while the mouse is over the book (and restart when it is out). I tried many things and I guess it's a simple javascript code... Anybody to help me ? Thanks!
(12.05.2010, 10:14)

Pat: Will, what is the procedure to remove the shadow on the left side of the left page?
(20.05.2010, 19:29)

Will: pageShadow=true; //true or false, display shadow along the length of inside right page
(21.05.2010, 17:13)

Warren: Where can I locate the "book" graphics to use on my with with this awesome code?
(29.05.2010, 12:41)

Mark: I am new to javascript... how can I change the pWidth so all of my images show up completely? (they are all cropped) - Thanks!
(29.05.2010, 18:37)

Warren: Does anyone know where to edit the X and Y coordinates to nudge the location of the pages? I am trying to match my pages up to the graphic behind them.
(01.06.2010, 11:38)

Michael: Is there a way to make the individual pages display full on the html page so that I can individually edit them? I only see a narrow column with the tops of each page showing
(02.06.2010, 09:57)

Will: The zip has been updated to include "read me" type help file.
(03.06.2010, 02:19)

Michael: Thanks but for some reason, I'm still only seeing a small portion of the top of the page rather than the complete jpg. I went in and adjusted the code accordingly but it's still not letting me see the full image. Love the flip though!
(03.06.2010, 08:33)

Michael: To continue my problem from above, I would like to see the full page so that I can add a external link when necessary but when I only see the top bit of my image, I can't see where to place text further down on the page.
(03.06.2010, 10:00)

Will: Michael, please read the help file pertaining to displaying a page div as a stand-alone html file. Have you added the width and height dimensions to the div? Some basic html skill is required, but its not my purpose.
(03.06.2010, 11:23)

Constantin: Great script! Thanks!
(20.06.2010, 14:51)

LunaPro2333: Would I be able to charge someone if I used this script on a XHTML page I develop?
(29.06.2010, 23:39)

Will: No you cannot "sell" the book flip. Charging someone to install it is a separate matter however.
(29.06.2010, 23:44)

Constantin: Hi! I'm using the script only with images(51). Sometimes, when I'm on the first page and choose the last one from the select control, it stops 1-2 pages behind in Firexot and about 10 pages in Safari. This happens only when doIncrementalAutoFlip is set to true. - Any ideas? - Thanks!
(03.07.2010, 03:57)

Constantin: Please ignore the previous comment. I didnt't see it was addressed before.
(03.07.2010, 04:05)

pautrat: hi, it is possible to do an autoplay ? thanks
(03.07.2010, 11:24)

thomas davis: how can i add thumbnails to this effect
(13.07.2010, 15:03)

thomas davis: the javascript is cool now is there anyway that i can change the selection option to display little pictures of the page instead of the name or the page number.....in other words can i change the select tag to display thumbnails of the page.i really need help with this
(14.07.2010, 07:02)

thomas davis: will pls i really need to add this
(14.07.2010, 08:18)

Heiko Prein: Hello! I just found your exciting website with this version of bookflip. - My customer would like to have his website - which is flash - also put into html! For smartphones and computers without using flash! - So, I would like to use your scripts and work in html! - Could You please check it and tell me what I would have to pay! - Thank You!!! - Kind regards, - Heiko (Germany, Nuremberg)
(14.07.2010, 09:49)

timmy: wonderful script dude you are of the chain but how do i replace the name of the page selector in the flipSelect to img..this way it would display images instead of the names.
(15.07.2010, 09:49)

tony ayling: Hi Will - excellent - thanks. - I have used the script on http://mydummysite.com.au/teeflip.html#q1?autoflip=8 - I have a small annoying problem htat i cant seem to fix - probably css - if you flip the book forwards all is fine but backwards - it stretches to the far left of the screen and not the page div or width. Would really appreciate any suggestions to fix. - Thanks for the great work. - Kind regards - Tony Ayling
(20.07.2010, 19:51)

Will: @tony ayling; http://validator.w3.org/ - - Line 118, Column 6: end tag for element "div" which is not open
(21.07.2010, 02:18)

JK: Hi Will, this is excellent! Is there anyway to make this work without having the inline JavaScript on the html page? So all JS in one external file? Thanks
(23.07.2010, 05:31)

JK: ignore me ... figured out the external JS file needs to go at the bottom of the html page to work.
(23.07.2010, 05:58)

Tony: thanks for the validator tip Will but I can see the problem - no extra tags.
(27.07.2010, 05:08)

Tony: sorry - that is - I cant see the problem.
(27.07.2010, 05:47)

Will: Well, something is not right in your implementation. Perhaps you should go back to the original scripts, I'll have a quick look in the meantime.
(27.07.2010, 08:15)

Will: Replace your bookflip.js with original from the download.
(27.07.2010, 08:44)

Maura: Hello, Great script! Is there a relatively painless way to get the 'book' to center on its non-spread closed-cover view and then slide to re-adjust to center once opened to first spread view? (as opposed to having the cover appear off-center on the right in the initial display) Thanks for any pointers on how to cleanly handle this.
(16.08.2010, 17:01)

maura: ...nevermind. It's not super pretty but I got a centering effect working by conditionally adjusting the myBook.style.left property in conjunction with the ini & gonext/goprev handlers. Thanks anyhow!
(16.08.2010, 17:30)

maura: To clarify on licensing, if a Commercial License is purchased, we are assuming it's within bounds to make minor adjustments/customizations to the code as needed, correct? Thanks!
(18.08.2010, 15:17)

Will: Certainly.
(18.08.2010, 23:45)

Robert: Can this script be used with Adobe Acrobat PDF Files? I want to create a page flipping effect for my pdf files that on the web. Would this work?
(20.08.2010, 13:27)

Will: @Robert: No, you'd have to make an image from each page of the PDF.
(21.08.2010, 00:26)

Dan: Fantastic script! Thank you!! - - Works great for us...and tested in IE 8, FF 3.6.8 and Chrome 5. Pleasantly and delightfully surprised how well it worked cross browser.
(23.08.2010, 16:59)

rc: Hi, - Can this be used in wordpress pages & posts? - thanks
(30.08.2010, 20:34)

Adrian: Can i be default make it load page 4 (example) when the page is loaded ?
(05.09.2010, 09:28)

Adrian: I found the solution. Sorry by adding autoFlip(4); tq
(05.09.2010, 09:43)

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