11 APR

Simple jQuery Filtering using Quicksand

Please note: The Quicksand plugin currently only supports jQuery version 1.8.3 and below.

Carrying on from the first part of our Simple jQuery Filtering Using jQuery article we’re now going to spice up the transitions a little using a jQuery plugin known as Quicksand. The core HTML markup and CSS styling from the first part of the article are going to stay the same so if you have not already done so I suggest downloading the source files before progressing.

Screenshot 1

View post demo Download post source

You may notice when comparing the source files for the second part of our article that I have moved the CSS and Javascript from inline to their own files (all.css and main.js) to tidy things up a little. We then need to link to these files from within the “<head>” tags of our HTML document (shown in Step Two). As well as linking to our external CSS and Javascript documents we also need to make a couple more tweaks to the beginning of our HTML document.

Step One

For the Quicksand plugin to work correctly we need to reference a number of HTML5 tags throughout the markup, to do this we simply need to change the doctype of our html document to the HTML5 doctype – “<!DOCTYPE html>”.

<!DOCTYPE html>

Step Two

Before including our external CSS and Javascript files just yet we may as well download the required Quicksand files, we’ll then include everything into the top of out HTML document at once. First off the Quicksand script requires the jQuery Javascript library, we’ll include from Google’s hosted repository. Next we need to download the Quicksand script (jquery.quicksand.js), hosted by github. Finally, and optionally, we require the jQuery Easing Plugin, currently at 1.3. Create a new folder at the root of our application titled ‘js’ and save or copy the newly downloaded Javascript files (including our main.js) to here.

HMTL

<head>
<meta charset="utf-8">

<link rel="stylesheet" href="css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.quicksand.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>

<title>Simple data filtering using jQuery and Quicksand.js</title>
</head>

Step Three

To make sure Quicksand works with our HTML markup we need to make a few alterations from the previous tutorial source code. Keep the filterOptions ul exactly as we had it before. Next change the ourHolder div and corresponding div child elements into an unordered list. We also need to change the ourHolder id to a class.

HTML

<ul class="ourHolder">
	<li class="item" data-id="id-1" data-type="league2">
    <img src="images/accrington-stanley.jpg" alt="Accrington Stanley" />
<h3>Accrington Stanley</h3>
</li>
	<li class="item" data-id="id-2" data-type="prem">
    <img src="images/arsenal.jpg" alt="Arsenal" />
<h3>Arsenal</h3>
</li>
	<li class="item" data-id="id-3" data-type="league2">
    <img src="images/burton-albion.jpg" alt="Burton Albion" />
<h3>Burton Albion</h3>
</li>
  ...</ul>

You will notice from the above script snippet that we have some weird attributes within each li element; this is where our HTML5 comes in to play. Any attribute that starts with “data-” is treated as a smart storage area by HTML5, replacing the need for using class names and rel attributes for storing metadata to interact with Javascript. More information about the HTML5 custom data attributes can be found at www.html5doctor.com. For Quicksand to reference our ourHolder child li elements correctly each one must have a unique “data-id” attribute, then to ensure that the correct items are shown on filter remove our class and assign that to “data-type” (for example, in our first li element we have removed the league2 reference from our class and assigned it to the data-type attribute).

Step Four

After altering our HTML markup to work with Quicksand we need to update our CSS to reflect these changes. You may notice that we have added some default styling to the html, body tags, this is to ensure that the vertical scrollbar always shows, otherwise (like with any centred content with adjusting heights) the browser window resizes depending on the height out our container and whether a vertical scroll bar is required. This presents the user with a nasty jumping effect as the browser window resizes and the vertical scroll bar is displayed and hidden.

CSS

/*- GENERIC BODY STYLES -*/
html, body {
  height: 100%;
  margin: 0 0 1px;
  padding: 0;
}

...

/*- FILTER OPTIONS -*/
ul#filterOptions {
  width: 802px;
  height: 52px;
  margin: 30px 0;
  overflow: hidden;
}
ul#filterOptions li {
  height: 52px;
  margin-right: 2px;
  display: inline-block;
  float: left;
}
ul#filterOptions li a {
  height: 50px;
  padding: 0 20px;
  border: 1px solid #999;
  background: #cfcfcf;
  color: #fff;
  font-weight: bold;
  line-height: 50px;
  text-decoration: none;
  display: block;
}
ul#filterOptions li a:hover {
  background: #c9c9c9;
}
ul#filterOptions li.active a {
  background: #999;
}
/*- -*/
/*- OUR DATA HOLDER -*/
ul.ourHolder {
  width: 800px;
  height: 850px;
  overflow: hidden;
}
ul.ourHolder li.item {
  width: 200px;
  height: 200px;
  float: left;
  text-align: center;
  overflow: hidden;
}
ul.ourHolder li.item h3 {
  margin-top: 10px;
  font-size: 16px;
  line-height: 20px;
}
/*- -*/

Step Five

Our fifth step is to set up the Javascript file which will handle the Quicksand plugin.

jQuery

