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

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

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

caroline: 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].
(28.11.2011, 20:21)

Will: try increasing var numPixelsToMove = 20;//?
(29.11.2011, 03:11)

caroline: I reduced pages and now Safari is working fine. IE9 doesn't seem to be working well for your books either.
(29.11.2011, 14:14)

Sasha: Hi, again!!!
Thanks for aswearing.Another question:I want to prevent cover in my book,so in the beginning I see 1-2 pages.How can I do it? Thanks
(30.11.2011, 02:33)

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
(30.11.2011, 06:47)

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.
(30.11.2011, 20:28)

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.
(30.11.2011, 20:31)

shalom_m: Great script!
I have downloaded and installed the script and tested it on a site I am working on.
It works fine in all cases except on IE9.
The specific problem in IE9 is that if you use the dropdown select function, the right page functions well. However the left page gets locked onto a page3 and will not budge - even when using either the navigation buttons or the click on page option.
Please advise.
(04.12.2011, 13:21)

Prashant Agarwal: flipping speed is very slow onIE9
(06.12.2011, 03:21)

Will: Will be fixed in new version out soon.
(07.12.2011, 18:30)

Will: New Version V4.0 uploaded.
(07.12.2011, 23:56)

Prashant Agarwal: Thank You !
(09.12.2011, 04:45)

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.
(12.12.2011, 09:17)

Bill: Never mind, got it. Kudos on the code.
(12.12.2011, 10:55)

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.
(12.12.2011, 14:07)

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.
(12.12.2011, 15:21)

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 you please have a look at it under:
http://www.grosfotografie.de/grosfoto/1d-hochzeitsalbum.html
I also uploaded a page reduced to the Book flip div:
http://www.grosfotografie.de/grosfoto/1d-hochzeitsalbum2.html
(15.12.2011, 08:15)

Will: @thomas, re-insert allowNavigation=true; and set it to false
(15.12.2011, 21:37)

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;
with
if(allowNavigation && document.getElementById("flipSelect")){
document.getElementById("flipSelect").selectedIndex=selectIndex;
}
(15.12.2011, 21:54)

thomas: Thank you. It works.
<a href="http://www.grosfotografie.de"> http://www.grosfotografie.de/grosfoto/1d-hochzeitsalbum.html</a>
(16.12.2011, 06:02)

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?
Thanks a lot!
(07.01.2012, 16:33)

Will: @Norbert, leave the first page blank. An empty div is all thats needed.
(08.01.2012, 01:02)

Norbert: Hi Will, thanks a lot for your fast reply.
I tried this already but even with an empty div a blank page is visible - covering my background picture. So
I tried to implement a page showing the same as
the background picture but this is also not a perfect
solution as I get an offset when I resize the browser
window...
(08.01.2012, 06:45)

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.
(08.01.2012, 07:27)

Norbert: Will, thanks it starts the right way now.
The only problem is, when I go back to close
the book the old page information is not erased and still visible.
So I cannot 'close' the book, neither on the
first nor on the last page as it still shows
the page content from the previous double page
in the area where it should be transparent.
(08.01.2012, 09:54)

Philip: Hello Will,
I have download flipbook zip file. But couldn't find Gratitude kind of flipbook in that. How do I build a flipboook similar to Gratitude.
Thanks.
(11.01.2012, 10:40)

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.
(12.01.2012, 15:34)

Will: @Norbert, I don't have a simple solution to your situation. I'll need some time if I can.
(12.01.2012, 19:13)

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.
(12.01.2012, 19:16)

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.
(12.01.2012, 19:25)

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.
(13.01.2012, 11:06)

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?
Thanks a lot!
(13.01.2012, 15:11)

Norbert: Hi Will, found it - autoFlip function.
Anyway, thanks for the great script!
(13.01.2012, 16:41)

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?

I would like to include an index on the first page with links to different pages..

Thanks!
(18.01.2012, 06:06)

Bobby: Hi again, I just saw Norbert asked the same question and came up with the answer; it is indeed the autoFlip function.

Awesome script!!!!
(18.01.2012, 06:10)

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
(26.01.2012, 05:21)

steve: Amazing script, easy and straight forward to figure out, thanks a bunch Will
(26.01.2012, 16:38)

Will: @Cammie, you can change the css, or alter/remove the class from css style in trhe header and/or the button element.
(26.01.2012, 18:13)

DIVYA: hi, can you send me the page flip code for unity script.
(30.01.2012, 08:19)

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
(30.01.2012, 16:13)

Will: @Callum, I don't do jquery.
(31.01.2012, 06:30)

priya: Hi ,
Is there any possibility to display the text without div , so that when the text exceeds the page height it will be automatically rendered to next page. Thank you
(01.02.2012, 01:39)

Will: no, not as part of the release. You need a custom solution.
(01.02.2012, 05:49)

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
(01.02.2012, 06:47)

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...
(01.02.2012, 06:48)

Will: @Cammie, hi, transparency is an unsolved issue. See similar posts by Norbert.
There is no page limit, but be aware that all pages/images are loaded into the users browser at once so the larger the content the heavier the load on the users CPU and browsers Javascript engine. Just imagine all your pages/images laid out down the length of page & if that is an acceptable page size/load.
(01.02.2012, 16:06)

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
(03.02.2012, 01:58)

Will: @Cammie, send me a url where i can see it via the contact page.
(06.02.2012, 08:29)

Cammie: ok mate its temporarily here: http://www.heggie5.webspace.virginmedia.com/mosLink.html

As I said works spot on in Safari, FF and GChrome just on my wifes laptop using IE9 I noticed it just didn't work. I also have it on the other book link on that page (this one has the red folder background): http://www.heggie5.webspace.virginmedia.com/mikesLink.html
There is also a problem with my horizontal nav in IE9 which I am currently trying to solve...
(06.02.2012, 13:03)

Will: @Cammie, you have js error due to : <script type="text/javascript"><!--

</script>
</div> <!--[END of PAGES div-->

I havent tested on ie9 as i need to borrow a win7 notebook however I doubt it is a compatability issue. Clean up your html code and make sue it is valid rather than all the crap ps spits out. See how that goes. BTW, I trust the link back to this site will be reinstated until a licence is purchased.
(07.02.2012, 00:52)

50 of 333 comments (part 1) [ » ] [ * ]

Your comment:

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