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 demoDownload 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: , , , , ,

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. Read more posts by Stewart Doxey

Free social media icons for every subscriber

Sign up to our mailing list to have new updates delivered straight to your inbox. Every subscriber will get a free pack of social media icons!


117 Comments

  1. 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! ;)

    • 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!

      • 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 ?

        • 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

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

  3. Popcorn – Web Services

    May 03, 2011 at 12:57 pm

    Nice one..thanks!

  4. 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?

    • 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

      • Andy

        May 24, 2011 at 4:21 am

        Brilliant, thank you – works perfectly

      • 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

      • 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

        • Mike

          February 08, 2012 at 1:50 pm

          RE: my questions, nevermind. I resolved the issue. Thanks again!

  5. 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?

    • team

      Stewart Doxey

      May 31, 2011 at 9:57 am

      Hi Andy. Do you have a demo anywhere online of your predicament?

      • 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. :P

        Thanks so far!

        • 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… ;-)

          • 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. :D 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! :-)

  6. sguy

    May 25, 2011 at 5:27 pm

    awesome work! IE compatible??

    • team

      Stewart Doxey

      May 31, 2011 at 9:53 am

      Thanks for the comment. Yes, Quicksand does work in all major IE browsers.

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

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

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

  10. casey

    July 19, 2011 at 7:46 pm

    Thanks so much!

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

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

  11. Josh

    August 13, 2011 at 9:31 pm

    I can’t seem to get this going.

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

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

  13. 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!!!

    • 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

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

    • Daniel

      January 15, 2012 at 3:39 pm

      +1 for this one.

      Trying to do the same thing …

      • Tine

        December 23, 2012 at 2:08 pm

        Has anyone figured out how to implement checkboxes?

  15. 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!

    • 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

  16. Jess

    October 16, 2011 at 1:27 pm

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

    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/)

    • 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

      • 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! :D

      • Geordie

        September 26, 2012 at 8:34 pm

        Thanks this was exactly what i was looking for !

        Great tutorial !

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

    • 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

      • 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! :)

      • 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?

        • 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

  18. 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!

    • 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

      • 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!

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

    • Henry

      November 28, 2011 at 5:15 am

      Nevermind, I figured it out. I basically overlooked something too simple to describe!

  20. 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?

    • 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

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

    • 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

  22. Mark

    November 29, 2011 at 11:20 am

    Thanks Stewart, I will give this a go.

    Many thanks

    Mark

  23. 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!

    • team

      Stewart Doxey

      December 05, 2011 at 10:24 am

      Thanks Zoe. Glad it came in useful!

  24. 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?

    • 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

      • 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]

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

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

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

  27. 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 :)

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

  29. 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?

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

  31. 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!

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

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

    • 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

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

        • team

          Stewart Doxey

          April 16, 2012 at 4:20 pm

          I had’t seen Isotope before, looks really good! Thanks for the recommendation.

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

    • 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

      • 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 ! :)

  35. shahid

    March 23, 2012 at 10:34 am

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

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

  37. mr92

    April 07, 2012 at 11:05 am

    Works awesome for me! Thanks a lot, dude!

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

    • 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

      • marie

        April 20, 2012 at 3:07 pm

        Figured it all out! Thanks!

        • 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’
          });
          });

          });

  39. 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!

    • 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

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

    • 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

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

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

          • 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 :-(

  41. 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!!!

    • 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

      • 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

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

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

  44. 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?

    • 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

  45. Module23 Werbeagentur Koblenz

    September 03, 2012 at 12:22 pm

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

  46. Robert

    October 16, 2012 at 2:05 pm

    Thank you so much. This tutorial is greatly appreciated.

  47. AAmit

    October 17, 2012 at 10:21 am

    Thanks a lot for the tutorial. Its awesome.

  48. 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!

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

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

  49. Shawn

    November 28, 2012 at 4:32 am

    Thanks a lot.
    It’s really helpful.

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

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

  51. Nick

    March 17, 2013 at 6:22 am

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

  52. 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 !

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

    • 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!

  54. 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?

    • 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

      • 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

  55. Kiramat

    June 20, 2013 at 1:53 pm

    Thanks For sharing such a nice Jquery.its 100% functional and working properly.i use it on Gallery in my site.

  56. Steve

    July 10, 2013 at 10:34 am

    Mate, I saw this plugin while trying to fix an IE8 bug in my code.
    When viewing in IE8 and sorting, my items jump to the top of the page before being positioned.
    I downloaded your plugin, but it has the same bug. If you ever find a fix for this, please let me know.
    (viewing in IE10, Browser mode IE8)

  57. Danny

    August 30, 2013 at 4:51 pm

    Hello,
    Love the plugin very helpful.. I am running in to a minor issue hoping you can advise on it. I am using this on my WP gallery page. The gallery page pulls in the featured image, you can hover over the featured image and it will show the excerpt, tags and 3 links (1.. open it in a lightbox, 2.. view the image full size in a lightbox & 3.. a read more button). Before I filter any of the items these buttons work fine.. but after I filter them the lightbox still works but it can’t find the content anymore and in firebug I can see the hidden containers that is pulling that content is now gone… any ideas?

    • team

      Stewart Doxey

      August 30, 2013 at 5:09 pm

      Hi Danny

      My first thought would be to try and reload / refresh the Lightbox plugin once a successful Quicksand filter has been made.

      If this doesn’t work then send me a link to your code example and I’ll take a look.

      Thanks

      Stewart

Leave your comment