$(document).ready(function() {
  // get the action filter option item on page load
  var $filterType = $('#filterOptions li.active a').attr('class');

  // get and assign the ourHolder element to the
  // $holder varible for use later
  var $holder = $('ul.ourHolder');

  // clone all items within the pre-assigned $holder element
  var $data = $holder.clone();

  // attempt to call Quicksand when a filter option
  // item is clicked
  $('#filterOptions li a').click(function(e) {
    // reset the active class on all the buttons
    $('#filterOptions li').removeClass('active');

    // assign the class of the clicked filter option
    // element to our $filterType variable
    var $filterType = $(this).attr('class');
    $(this).parent().addClass('active');
    if ($filterType == 'all') {
      // assign all li items to the $filteredData var when
      // the 'All' filter option is clicked
      var $filteredData = $data.find('li');
    }
    else {
      // find all li elements that have our required $filterType
      // values for the data-type element
      var $filteredData = $data.find('li[data-type=' + $filterType + ']');
    }

    // call quicksand and assign transition parameters
    $holder.quicksand($filteredData, {
      duration: 800,
      easing: 'easeInOutQuad'
    });
    return false;
  });
});

I’ve tried to comment each action from within the main.js file to make it as easy to follow as possible. As you can see this barely resembles our previous Javascript code at all. On document load we start off by assign a “$filterType” variable so Quicksand knows what items it is handling from the offset. Next up we clone the “ourHolder” ul to use when a transaction is required. A listener is then added which is waiting for a click event to fire on the filter options links, when the event is fired we determine which link has been clicked and in-turn assign a “$filterData” variable to pass to Quicksand. The “$filterData” variable tells Quicksand what items are required which it is eventually called into action.

Have a go for yourself and let me know what funky interfaces you have created. I’ve not had chance to try Quicksand on a real world example just yet, but I’ll be sure to let you guys know when I have and show you how it turns out!

Tags: CSS, HTML, HTML5, jQuery, Quicksand, tutorial

Written by Stewart Doxey

Stewart is a web developer at Evoluted. He spends his days mixing HTML and PHP, with a sprinkling of jQuery into standards compliant, user friendly web experiences. By night he enjoys all the things a lad in his twenties should be enjoying. Stewart is once again the office's Fifa 11 Champion.

113 Comments

greymatters
April 13, 2011 at 4:29 am

Thanks for the Quicksand tutorial!

I wish I’d had it when I was building my real-world example: http://gmeshop.blogspot.com/

(The buttons below the slider filter and sort, and the Quicksand plug-in animates the changes in the slider.)

Semi-related note: If you feel you’ve been too headache-free lately, try merging Quicksand and a slider, even if they’re both in jQuery!

Reply
- team
  
  Stewart Doxey
  April 13, 2011 at 8:08 am
  
  Nice example! I haven’t had chance to try it in a real world scenario just yet. Your implementation works well within a slider!
  
  Reply
  - Stew
    April 09, 2012 at 8:11 pm
    
    Hi,
    I would like to add action mouseover, mouseout on li class item element like that:
    $(document).ready(function() {
    $(‘li.item’).mouseover(function(){
    $(‘div).show();
    }).mouseout(function(){
    $(‘div’).hide();
    });
    });
    
    but after sorting/filtering nothing happend. Could you help me ?
    
    Reply
    
    team
    
    Stewart Doxey
    April 13, 2012 at 5:14 pm
    
    Hi Stew
    
    As the initial elements are being cloned to create the animations a standard mouseover call will not work in this instance. To get around this you can use the jQuery .live() event handler.
    
    For example:
    
    $('li.item').live('mouseover', function(){ $('div').show(); }); $('li.item').live('mouseout', function(){ $('div').hide(); });
    
    I hope this helps.
    
    Stewart
    
    Reply
datampq
April 13, 2011 at 8:19 pm

thanks for the nice tutorial, found it better than the one on the script’s official page

Reply
Popcorn – Web Services
May 03, 2011 at 12:57 pm

Nice one..thanks!

Reply
Andy
May 16, 2011 at 4:55 am

nice one! any idea how to make an item part of multiple categories eg, premier league and london?

Reply
- team
  
  Stewart Doxey
  May 16, 2011 at 10:04 am
  
  Hi Andy, thanks for the comment.
  To make an item part of a multiple category select we’d need to add a new li element to the filter options ul (in this case) with the class london. Taking the Arsenal item as an example we can then add london to the data type parameter, giving us data-type=”prem london”. Lastly we have to make a small change to our jQuery script, on line 32 of the main.js file in the downloadable source.
  var $filteredData = $data.find('li[data-type=' + $filterType + ']');
  …changes to…
  var $filteredData = $data.find('li[data-type~=' + $filterType + ']');
  I hope this has helped, if you have any more queries then I’d be more than happy to help.
  Stewart
  
  Reply
  - Andy
    May 24, 2011 at 4:21 am
    
    Brilliant, thank you – works perfectly
    
    Reply
  - student
    July 04, 2011 at 4:18 pm
    
    Hi,
    
    If I want Arsenal to be appear both on “Premier League” and “Championship”. How to make of it? Is it something like this?
    
    and changes to…
    var $filteredData = $data.find(‘li[data-type~=' + $filterType + ']‘);
    
    Thanks
    stduent
    
    Reply
  - Mike
    February 08, 2012 at 1:41 pm
    
    Hi Stewart,
    
    First off great work, this is exactly what I was looking for. I’m curious, is there any way to make an item appear in more than 2 categories? The solution you gave for Andy on May 16th worked perfectly, but I’m looking to have items appear in more than just 2 filters, possibly up to 6. Example, the same item might appear in various filters “color”, “shape” and “size” . Any thoughts?
    
    Thanks!
    Mike
    
    Reply
    
    Mike
    February 08, 2012 at 1:50 pm
    
    RE: my questions, nevermind. I resolved the issue. Thanks again!
    
    Reply
Andy
May 24, 2011 at 7:20 am

