Simple jQuery Filtering using Quicksand

11 April, 2011

Please note:  The Quicksand plugin currently only supports jQuery The highest version of jQuery you can go to use quicksand is 1.8.3

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.

HTML

<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="assets/thinktank/images/accrington-stanley.jpg" alt="Accrington Stanley" />
<h3>Accrington Stanley</h3>
</li>
  <li class="item" data-id="id-2" data-type="prem">
    <img src="assets/thinktank/images/arsenal.jpg" alt="Arsenal" />
<h3>Arsenal</h3>
</li>
  <li class="item" data-id="id-3" data-type="league2">
    <img src="assets/thinktank/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!

Written by Stewart

Having been with Evoluted for more than 9 years, Stewart has helped to develop successful websites for countless clients. With vast experience related to web development, he’s comfortable putting his skills to use across a wide variety of projects. His ability was highlighted by the key role he played in a site we built for Bamboo Travel, which won best website at the 2013 Wanderlust Travel Awards.

Up next…
Design Inspiration #1
28 March, 2011

58 Comments

Josh
16th October 2017 at 9:16am

I can't seem to get this going.

Post reply
Josh
16th October 2017 at 9:16am

Solution was to move all .js files into a single file. I don't know why, but that fixed it! Thanks for the tut.

Post reply
Anders Hansen
16th October 2017 at 9:16am

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.

Post reply
daniele
16th October 2017 at 9:16am

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

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
laptop alias
16th October 2017 at 9:16am

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.

Post reply
Daniel
16th October 2017 at 9:16am

+1 for this one.

Trying to do the same thing ...

Post reply
Tine
16th October 2017 at 9:16am

Has anyone figured out how to implement checkboxes?

Post reply
Andrew
16th October 2017 at 9:16am

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!

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
Jess
16th October 2017 at 9:16am

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

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
Geordie
16th October 2017 at 9:16am

Thanks this was exactly what i was looking for !

Great tutorial !

Post reply
Jenel
16th October 2017 at 9:16am

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

Post reply
jessicarosen
16th October 2017 at 9:16am

How do I set it to open page to "Premier League" instead of "ALL"? Please help :) Thank you

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
Dave
16th October 2017 at 9:16am

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

Post reply
Quirksmode
16th October 2017 at 9:16am

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?

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Leonel
16th October 2017 at 9:16am

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!

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
Leonel
16th October 2017 at 9:16am

Hi Stewart,

I solve the problem I had some cufon fonts, and after disable cufon it works.

Thanks!

Post reply
Henry
16th October 2017 at 9:16am

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.

Post reply
Henry
16th October 2017 at 9:16am

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

Post reply
Henry
16th October 2017 at 9:16am

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?

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
Mark
16th October 2017 at 9:16am

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

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
Mark
16th October 2017 at 9:16am

Thanks Stewart, I will give this a go.

Many thanks

Mark

Post reply
Zoe
16th October 2017 at 9:16am

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!

Post reply
Stewart Doxey
16th October 2017 at 9:16am

Thanks Zoe. Glad it came in useful!

Post reply
Sam Whisker
16th October 2017 at 9:16am

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?

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
laptop alias
16th October 2017 at 9:16am

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]

Post reply
Angelo
16th October 2017 at 9:16am

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

Post reply
Angelo
16th October 2017 at 9:16am

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.

Post reply
Leighton Hughes
16th October 2017 at 9:16am

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

Post reply
Leighton Hughes
16th October 2017 at 9:16am

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

Post reply
Daniel
16th October 2017 at 9:16am

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

Post reply
Cathrine
16th October 2017 at 9:16am

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?

Post reply
Paul Currah
16th October 2017 at 9:16am

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

Post reply
Macrina
16th October 2017 at 9:16am

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

Post reply
Chris
16th October 2017 at 9:16am

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

You saved me from going crazy.

--Cheers
Chris

Post reply
jadams
16th October 2017 at 9:16am

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

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
johnn
16th October 2017 at 9:16am

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.

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Rodrigo
16th October 2017 at 9:16am

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

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
Rodrigo
16th October 2017 at 9:16am

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

Post reply
shahid
16th October 2017 at 9:16am

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

Post reply
Sag
16th October 2017 at 9:16am

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

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
mr92
16th October 2017 at 9:16am

Works awesome for me! Thanks a lot, dude!

Post reply
greymatters
16th October 2017 at 9:16am

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

Post reply
Stewart Doxey
16th October 2017 at 9:16am

