Mental Hygiene the best thing you've done for your brain all day

[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.