One more question…
I am using a lightbox as the link for the images, but when the filter is applied the lightbox no longer works. I think it has something to do with ajax callback but don’t know where (or how) to make the jquery function work, any ideas?

Reply
- team
  
  Stewart Doxey
  May 31, 2011 at 9:57 am
  
  Hi Andy. Do you have a demo anywhere online of your predicament?
  
  Reply
  - Kevin
    June 01, 2011 at 3:11 pm
    
    Hey, I got the same problem as Andy, I use Fancybox as Lightbox at first, if I watch the Thumbs unfiltered everything works, but if I start to filter them it doesn’t work anymore.
    
    And if I go back (manually, and without refreshing the page) it doesn’t work till I refresh it again.
    
    Please contact me via my mail adress I left for this comment, my deadline for a clients website is on sunday this week.
    
    Thanks so far!
    
    Reply
    
    team
    
    Stewart Doxey
    June 01, 2011 at 5:25 pm
    
    I may of found a solution to your Fancybox issue. Quicksand clones items when it is animating, this causes them to lose their binding to the DOM. Due to this the items will lose their association with Fancybox. This problem is covered in the Quicksand documentation. You can use a callback to re-assign the items to Fancybox when each animation has ended.
    
    Good luck getting it to your client in time Kevin, cheques can be made payable to Stewart Doxey…
    
    Reply
    
    Kevin
    June 19, 2011 at 6:55 pm
    
    Hey Stewart,
    
    thanks, that was exactly what i was looking for and the matter was that it lost the connection to the DOM then, a few mins later it worked. Thanks a lot, the feature is not live in the version of the clients site actually but it’s nice to know for the next clients. Already made the cheque, hehe. Thanks a lot and sorry for my late response.
    
    team
    
    Stewart Doxey
    June 20, 2011 at 8:42 am
    
    That’s awesome news Kevin, I’m glad you’re all sorted!
sguy
May 25, 2011 at 5:27 pm

awesome work! IE compatible??

Reply
- team
  
  Stewart Doxey
  May 31, 2011 at 9:53 am
  
  Thanks for the comment. Yes, Quicksand does work in all major IE browsers.
  
  Reply
barney
June 28, 2011 at 3:47 pm

Thanks for the tut…ive tried to make one section active, rather than the default ‘all’ by using values sent via htacces rewrite. I can dynamically create the <li class="active" in the fliter options ul, however onload its doesnt sort…do you know of a little tweak?
Thanks in advance

Reply
Raul
June 28, 2011 at 6:32 pm

Not too familiar with jQuery but where does the callback go? Does it go in the actual plugin or does it go in a document ready function? Any samples would be greatly appreciated..

Reply
Greg
July 11, 2011 at 7:15 am

The css reset was useful, otherwise I had funky css during the animation, a long column for list items

Reply
casey
July 19, 2011 at 7:46 pm

Thanks so much!

Any idea how we would sort-filter by name or date?

Reply
- team
  
  Stewart Doxey
  October 28, 2011 at 5:40 pm
  
  This is a feature I’m am going to be looking at in my next blog post.
  
  Reply
Josh
August 13, 2011 at 9:31 pm

I can’t seem to get this going.

Reply
- Josh
  August 14, 2011 at 7:57 pm
  
  Solution was to move all .js files into a single file. I don’t know why, but that fixed it! Thanks for the tut.
  
  Reply
Anders Hansen
September 09, 2011 at 8:57 am

Hi.

Great work with the tutorial.

I’m working on setting this up for our product page. I’ve not yet implemented this, because i’m still trying to figure out if i can solve the following problem before i try implementing it:

I would make the sortable things clickable, which would lead to a new subsite with products on – which would work just fine. But if the user clicks “back” or backspace from the site and is moved back to the initial overview/filtering site, the filtering set by the user is reset as it isnt saved anywhere.

Any suggestions on how to get around this? Hope my example was understandable.

Any help is much appreciated.

Reply
daniele
September 25, 2011 at 7:44 pm

hallo the list is alphabetical order, how is possible to order by ID and not by alphabetical order? i see that if i enter in a single categoy and then i click ALL , the list is alphabetical again!!!

Reply
- team
  
  Stewart Doxey
  October 28, 2011 at 5:27 pm
  
  Hi Daniele
  
  My example only filters in alphabetical order as this is the way I have ordered the ‘li’ elements within the ourHolder ul. If you were to reorder the elements into ID order in the HTML this order will be maintained each time a filter is made.
  
  Thanks
  
  Stewart
  
  Reply
laptop alias
October 09, 2011 at 3:17 pm

I’d love to be able to get something like this working with the logic of multiple selects or checkboxes, so extending Andy’s idea one could select ‘Premier League’ AND ‘Championship’ within ‘London’.

I’m really dumb though so any pointers greatly appreciated.

Reply
- Daniel
  January 15, 2012 at 3:39 pm
  
  +1 for this one.
  
  Trying to do the same thing …
  
  Reply
  - Tine
    December 23, 2012 at 2:08 pm
    
    Has anyone figured out how to implement checkboxes?
    
    Reply
Andrew
October 14, 2011 at 10:09 pm

Would you have any interest in adding a 2nd layer of sorting to your example?

For instance, sorting whichever teams are displayed by number of wins and alphabetically.

Thanks for your tutorial!

Reply
- team
  
  Stewart Doxey
  October 28, 2011 at 5:17 pm
  
  Hi Andrew.
  I’ve had quite a bit of feedback that mirrors your request so I’m looking to bring out another part to the tutorial soon that will cover this.
  Stewart
  
  Reply
Jess
October 16, 2011 at 1:27 pm

