Speed:
Book Flip
Are You Ready Kids?I can't hear you.Aye-Aye Captain!OHHHHHHHWho 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 PantsSponge Bob Square PantsSponge Bob Square PantsSponge BobSquare Paaaaannttss!!!
DescriptionDecember 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 ExamplesBookflip 4 exampleBookflip Shrek 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 ExamplesMyer CatalogFun with Borders Gratitude 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:
Commentscaroline: Hi, Will, was wondering if I can solve the issue of the pages flipping too slowly on Safari and IE9? Works perfectly in Firefox. I tried changing the speed, but it didn't make a difference [only Firefox seemed to show the change]. Will: try increasing var numPixelsToMove = 20;//? caroline: I reduced pages and now Safari is working fine. IE9 doesn't seem to be working well for your books either. Sasha: Hi, again!!!
Sean: Hi Will. I went looking for a flipbook that didn't use flash and yours is the best I could find, by far. On (10.11.2009, 20:24) you posted a link to an ajax version on this script. Do you by any chance have a newer version, and could you zip the html with the other assets and post a link please? Thanks Will: I'll be releasing the first draft of an updated version in the next week or two. Dont see a need for ajax though at this stage. Will: @Sasha, newer version will start open with both left and right pages displayed by default. for those who dont want it they can leave the page blank or use it for instructions etc. shalom_m: Great script!
Prashant Agarwal: flipping speed is very slow onIE9 Will: Will be fixed in new version out soon. Will: New Version V4.0 uploaded. Prashant Agarwal: Thank You ! Bill: Hi, love the code but I'm having a bit of trouble. I'm working in wordpress and I'm using the bookflip inside a colorbox. when I open the colorbox, bookflip appears but without any images. When I remove the "style="display:none;" from the "myBook" div, all of the images show stacked on a single page. Any help would be appreciated. Bill: Never mind, got it. Kudos on the code. kyle: Will, this is very nice, thanks. Downloaded the latest and created a link with the following href: javascript:autoFlip(0); This works fine. However, and the same is true of the select menu, when you go to a higher page and then a lower, it always produces a right-to-left animation and not a left-to-right animation. Any suggestions? Thanks. Will: @kyle, yeah knew about it, thanks for reminding me. Brain was fried at that point. function autoFlip() is now updated. check the source or re-download the zip. thomas: Hi, this seems to be a nice script, but when i put it in my page the page flip effect is not working. I´ve read the instructions and i compared my code to some of the other links on this site, but i can´t find the reason for this misbehaving.
Will: @thomas, re-insert allowNavigation=true; and set it to false Will: thomas has found a bug if the flip selector that holds the drop down list is removed. Please update bookflip.js or replace in bookflip.js 2 x instances of document.getElementById("flipSelect").selectedIndex=selectIndex;
thomas: Thank you. It works.
Norbert: Hi Will, great code - thanks a lot. I've implemented it 1.5 years ago and it worked just fine. Now I've pulled the latest version to get better performance on newer browsers (e.g. iPad) and noticed behavior of the book changed as it does not start with the cover page any longer but shows two pages - a problem if somebody uses background pictures like I do... Is it possible to modify the script so it will start with cover page as in the past and what do I need to modify?
Will: @Norbert, leave the first page blank. An empty div is all thats needed. Norbert: Hi Will, thanks a lot for your fast reply.
Will: ok,from memory, in the script function ini() where it creates the pages, there is a line that sets the background color...style.backgroundColor="#ffffff", either remove that line or set it to transparent. Norbert: Will, thanks it starts the right way now.
Philip: Hello Will,
Michael J Salo: hey Will, bookflip v3 worked great and we're trying out the new v4. I'm experiencing an issue where page 2 displays wrong. All pages beyond page 1 show on top of each other on page 2. autoFlip(0) seems to set it straight. How to fix without the autoFlip. Thank you. Will: @Norbert, I don't have a simple solution to your situation. I'll need some time if I can. Will: @Philip, Gratitude is an advanced implementation of bookflip script. You are welcome to copy the source code however the images are not mine to give free use to anyone. Will: @Michael J Salo, Usually this is an indication of a html code error. Check your code for properly closed valid elements. Other than that I need to see it. Michael J Salo: Will, found the problem. HTML validates fine. I was able to narrow it down to use of z-index in the content. I got rid of z-index rules and this set it straight. z-index may have interfered with the Bookflip engine. Anyway thanks again for this app. Norbert: Hello Will, is it possible to create links e.g. within a text to jump to dedicated pages within the book - kind of bookmark functionality? Maybe a special usage of drop-down-menu functions?
Norbert: Hi Will, found it - autoFlip function.
Bobby: Hey Will, this is an awesome script, thank you so much for it! Is it possible to link directly to a page within the book - for example page3?
Bobby: Hi again, I just saw Norbert asked the same question and came up with the answer; it is indeed the autoFlip function.
Cammie: Yo Will, thanks so very much for this - been using flash turners up until now but with Apple and Adobe not playing ball have been looking for a suitable alternative. I have it working almost perfectly, one thing I am trying to do is change the button style, do I just assign a new CSS rule to the existing input button and place my new button as a background image? Thanks steve: Amazing script, easy and straight forward to figure out, thanks a bunch Will Will: @Cammie, you can change the css, or alter/remove the class from css style in trhe header and/or the button element. DIVYA: hi, can you send me the page flip code for unity script. Callum Burns: How would you get this: http://flowplayer.org/tools/demos/tooltip/any-html.htm to work in each page? It doesn't seem to work at all. Help! Thanks Will: @Callum, I don't do jquery. priya: Hi ,
Will: no, not as part of the release. You need a custom solution. Cammie: Cheers Will. Buttons working and am working on sitting it on a book cov design I did in ps. I am having a problem with the divs as not sure what all divs I should be containing within my (call it book frame div). I also am trying to make the last page transparent by using a PNG and it disnae seem to like that - it keeps replacing the transparent PNG with the 2nd last pg, my book is 58 pages but I need to make it 59 to get the last pages to turn. Back pg is pg58 and I make pg 59 blank Cammie: Also mate, sorry for being a pest but - is there a limit to the amount of pages as I saw somewhere back on this forum where to alter the bookflip.js file but those values aren't there in mine... Will: @Cammie, hi, transparency is an unsolved issue. See similar posts by Norbert.
Cammie: Hey Will, eventuallt managed to get round the transparency issue by making my final page image the same background as the cover image I have it sitting on. It works perfectly in Chrome, Safari and Firefox but for some reason pages don't show up at all in IE9. Is there a compatabilty problem with explorer? Thanks again for all your advice Will: @Cammie, send me a url where i can see it via the contact page. Cammie: ok mate its temporarily here: http://www.heggie5.webspace.virginmedia.com/mosLink.html
Will: @Cammie, you have js error due to : <script type="text/javascript"><!--
50 of 333 comments (part 1) [ » ] [ * ]
|