[oops!]: it looks like something i did in 0.3 has broken IE. I’m trying to track it down now, so if you’re looking to implement the pageflip, use 0.2 instead. In the meantime, if there’s a CSS savant that can figure out where it’s breaking in IE, please let me know.
[fixed!]: Thanks to Scott Reston for the help with my CSS missteps. This also revealed another problem with the shadow effect in IE, which I’ve disabled in the current version, 0.3.2. This version also incorporates a bugfix from Rhapsody (See comments below).
– – –
again motivated by a client’s request, i took another look at my javascript pageflip effect, and updated it to use the much more efficient jQuery library instead of my own hand-rolled animations.
the previous version only worked with images as the page contents. this current version works with arbitrary HTML, inside DIVs.
it’s all pretty well commented, but here’s the gist of it:
include jquery on your page (latest should work fine. i built and tested with 1.3.)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
include the pageflip.js:
<script type="text/javascript" src="js/pageflip.js"></script>
one small variable to control how fast transitions happen:
<script type="text/javascript">
/* pageflip timing */
var flipTime = 1000; // in ms [recommended 1000]
</script>
and appropriate stylesheets. i also utilize Eric Meyer’s reset.css to make things easier on myself. this is optional.
<link rel="stylesheet" type="text/css" href="style/reset.css">
<link rel="stylesheet" type="text/css" href="style/pageflip.css">
finally, in the content of your page, create a div for your “book”, and one for each of your pages:
<div id = "pagesContainer">
<div class="pageContent" style="width: 300px; height: 400px;">
</div>
...
</div>
IMPORTANT: you must set the height and width of the first page DIV. the size of all your pages are based on this.
you’ll want an even number of total pages.
you can see the working demo here: clickheredammit.com/pageflip and download the complete kit here: pageflip-0.3.zip
share and enjoy.
really. it’s Creative Commons.
Hi,
I’d like to use the 0.3 version of PageFlip but there seems to be something wrong.
In pageflip.js there is a ‘,’ on line 71. It ends with ‘,’ but it’s the last item in the array.
Further I can’t get it to work in IE8. It works in FF but not in IE8. Can you help me with that? In IE8 I only get a gray rectangle.
ah. that damned comma. i swear i fixed that at least once before. if you remove that, it will probably fix some of the problems you’re seeing in IE.
Hi There,
The working demo appears to be 0.3.2, which is working in IE and FF but I don’t see a place to download it? I tried 0.3 but it doesn’t work in IE.
Where can I get a copy of 0.3.2? Thanks!
@april – download link updated. sorry about that.
Hi there,
first of all: that’s the best css/js based pageflip script so far – the html-insertion is amazing and i didn’t excpect the pageturn-effect could be done that smooth without canvas or similar technique.
I got two simple but mindkilling questions:
1. How can I jump to a certain page with a link? (for example form page 2 to page 7)
2. How can I place the “jump-to-next-page”-link on a certain area of the div-container, so that i can use forms or external links within the html-code, without a page turn?
thanks so far and keep up that good work!
Cheers
Kris
Hey there,
I wanted to drop a note here giving you the heads up on a little project I just finished. I just released a jQuery Plugin called Viewbook, which is similar to your pageflip script. I had originally based my project off of yours, so I have included a link and recognition in my code, as follows:
* Originally based on the work of:
* 1) Charles Mangin (http://clickheredammit.com/pageflip/)
If you are interested you can check it out here http://builtbywill.com/code/viewbook/
Thanks and have a great day!
Will