I’ve been playing with RazorJack’s quicksand plugin. It is a jQuery plugin that makes filtering and sorting a collection rich and interactive. The demo itself is sweet.
I wanted to integrate it into a project I was working on, but I needed multiple filters. Also, I did not want to use an unordered list. Unfortunately, all the examples use a single filter and unordered lists.
It was a prime opportunity for me to use a tool I have been flirting with for a while, jsfiddle. It is a single web page with four quadrants: HTML, CSS, javascript, and the output.
Gone are the days when I would use notepad to try out stuff. I no longer have to switch windows just to test a small change. Switching windows is not a problem, but I lose my place when I switch back to notepad. I had the same problem when navigating among the HTML, CSS, and javascript. A change to one often required that I go find the affected element in the other places and make sure all was good. Now, I can do all that at a glance.
Back to the point, I put together a sample using quicksand to prove out that it can indeed support multiple filters.
is good sharing. thanks. But may i know how to display the msg “No content is dispplay”? if the filter sort is nothing come out. thanks in advance.
zoe, I’m not sure off the top of my head. I’d have to dig into the quicksand source. Let me know if you you have come up with a solution in the meantime!
Hi Adam—
I really admire this modification to the Quicksand plugin. I have been trying, unsuccessfully, to see if I can get it to work in a WordPress sandbox I use to kick around ideas here. Having spent a day Googling the issue and combing through the WordPress Codex, I would really, really appreciate it if you could lend me a hand implementing your excellent JS.
Here’s what I’ve done so far, in terms of structure:
1) I downloaded the JS of the quicksand plugin, saved it as “quicksand.js,” and uploaded it to the site. I did the same with the JS section of the fiddle you created, naming the file “sandboxfilters.js .”
2) I copied the HTML (from the fiddle you created) into a new WordPress page.
3) I added the following to the WordPress theme’s functions.php file:
if ( !is_admin() ) { // instruction to only load if it is not the admin area
// register script location, dependencies and version
wp_register_script('quicksand',
get_bloginfo('template_directory') . '/core/js/quicksand.js',
array('jquery'),
'1.2.2' );
// enqueue the script
wp_enqueue_script('quicksand');
}
if ( !is_admin() ) { // instruction to only load if it is not the admin area
// register script location and version
wp_register_script('sandboxfilters',
get_bloginfo('template_directory') . '/core/js/sandboxfilters.js',
'3.1.3' );
// enqueue the script
wp_enqueue_script('sandboxfilters');
}
4) I added the CSS from the the Quicksand page, as well the small addition from the CSS section of the fiddle you made, to the WordPress theme.
What am I missing?
Hey, sorry I missed this comment earlier. It looks like the sample is no longer there. Are you still working on this?
Hey, that is a great script! I was wondering whether it would be possible to do the same with 3 or maybe 4 dropdown menu’s instead?
Absolutely. This demo showed how to do it with two filters. Are you able to follow the logic through to see where to make additions to add a third or fourth filter? Give it a shot, and if you get stuck, let me know. You might try by first forking the jsfiddle and going from there.
I’m a total noob when it comes to web. I recently setup up a website from a template I got….and it has this setup. I have a gallery of videos with different tags. When I go to my gallery page it currently displays all my videos (all tag). Is there a way to set it to display a different tag instead of all?
Great tutorial, but what if you want to use html’s ‘select multiple’ attribute – or perhaps checkboxes – instead?
You would just have to use the data from those items instead of the data from the select elements. The logic for applying the selections to the data would be very similar.