Nice example! I haven't had chance to try it in a real world scenario just yet. Your implementation works well within a slider!

Post reply
Stew
16th October 2017 at 9:16am

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 ?

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

datampq
16th October 2017 at 9:16am

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

Post reply
Popcorn - Web Services
16th October 2017 at 9:16am

Nice one..thanks!

Post reply
Andy
16th October 2017 at 9:16am

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

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
Andy
16th October 2017 at 9:16am

Brilliant, thank you - works perfectly

Post reply
Mike
16th October 2017 at 9:16am

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

Post reply
Mike
16th October 2017 at 9:16am

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

student
16th October 2017 at 9:16am

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

Post reply
Andy
16th October 2017 at 9:16am

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?

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
Kevin
16th October 2017 at 9:16am

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!

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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
16th October 2017 at 9:16am

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.

Stewart Doxey
16th October 2017 at 9:16am

That's awesome news Kevin, I'm glad you're all sorted! :-)

sguy
16th October 2017 at 9:16am

awesome work! IE compatible??

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
barney
16th October 2017 at 9:16am

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

Post reply
Raul
16th October 2017 at 9:16am

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

Post reply
Greg
16th October 2017 at 9:16am

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

Post reply
casey
16th October 2017 at 9:16am

Thanks so much!

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

Post reply
Stewart Doxey
16th October 2017 at 9:16am

This is a feature I'm am going to be looking at in my next blog post.

Post reply
marie
16th October 2017 at 9:16am

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.

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
marie
16th October 2017 at 9:16am

Figured it all out! Thanks!

Post reply
Ben
16th October 2017 at 9:16am

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'
});
});

});

Aaron
16th October 2017 at 9:16am

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!

Post reply
Stewart Doxey
16th October 2017 at 9:16am

Hi Aaron

Thanks for the comment. Your site's coming along nicely, keep up the good work!

Thanks

Stewart

Post reply
ally
16th October 2017 at 9:16am

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:
www.allypalanzi.com

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
ally
16th October 2017 at 9:16am

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.

Post reply
laptop alias
16th October 2017 at 9:16am

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
16th October 2017 at 9:16am

Oh hang on, there's stilll a tiny jump isn't there. Not sure what could be causing that :-(

yeoung
16th October 2017 at 9:16am

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

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
yeoung
16th October 2017 at 9:16am

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

Post reply
Louise
16th October 2017 at 9:16am

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

Post reply
Tell
16th October 2017 at 9:16am

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.

Post reply
Alexis Troncoso
16th October 2017 at 9:16am

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?

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
Module23 Werbeagentur Koblenz
16th October 2017 at 9:16am

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

Post reply
Robert
16th October 2017 at 9:16am

Thank you so much. This tutorial is greatly appreciated.

Post reply
AAmit
16th October 2017 at 9:16am

Thanks a lot for the tutorial. Its awesome.

Post reply
Michelle
16th October 2017 at 9:16am

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!

Post reply
Ash Young
16th October 2017 at 9:16am

Sorry for the slow reply, I'd suggest implementing the masonry plugin if you haven't already.

Post reply
Danny
16th October 2017 at 9:16am

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.

Post reply
Shawn
16th October 2017 at 9:16am

Thanks a lot.
It's really helpful.

Post reply
Danny
16th October 2017 at 9:16am

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.

Post reply
ScottyD.
16th October 2017 at 9:16am

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.

Post reply
Nick
16th October 2017 at 9:16am

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

Post reply
Mathis
16th October 2017 at 9:16am

Very nice tutorial Stewart !

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

Thanks a lot !

Post reply
ScottyD.
16th October 2017 at 9:16am

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.

Post reply
Stewart Doxey
16th October 2017 at 9:16am

Thanks for the info Scott, I'll make a note on the post. Extremely helpful!

Post reply
Johan
16th October 2017 at 9:16am

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?

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
Johan
16th October 2017 at 9:16am

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

Post reply
Kiramat
16th October 2017 at 9:16am

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

Post reply
Steve
16th October 2017 at 9:16am

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)

Post reply
Danny
16th October 2017 at 9:16am

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?

Post reply
Stewart Doxey
16th October 2017 at 9:16am

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

Post reply
Mom Coding
16th October 2017 at 9:16am

Hello Stewart,

Thanks a lot for this tutorial and the Quicksand one! I'm learning to code and I had an assignment involving such effects, your step-by-step tutorial was extremely helpful! :)

Post reply

Leave a comment

Replying to: - Cancel