Simple jQuery Filtering using Quicksand
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.
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!
58 Comments
I can't seem to get this going.
Post replySolution was to move all .js files into a single file. I don't know why, but that fixed it! Thanks for the tut.
Post replyHi.
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 replyhallo 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 replyHi 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 replyI'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+1 for this one.
Trying to do the same thing ...
Post replyHas anyone figured out how to implement checkboxes?
Post replyWould 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 replyHi Andrew.
Post replyI'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
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 replyHi 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 replyThanks this was exactly what i was looking for !
Great tutorial !
Post replyI 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 replyHow do I set it to open page to "Premier League" instead of "ALL"? Please help :) Thank you
Post replyHi 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 replyAh 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 replyThis 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 replyHi 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
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 replyHi 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 replyHi Stewart,
I solve the problem I had some cufon fonts, and after disable cufon it works.
Thanks!
Post replyThanks 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 replyNevermind, I figured it out. I basically overlooked something too simple to describe!
Post replyI 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 replyHi 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.
Post replyStewart
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 replyHi 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 replyThanks Stewart, I will give this a go.
Many thanks
Mark
Post replyI 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 replyThanks Zoe. Glad it came in useful!
Post replyCan 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 replyHi 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 replyGenius! 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 replyHas anyone thought of how to lock down certain items and shuffle the rest? I'm trying to get it working but am struggling.
Post replyAnswered my own question. If you replace the JS line
Post reply$toDelete = $sourceParent.find("> *");
to
$toDelete = $sourceParent.find("> .");
you can lock down certain items from being shuffled.
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 replyFixed 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 replyHey 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 replyHi, 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 replyHi 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...
Post replyCheers
Paul
How do I get rid of "all" category ? I don't know JavaScript. Your help would be highly appreciated. 10x!
Post replyGreat tutorial! I could not for the life of me get quicksand to cooperate, so thanks.
You saved me from going crazy.
--Cheers
Post replyChris
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 replyHi John
Post replyI've just visited your site and see you have fixed the issue, what was wrong in the end?
Thanks for the comment,
Stewart
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 replyI had't seen Isotope before, looks really good! Thanks for the recommendation.
Hey, thanks for your tutorial, it helped me a lot. :)
Post replyBut 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
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 replyHi Stewart,
Post replythanks 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 ! :)
thanks, very useful and quick tutorial work fine with me...
Post replyI'm trying to get colorbox working with quicksand. But only in ie6, colorbox stops functioning after a filter animation takes place.
Post replyHi 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 replyWorks awesome for me! Thanks a lot, dude!
Post replyThanks 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 replyNice example! I haven't had chance to try it in a real world scenario just yet. Your implementation works well within a slider!
Post replyHi,
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 replyHi 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
thanks for the nice tutorial, found it better than the one on the script's official page
Post replyNice one..thanks!
Post replynice one! any idea how to make an item part of multiple categories eg, premier league and london?
Post replyHi Andy, thanks for the comment.
Post replyTo 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
Brilliant, thank you - works perfectly
Post replyHi 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!
Post replyMike
RE: my questions, nevermind. I resolved the issue. Thanks again!
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
Post replystduent
One more question...
Post replyI 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?
Hi Andy. Do you have a demo anywhere online of your predicament?
Post replyHey, 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 replyI 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... ;-)
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.
That's awesome news Kevin, I'm glad you're all sorted! :-)
awesome work! IE compatible??
Post replyThanks for the comment. Yes, Quicksand does work in all major IE browsers.
Post replyThanks 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?
Post replyThanks in advance
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 replyThe css reset was useful, otherwise I had funky css during the animation, a long column for list items
Post replyThanks so much!
Any idea how we would sort-filter by name or date?
Post replyThis is a feature I'm am going to be looking at in my next blog post.
Post replyHi, 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 replyHi 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 replyFigured it all out! Thanks!
Post replyfigured 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'
});
});
});
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 replyHi Aaron
Thanks for the comment. Your site's coming along nicely, keep up the good work!
Thanks
Stewart
Post replyso 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:
Post replywww.allypalanzi.com
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 replyThanks 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 replyYes, 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.
Oh hang on, there's stilll a tiny jump isn't there. Not sure what could be causing that :-(
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 replyHi
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 replythats 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 replyHi Stewart,
Post replyFirst 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
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 replyHello, 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 replyHi 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 replyWow, much better than the original tutorial. Thanks a lot!
Post replyThank you so much. This tutorial is greatly appreciated.
Post replyThanks a lot for the tutorial. Its awesome.
Post replyThanks 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 replySorry for the slow reply, I'd suggest implementing the masonry plugin if you haven't already.
Post replyMichelle, 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 replyThanks a lot.
Post replyIt's really helpful.
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 replyYeah, 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 replyThanks very much for the tutorial, it was exactly what I was looking for.
Post replyCheers!!!
Very nice tutorial Stewart !
I'am a french student and this post helped me for my portfolio.
Thanks a lot !
Post replyFYI - 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 replyThanks for the info Scott, I'll make a note on the post. Extremely helpful!
Post replyHi
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 replyHi 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 replyHi 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 replyThanks For sharing such a nice Jquery.its 100% functional and working properly.i use it on Gallery in my site.
Post replyMate, I saw this plugin while trying to fix an IE8 bug in my code.
Post replyWhen 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)
Hello,
Post replyLove 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?
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 replyHello 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 replyLeave a comment