The Sexy Curls jQuery Plugin!

Follow Elliott on Twitter! Follow me on Twitter!

is an open-source jQuery plugin by Elliott Kember
which lets you share in the beauty of the page fold.
You want a demo page? You're looking at it. Go drag the fold →
The source code is available at GitHub.
The plugin now works in IE7. You can also now set it to curl automatically.
Read the full story about this plugin at Carsonified


First, make sure you're using jQuery and jQuery UI (version 1.5 works)
You'll need the resizable package in jQuery UI.
Then install the source code into a directory called turn in your public directory.
Insert this code into your page:

  <script type="text/javascript" src="turn/turn.js"></script>
  <link rel="stylesheet" type="text/css" href="turn/turn.css">

Then, create an element to show behind the curl.
Personally, I use an image of a code sample, but you can use whatever you like.

  <img id="target" src="turn/code.png">

Now, all you have to do is call the function like this:

    $( '#target' ).fold();

You should be set! Stand by for thousands of admirers.

Getting more awesome with it

Not exactly what you want? Huh? Well, luckily you're so awesome that I've included some options:

  // Default awesomeness
  var defaults = {
    directory: 'turn',      // The directory we're in
    side: 'left',           // change me to "right" if you want rightness
    turnImage: 'fold.png',  // The triangle-shaped fold image
    maxHeight: 400,         // The maximum height. Duh.
    startingWidth: 80,     // The height and width 
    startingHeight: 80,    // with which to start (these should probably be camelCase, d'oh.)
    autoCurl: false         // If this is set to true, the fold will curl/uncurl on mouseover/mouseout.

Feel free to mess with them and try and get it to work best for you.
If you're looking at the advanced options, you're probably a clever clogs anyway.

Who made this?

Elliott Kember did. That's me.
You can visit my site here.
It looks a lot like the site you're on now.

Please note:

This plugin is released under the MIT license.
That means you can do whatever you damn well please with it.
You can copy, modify, merge, publish, distribute, sublicense, and/or sell copies
You can even print it out and wear it as a hat if you like.
But please, use it wisely. If it starts popping up everywhere and becomes
“that annoying javascript thing”, I'll be very upset.

Turny image thing