more Venn Diagram humor. http://ow.ly/31VgG
[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).
- – -
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.)
include the pageflip.js:
one small variable to control how fast transitions happen:
/* pageflip timing */
var flipTime = 1000; // in ms [recommended 1000]
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;">
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.
share and enjoy.
really. it’s Creative Commons.
Which gets more envious stares in the mall food court? A bag from the Apple store, or one from the Godiva store?
If ignorance is bliss, then why are the people on Fox News always so angry?
Haven’t run hootsuite since installing tweetdeck. Rebooted my Droid and suddenly got a bunch of hootsuite notifications. WTF?
Good: when you take the jeans you haven’t worn all summer out of the closet and they still fit.
Better: when there’s money in the pocket.
i can finally complete my “2001″ playset! http://ow.ly/2W0ZI
Surprising number of geek t-shirts at the fair yesterday. Also, neck tattoos.
Anybody headed to the fair this afternoon?