Great News! I am currently available for freelance work.

quicksand

Jquery Quicksand

I love Jquery like a fat kid loves cake. So when I stumbled upon this rockin’ sorting plugin, I was obviously pretty pumped. This is great plugin for portfolios (I’m using it on this site), or to just sort any data by category with a nifty animation. See a demo, and download the script here .

How it works

At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. You can do it in a couple of ways:

  1. Use plain HTML, like an unordered list.
  2. Download data by an Ajax call
  3. Transform HTML items by JavaScript (for example, sort them differently)

Calling

$('#source').quicksand( $('#destination li') );

This will work for the following HTML:

<ul id="source"> <li data-id="iphone">iPhone OS</li> <li data-id="android">Android</li> <li data-id="winmo">Windows Mobile</li> </ul> <ul id="destination"> <li data-id="macosx">Mac OS X</li> <li data-id="macos9">Mac OS 9</li> <li data-id="iphone">iPhone OS</li> </ul>

Please note that data-* is a perfectly valid HTML5 attribute. If you’re using older doctype, you can use a different attribute or even a custom function to identify unique elements. See these examples for more.

First container (source) is visible to the user. Second container (destination) is provided as the first argument of Quicksand.

You need data-id attributes so that the plugin can identify the same elements within source and destination collections. If elements exists in both collections (the same data-id), it’s the same to Quicksand.

If you want to include a callback function, add it as a last argument:

$('#source').quicksand( $('#destination li'), function() { // callback code });

Leave a Reply