30
Oct 10

more Venn Diagram humor. http:…

more Venn Diagram humor. http://ow.ly/31VgG


27
Oct 10

jQuery Pageflip updated

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


26
Oct 10

“Did you poop today?” #thingsY…

“Did you poop today?” #thingsYouAskAToddler


22
Oct 10

Which gets more envious stares…

Which gets more envious stares in the mall food court? A bag from the Apple store, or one from the Godiva store?


21
Oct 10

If ignorance is bliss, then wh…

If ignorance is bliss, then why are the people on Fox News always so angry?


21
Oct 10

Haven’t run hootsuite since in…

Haven’t run hootsuite since installing tweetdeck. Rebooted my Droid and suddenly got a bunch of hootsuite notifications. WTF?


21
Oct 10

Good: when you take the jeans …

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.


19
Oct 10

i can finally complete my “200…

i can finally complete my “2001” playset! http://ow.ly/2W0ZI


18
Oct 10

Surprising number of geek t-sh…

Surprising number of geek t-shirts at the fair yesterday. Also, neck tattoos.


17
Oct 10

Anybody headed to the fair thi…

Anybody headed to the fair this afternoon?