Thank you so much for sharing this tutorial! Very well written and easy to follow!

I’m just having a little trouble making a callback…I’ve been trying forever to get it to work – but I’m completely lost with what goes where. I would be really grateful if you could help me out!

I’m using a simple jquery caption hover for the thumbnails (http://thirdroute.com/projects/captify/)

Reply
- team
  
  Stewart Doxey
  October 28, 2011 at 5:15 pm
  
  Hi Jess
  
  Thanks for getting in touch. To perform a callback you need to add an additional function to the .quicksand call (found on line 35 of main.js).
  
  For example:
  
  $holder.quicksand($filteredData, { duration: 800, easing: 'easeInOutQuad' }, function() { // call back code here alert('callback executed'); });
  
  Once the Quicksand transition is complete the callback function runs, executing whatever code you have assigned to the function.
  
  I hope this helps!
  
  Stewart
  
  Reply
  - Jenel
    February 08, 2012 at 2:02 am
    
    I love finding such helpful tutorials on the net! Thank you for sharing! It really helped a beginner like me out!
    
    I was just wondering….is there anyway to make the filter stay selected on a category if you leave the page and then return back? Is this even possible? I would appreciate any help!
    
    Reply
  - Geordie
    September 26, 2012 at 8:34 pm
    
    Thanks this was exactly what i was looking for !
    
    Great tutorial !
    
    Reply
jessicarosen
October 26, 2011 at 3:11 pm

How do I set it to open page to “Premier League” instead of “ALL”? Please help Thank you

Reply
- team
  
  Stewart Doxey
  October 28, 2011 at 5:07 pm
  
  Hi Jessica
  
  Thanks for the comment. One option is to add a faux click trigger that fires once the page has loaded.
  
  $("#filterOptions li a.prem").trigger('click');
  
  Add that line to the bottom of the main.js file, before the closing document ready tag.
  
  Stewart
  
  Reply
  - Dave
    January 16, 2012 at 9:17 pm
    
    Ah I’ve been looking all over for an answer to this! I’ve not updated the site yet but I am going to tomorrow. I’ve been wanting to have the page load with the just Appetisers displaying instead of the whole menu.
    
    Huge THANKS!
    
    Reply
  - Quirksmode
    April 04, 2012 at 7:01 pm
    
    This worked, but the problem is you get the animation each time the page refreshes. Is there a way to force this to happen on page load without the animation?
    
    Reply
    
    team
    
    Stewart Doxey
    April 13, 2012 at 5:33 pm
    
    Hi David
    
    As the Quicksand pluing requires all elements to be visible on the DOM when the plugin initiates I can’t think of a glamorous solution, without displaying the initial amination.
    
    Have you managed to find a work around?
    
    Stewart
    
    Reply
Leonel
November 15, 2011 at 10:52 pm

Hi Stewart,

Thanks for you great tutorial.
I use it in a wordpress page but, when I click on one of the options, the images move correctly but the names under each disappear.
What can I do ?

Many thanks!

Reply
- team
  
  Stewart Doxey
  November 17, 2011 at 10:28 am
  
  Hi Leonel
  
  This sounds like an issue with your HTML markup. If you haven’t already I’d try adding a height to each of your container elements that hold each items image and text.
  
  I hope this helps!
  
  Stewart
  
  Reply
  - Leonel
    November 17, 2011 at 10:41 am
    
    Hi Stewart,
    
    I solve the problem I had some cufon fonts, and after disable cufon it works.
    
    Thanks!
    
    Reply
Henry
November 28, 2011 at 5:01 am

Thanks a lot for this. Question: I am displaying a message in a div based off what is clicked with the following:

if ($filterType == ‘new_construction’) {
$(“span#list1″).show(“slow”);
$(“span#list2″).hide();
$(“span#list3″).hide();
}

It works well with several if statements but I would like a message to be displayed for the “All” category. How would I do this? I have tried using if ($filterType = ‘ ‘) but have been experimenting blindly.

Reply
- Henry
  November 28, 2011 at 5:15 am
  
  Nevermind, I figured it out. I basically overlooked something too simple to describe!
  
  Reply
Henry
November 28, 2011 at 5:54 am

I have managed to get this to work inside of a list that contains a navigational element. The problem is that the “Home” and other buttons are not working since the li elements are being looked at by main.js. Will I need to find a way to get links that do not pertain to quicksand to open from main.js? How would that work?

Reply
- team
  
  Stewart Doxey
  November 29, 2011 at 10:18 am
  
  Hi Henry
  
  One possibility would be to add an addtional class to the elements that require Quicksand in your navigational container. For example, the Javascript would listen for a click event on li elements with a class of ‘quicksand’ and only work with li elements that have this class.
  
  line 15: $('#filterOptions li.quicksand a').click(function(e) { ... line 27: var $filteredData = $data.find('li.quicksand');
  
  I hope this sheds some light on your issue.
  
  Thanks for the comments.
  Stewart
  
  Reply
Mark
November 28, 2011 at 12:15 pm

Hi Stewart

I am new to Jquery and was just wondering how easy it would be to add a colorbox plugin to this? My idea is to have a zoomed-in/enlarged image when clicking on the thumbnail (or team badge).

Thanks

Reply
- team
  
  Stewart Doxey
  November 29, 2011 at 10:38 am
  
  Hi Mark
  The simplest way to allow ColorBox to work along side the Quicksand plugin is to move the ColorBox call to its own function
  
  function initColorbox() { // colorbox integration $("a.colorbox").colorbox(); }
  
  We then call this function after the DOM has loaded to initiate the ColorBox plugin
  
  $(document).ready(function() { ... // load fancy box initColorbox(); });
  
  And then use Quicksands callback function to reload the ColorBox integration everytime a transition is made.
  
  $(document).ready(function() { ... // call quicksand and assign transition parameters $holder.quicksand($filteredData, { duration: 800, easing: 'easeInOutQuad' }, function() { // reload colorbox initColorbox(); }); ... });
  
  I hope this helps.
  
  Stewart
  
  Reply
Mark
November 29, 2011 at 11:20 am

Thanks Stewart, I will give this a go.

Many thanks

Mark

Reply
Zoe
December 05, 2011 at 1:23 am

I found this post (especially the full source code download) very helpful in getting Quicksand to work on my site. Just wanted to say thanks for writing it up!

Reply
- team
  
  Stewart Doxey
  December 05, 2011 at 10:24 am
  
  Thanks Zoe. Glad it came in useful!
  
  Reply
Sam Whisker
December 05, 2011 at 2:26 pm

Can i just say this is amazing, thanks you have saved me a huge amount of time!

As an extension, can you filter by 2 data types, so i understand you can have ‘prem london’ so an item appears in both lists, but if you had a button that had 2 classes ‘prem london’ and you wanted to filter data by 2 data types ie only teams with ‘prem & london’

var $filteredData = $data.find(‘li[data-type~=' + $filterType1 + $filterType2 +']‘);

can this be done?

Reply
- team
  
  Stewart Doxey
  December 19, 2011 at 11:08 am
  
  Hi Sam
  
  One example I have come up with for filtering by muliple items is as follows:
  Replace
  var $filterType = $(this).attr('class');
  with
  var to_filter = $(this).attr('class').split(' '); var $filterType = ''; $(to_filter).each(function(index, value) { if(index > 0) { $filterType += ','; } $filterType += 'li[data-type=' + value + ']'; });
  jQuery allows you to filter by multiple attributes, we are building this string above.
  
  Next we need to change the if statement to check for ‘li[data-type=all]‘ rather than ‘all’.
  Replace
  if ($filterType == all') {
  with
  if ($filterType == 'li[data-type=all]') {
  
  And finally replace
  var $filteredData = $data.find('li[data-type=' + $filterType + ']');
  with
  var $filteredData = $data.find($filterType);
  
  That should allow you to add multiple classes to your filter links.
  
  Let me know how you get on!
  
  Stewart
  
  Reply
  - laptop alias
    December 19, 2011 at 3:25 pm
    
    Genius! But I still don’t get it. So if we had two kinds of filter, ‘Division’ and ‘Location’ (comprising, for example. ‘London’,'North-East’,'Midlands’), what might our html look like.
    
    [I'm really looking forward to putting all the ideas here together (multiple filters/lightbox callbacks/etc) into one amazing website]
    
    Reply
Angelo
December 05, 2011 at 6:41 pm

Has anyone thought of how to lock down certain items and shuffle the rest? I’m trying to get it working but am struggling.

Reply
- Angelo
  December 05, 2011 at 7:32 pm
  
  Answered my own question. If you replace the JS line
  $toDelete = $sourceParent.find(“> *”);
  to
  $toDelete = $sourceParent.find(“> .”);
  you can lock down certain items from being shuffled.
  
  Reply
Leighton Hughes
January 07, 2012 at 10:01 am

Great tutorial, however I’m having a slight problem with mine. When I load the page and click on “all” the first time it loads the thumbnails again with a fade in. When I click all again no fade in occurs and is therefore working correctly. I have hooked this in with expression engine btw.

Also happens when I click a different category for the first time. It appears that all the thumbnails fade in appear on top of each then fade out in a split second and then the correct thumbs appear. This happens really fast. So hard to make sense of what is happening.

The scripts are in my header template group and the header gets called at the top of another template. The thumbnails are also pulled into this page.

The source files work fine so it’s not my browser setup. Anyone have any ideas what the problem could be? Thanks

Reply
Leighton Hughes
January 08, 2012 at 2:29 am

Fixed the problem. Was the a tag I had wrapped around the li which was causing the issue. Have now put around the img and all good

Reply
Daniel
January 15, 2012 at 3:37 pm

Hey Stewart,

First off, thanks a lot for this tutorial. I was always really keen on using Quicksand but my understanding of code was too basic to do so. With your help I got a working example up and running now. Thanks!!

One killer feature for me would be now to be able to be able to check and uncheck multiple of those filters. So instead of having multiple data types in one button I would want to combine two by activating e.g. the button London & Premier League.

Do you think this would be possible at all?

I already successfully implemented your solution to be able to add multiple classes to the items …

Your help would be greatly appreciated!

Daniel

Reply
Cathrine
January 31, 2012 at 12:50 pm

Hi, thanks for this tutorial. It’s great!

Though, I have one problem: The filtering doesn’t work when using a draggable (http://jqueryui.com/demos/draggable/) plugin at the same time. Probably because the entire page is draggable…
I got it to work perfectly without the draggable, so I guess it’s the plugin that’s the problem?

Do you know how to fix it, or is it just not possible to have both of them working at the same time?

Reply
Paul Currah
February 02, 2012 at 3:19 pm

Hi Stewart,
Thank you for this tutorial – it’s made life a lot easier getting Quicksand to work on a site I’m developing.

I’ve been trying to do this for a while for my design portfolio site - is there a way to hide a group by default, but if you click its in the filter menu, it hides all the others and just shows the one that was hidden?

For example, for my filters I have “All” “Branding” “Print” “Environmental” “Digital” and “Archive” in the filter menu. I want all the “Archive” items to be invisible by default until you click “Archive”. Also, I don’t want any of these archive items to appear when the “all” filter is pressed. Bit of a weird setup, but I have a load of stuff in Archive that would just flood the screen if they’re visible by default…

I’d really appreciate your thoughts…
Cheers
Paul

Reply
Macrina
February 14, 2012 at 1:24 pm

How do I get rid of “all” category ? I don’t know JavaScript. Your help would be highly appreciated. 10x!

Reply
Chris
February 22, 2012 at 2:56 am

Great tutorial! I could not for the life of me get quicksand to cooperate, so thanks.

You saved me from going crazy.

–Cheers
Chris

Reply
jadams
March 09, 2012 at 10:07 am

Thanks so much for the tutorial. Managed to get Quicksand working…. mostly. It sorts fine, but the animation is incredibly sketchy.

With every click, it looks like the li items collapse on top of each other (so the top item is visible), perform the fade in, then snap into their proper positions.

Here’s the url: http://www.tinypalace.net/wp/category/projects/

The li items contain multiple divs with javascript asssociated with them. But the problem persists even when I disable the associated javascript.

Thanks again for a such a helpful tutorial. Any tips you can provide are greatly appreciated. Cheers // John

Reply
- team
  
  Stewart Doxey
  April 13, 2012 at 4:47 pm
  
  Hi John
  I’ve just visited your site and see you have fixed the issue, what was wrong in the end?
  Thanks for the comment,
  Stewart
  
  Reply
  - johnn
    April 16, 2012 at 5:56 am
    
    I ended up using Isotope. I let the team down, I know… Didn’t have the time to spend debugging javascript when scripting is not my focus. Needed my site up. The Isotope solution worked well and I was able to set it up without any snags. Thanks for getting back to me. And thanks for your tutorial it was an awesome help along the way.
    
    Reply
    
    team
    
    Stewart Doxey
    April 16, 2012 at 4:20 pm
    
    I had’t seen Isotope before, looks really good! Thanks for the recommendation.
    
    Reply
Rodrigo
March 22, 2012 at 2:28 pm

Hey, thanks for your tutorial, it helped me a lot.
But i have a single question, hope you have the time to answer me.
How can i erase the instances of quicksand plugin from the page without leaving the HTML page? I made a ‘Clear’ button that has no tags at all, and that made what i wanted, but there must be a better and cleaner way, maybe erasing the clone? thanksSS

Reply
- team
  
  Stewart Doxey
  March 23, 2012 at 6:34 pm
  
  Hi Rodrigo
  
  I’m not sure I follow what is it you are looking to do. Do you have an example online that you could share?
  
  Thanks Stewart
  
  Reply
  - Rodrigo
    March 23, 2012 at 8:59 pm
    
    Hi Stewart,
    thanks for answer me.
    I’m going to try to be more clear.
    When someone clicks in a logo,
    I want to “uncall” quicksand ( or maybe re-order) cause i’ll like to enter into the project specifications, with some photos and videos arrange differently, but i don’t want to go to another #html page, i want to re-order quicksan, to insert another design without leaving the page. Maybe if you can show me a way to “uncall “quicksand or erase instances ( in your exemple, “the logos”). Thanks for your help !
    
    Reply
shahid
March 23, 2012 at 10:34 am

thanks, very useful and quick tutorial work fine with me…

Reply
Sag
March 27, 2012 at 7:07 am

I’m trying to get colorbox working with quicksand. But only in ie6, colorbox stops functioning after a filter animation takes place.

Reply
- team
  
  Stewart Doxey
  April 13, 2012 at 4:52 pm
  
  Hi Sag
  
  Unfortunately IE6 is not supported by the Quicksand plugin (see http://razorjack.net/quicksand/docs-and-demos.html), this may be the reason you are encountering problems with that particular browser.
  
  Thanks
  
  Stewart
  
  Reply
mr92
April 07, 2012 at 11:05 am

Works awesome for me! Thanks a lot, dude!

Reply
marie
April 20, 2012 at 4:25 am

Hi, I’m using a fancybox with Quicksand and am a bit confused on the callback to make it work. Where do we place it and do we have to write additional code?

Thanks.

Reply
- team
  
  Stewart Doxey
  April 20, 2012 at 3:00 pm
  
  Hi Marie
  
  The callback forms part of the code to initiate the Quicksand plugin, for example:
  
  // call quicksand and assign transition parameters $holder.quicksand($filteredData, { duration: 800, easing: 'easeInOutQuad' }, function() { // reload colorbox initFancybox(); });
  As you can see from this we are calling a new function ‘initFancybox’, we use this function to initiate the Fancybox plugin so move your current Fancybox initiation code here, for example:
  function initFancybox() { // fancybox integration $("a.fancybox").fancybox(); }
  
  Hope that clears things up a little.
  
  Stu
  
  Reply
  - marie
    April 20, 2012 at 3:07 pm
    
    Figured it all out! Thanks!
    
    Reply
    
    Ben
    May 11, 2012 at 4:02 am
    
    figured out how to have it pre-filter when return to the page. on the return link have it set up as something like this: index.html#category
    
    $(document).ready(function() {
    
    //$(‘ul.ourHolder li’).not(‘li[data-type=all]‘).hide();
    
    // get the action filter option item on page load
    var $filterType = $(‘#filterOptions li.active a’).attr(‘class’);
    
    // get and assign the ourHolder element to the
    // $holder varible for use later
    var $holder = $(‘ul.ourHolder’);
    
    // clone all items within the pre-assigned $holder element
    var $data = $holder.clone();
    
    var $button = $(‘#filterOptions li’);
    
    var $all = $(‘ul.ourHolder li’).data(‘type’) === ‘all’;
    
    if (window.location.hash) {
    // reset the active class on all the buttons
    $button.removeClass(‘active’);
    
    // assign the class of the clicked filter option
    // element to our $filterType variable
    var $filtered = window.location.hash.replace(‘#’, ”);
    
    $(‘a[class=' + $filtered + ']‘).parent().addClass(‘active’);
    
    var $filteredData = $data.find(‘li[data-type~=' + $filtered + ']‘).show();
    
    // call quicksand and assign transition parameters
    $holder.quicksand($filteredData, {
    duration: 800,
    easing: ‘easeInOutQuad’
    });
    }
    // attempt to call Quicksand when a filter option
    // item is clicked
    // Main Filter
    $(‘#filterOptions li a’).on(‘click’, function(e) {
    // reset the active class on all the buttons
    $button.removeClass(‘active’);
    
    // assign the class of the clicked filter option
    // element to our $filterType variable
    var $filterType = $(this).attr(‘class’);
    $(this).parent().addClass(‘active’);
    
    var $filterData = $data.find(‘li[data-type~=' + $filterType + ']‘).show();
    
    // call quicksand and assign transition parameters
    $holder.quicksand($filterData, {
    duration: 800,
    easing: ‘easeInOutQuad’
    });
    });
    
    //Main Containers
    $(‘ul.ourHolder’).on(‘click’, ‘li.all’, function(e) {
    // reset the active class on all the buttons
    $button.removeClass(‘active’);
    
    // assign the class of the clicked filter option
    // element to our $filterType variable
    var $ba = $(‘#filterOptions li a’);
    var $filteringType = $(this).attr(‘id’);
    var $navFilter = $ba.attr(‘class’);
    
    var $filteringData = $data.find(‘li[data-type=' + $filteringType + ']‘).show();
    
    // call quicksand and assign transition parameters
    $holder.quicksand($filteringData, {
    duration: 800,
    easing: ‘easeInOutQuad’
    });
    });
    
    });
    
    Reply
Aaron
May 23, 2012 at 2:13 pm

Thanks a lot for sharing this. Using it in my new portfolio site! As a student of IMD its great to learn from sites like this!

Reply
- team
  
  Stewart Doxey
  May 23, 2012 at 2:25 pm
  
  Hi Aaron
  
  Thanks for the comment. Your site’s coming along nicely, keep up the good work!
  
  Thanks
  
  Stewart
  
  Reply
ally
May 23, 2012 at 4:02 pm

so after clicking for example, print to interactive, when the new ones fade in there’s a strange jump. does anyone know what could cause this?

the live site:
http://www.allypalanzi.com

Reply
- team
  
  Stewart Doxey
  May 24, 2012 at 8:07 am
  
  Hi Ally
  
  The strange jump you’re seeing is due to the vertical scrollbar showing and hiding depending on how long your page is. To fix this you’ll need to add a snippet of code into your CSS to ensure that the scrollbar is always showing. For example:
  html { overflow-y: scroll; }
  
  Hope this helps.
  
  Stewart
  
  Reply
  - ally
    May 24, 2012 at 8:17 pm
    
    Thanks for replying — but I actually meant the jump with the thumbnails. After clicking Print for example on the first page, then clicking Interactive, when they pop in there’s a slight jump afterwards.
    
    Reply
    
    laptop alias
    May 25, 2012 at 9:21 am
    
    Yes, that’s caused by the scroll bar at the right appearing and disappearing!!!
    
    To see what Stewart means, make the window shorter, so that the scroll bar is visible, then cycle through ‘print’/'all’/etc.
    
    Reply
    
    laptop alias
    May 25, 2012 at 9:24 am
    
    Oh hang on, there’s stilll a tiny jump isn’t there. Not sure what could be causing that
yeoung
May 25, 2012 at 3:59 am

hallo the list is alphabetical order, how is possible to order by ID and not by alphabetical order? i see that if i enter in a single categoy and then i click ALL , the list is alphabetical again!!!

Reply
- team
  
  Stewart Doxey
  May 25, 2012 at 1:53 pm
  
  Hi
  
  Our demo of the Quicksand plugin is only ordering alphabetically because this is the order we have used within the html markup of the demo. For example, if you move the Everton li element above the Arsenal li element in the html Everton will be displayed before Arsenal in the All and Prem listings.
  
  Thanks
  
  Stewart
  
  Reply
  - yeoung
    May 28, 2012 at 6:12 pm
    
    thats not solving a problem
    when its first load page its Right order coz i make it via html. but when i click category
    its sort in alphabet when i select all its sort in alphabet. How can i make it sort like when page load?
    
    see live demo :
    http://damninc.com/neodamn
    
    thanks for answering
    
    Reply
Louise
June 05, 2012 at 10:23 pm

Hi Stewart,
First of all, thanks for a great tutorial. I’ve bumped into a problem, and since I’ve noticed you’ve been so helpful resolving all of the questions, I was hoping you might be able to help me. I’ve set everything up using your tutorial (don’t mind that the the images are all the same, I’ve used a generic one). When filtering, it does filter and show the right projects BUT it does so in a very awkward way, very jumpy: http://lllh.dk/filtering/work3.html
It seems that some part of the layout disrupts the easing. Any idea what that could be?
Thanks so much

Reply
Tell
August 02, 2012 at 7:59 pm

I have two questions. On this example http://razorjack.net/quicksand/ they are sorting alphabetically and by size. On my site I’d like to sort by name and by price but I can’t see anywhere that any type of class or id was applied to the size on the razorjack example. Any ideas?

Secondly is there a way to create links to specific categories? Basically link so that it would activate different links depending on the link?

Thanks for any help.

Reply
Alexis Troncoso
August 20, 2012 at 4:08 pm

Hello, I really liked QS and implements it on the website of the company where I work with browsers like Firefox or Chrome, no problem, I have problems with Internet Explorer, QS does not work, what can it be?

Reply
- team
  
  Stewart Doxey
  September 10, 2012 at 9:17 am
  
  Hi Alexis
  
  Please check that you have no console.log() commands in your JavaScript file, I have had issues in the past where scripts work in all browsers apart from IE due to this.
  
  Cheers
  
  Stewart
  
  Reply
Module23 Werbeagentur Koblenz
September 03, 2012 at 12:22 pm

Wow, much better than the original tutorial. Thanks a lot!

Reply
Robert
October 16, 2012 at 2:05 pm

Thank you so much. This tutorial is greatly appreciated.

Reply
AAmit
October 17, 2012 at 10:21 am

Thanks a lot for the tutorial. Its awesome.

Reply
Michelle
October 20, 2012 at 5:25 pm

Thanks for the great tutorial + code! I successfully implemented quicksand, but now I have a question about changing window sizes. I notice when I shrink the size of my browser, the list items don’t push down to the next level. This is more of a css question, but would you have any suggestions? Or would I have to implement the masonry plugin? Thank you in advance!

Reply
- team
  
  Ash Young
  November 06, 2012 at 11:17 pm
  
  Sorry for the slow reply, I’d suggest implementing the masonry plugin if you haven’t already.
  
  Reply
- Danny
  December 25, 2012 at 5:05 pm
  
  Michelle, with some careful tweaking of the CSS, you can achieve this using Quicksand with media queries. I just implemented this for a theme I am designing. The key is to convert fixed widths to percentage and then float your li tags like 2 in a row for smaller viewports and three in a row for larger. (or whatever fits your image well.). I also removed any height constrictions from the CSS for the images.
  
  Reply
Shawn
November 28, 2012 at 4:32 am

Thanks a lot.
It’s really helpful.

Reply
Danny
December 25, 2012 at 4:42 pm

Thanks for the great tutorial, this really helped. The JQuery Quicksand site is nice but they basically said “dude”, you are on your own figuring out how to do the filtering. This filled in the gap.

Reply
- ScottyD.
  May 07, 2013 at 5:31 pm
  
  Yeah, as much as I understand where the peeps who made the Quicksand plugin come from I was a little lost on how to correctly implement the more advanced sorting features.
  
  Reply
Nick
March 17, 2013 at 6:22 am

Thanks very much for the tutorial, it was exactly what I was looking for.
Cheers!!!

Reply
Mathis
April 08, 2013 at 1:45 am

Very nice tutorial Stewart !

I’am a french student and this post helped me for my portfolio.

Thanks a lot !

Reply
ScottyD.
May 07, 2013 at 5:49 pm

FYI – I tried to implement this using version 1.9.1 of jQuery and they have removed the $.browser property in version 1.9.0 of jQuery. If you trying to use this with the latest version of jQuery, it will throw a Uncaught TypeError: Cannot read property ‘msie’ of undefined error in the console.

This has to do with the actual quicksand javascript itself. I noticed that this demo is using version 1.2.2 of the quicksand plugin, so I downloaded the latest version of quicksand from github (ver.1.3 is what is up there) so see if that was causing the error and it still threw an error using jQuery 1.9.1.

The highest version of jQuery you can go to use quicksand is 1.8.3 (obviously, but I wanted to make sure people know) at this moment until the people who made quicksand update their plugin code.

Not trying to harp on quicksand or even this demo either, but I figured I’d want to let people know in case they are trying to implement it on maybe a template within WordPress or maybe some platform where it’s already using a version of jQuery.

Reply
- team
  
  Stewart Doxey
  May 08, 2013 at 8:28 am
  
  Thanks for the info Scott, I’ll make a note on the post. Extremely helpful!
  
  Reply
Johan
May 08, 2013 at 10:48 am

Hi
First – This is a superscript thumbs up …..

But I have tried to insert the example in a test page, and here it does not work quite as hoped. If I open the page in IE10 it has not glide/slide (animations) function with, only if I turn Compatibility View on, it works. All other browser I’ve tried it, it works super.

If I test http://razorjack.net/quicksand so it works also in IE10, what the hell is missing? what do I have to edit in the codes I have downloaded from this page?

Reply
- team
  
  Stewart Doxey
  May 08, 2013 at 2:15 pm
  
  Hi Johan
  
  IE10 had not been released when the post was written and uses version 1.2.2 of the Quicksand plugin. Version 1.3 of the Quicksand plugin has now been released over at http://razorjack.net/quicksand, my first suggestion would be to head over and grab the latest version of the plugin source and try again. I will update the version used within the blog post demo in due course.
  
  Thanks, Stewart
  
  Reply
  - Johan
    May 08, 2013 at 3:10 pm
    
    Hi Stewart
    
    I already has get version 1.3 and for your info I’ve discovered that your demo page does not work properly, sorry – otherwise a super nice script
    
    Reply