Filter
- 0
Customer
- 0
- 0
- 0
- 0
- 0
Service
- 0
- 0
- 0
- 0
- 0
- 0
Year
- 0
- 0
- 0
- 0
- 0
- 0
- 0
Projects completed
Whoah! Thats a big fat Nullity. Try clicking a few more boxes ...
The main elements here are the .filter li's and the #holder li's. In order for the two to talk to each other, they have to have something in common. In this instance it is done with classes. In this instance I have used elements to trigger a click event. This is purely because the design had checkboxes shown and it was better to tie the click event to something that was easy to reference checked or unchecked. This could just as easily be done with other elements, adding and removing classes and checking for the presence of them.
When a click is made on these elements, the jQuery runs through a series of thought out procedures:
- If the 'Show all' checkbox has been clicked
- If it is and it is checked, make all projects appear
- If it is and its not checked, make all projects disappear
- If not, is the selection checked
- If its checked, we must need to show all the elements with the same class as the value in the checkbox input. We need to show all the elements that match the selection, then make an array out of all the categories matching the selection. Then they are checked in the filter list to show the user what other categories share the project.
- If it got as far as this, the only possibility left is that something is being deselected. We need to hide all the elements that match the selection, then make an array out of all the categories matching the selection. Then they are deselected from the filter list.
I told you it was quite in depth and I have done my best to explain things. It may help if I actually show you the script.js file for it:
The jQuery
$(document).ready(function () {
// Removes all filtered elements initially
$("#holder li, .played").hide();
$("#holder.showThis li").show();
// Counts up occurances of classes and sets number of occurrences in filter list
$(".filters li").each(function () {
var $val = $(this).find('input').val();
var $valcount = $("#holder ." + $val).length;
$(this).find('span').html($valcount);
//alert($valcount);
});
// Sets the number in the 'Show all' filter by counting the total amount of entries.
var $itval = $("#holder li").length;
$(".filters li input[value*='all']").parent().find('span').html($itval);
// When clicking an item in the filter list, elements will appear or dissappear
// depending on whether list item is checked or unchecked.
$(".filters li input[type=checkbox]").click(function () {
$('a.jqTransformCheckbox').parent().find('input[type=checkbox]').removeAttr('checked');
$('a.jqTransformChecked').parent().find('input[type=checkbox]').attr('checked', 'checked');
// next two lines remove the initial page content when a filter is clicked
$(".entry-made").hide();
$(".entry-written").hide();
var selection = $(this).val();
if (selection == "all") {
//show all items
if ($(this).is(':checked')) {
$("#holder li img").fadeIn('fast');
$("#holder li").slideDown('slow');
$(".filters li input[type=checkbox]").attr('checked', 'checked');
$(".filters li").addClass('checked');
$(".filters li label").css({ 'color': '#efefef' });
} else {
$("#holder li img").fadeOut('slow');
$("#holder li").slideUp('slow', function () {
$(".played").slideDown('fast');
});
$(".filters li input[type=checkbox]").removeAttr('checked');
$(".filters li").removeClass('checked');
$(".filters li label").css({ 'color': '#40575F' });
}
} else {
if ($(this).is(':checked')) {
$("#holder li." + selection + " img").fadeIn('slow');
$("#holder li." + selection).prependTo('#holder').slideDown('fast');
var stringOfClassNames = '';
var thisClassString = $("#holder li." + selection).attr('class');
stringOfClassNames = stringOfClassNames + ' ' + thisClassString;
var arrayClasses = stringOfClassNames.split(' ');
$.each(arrayClasses, function () {
$('.filters input[value=' + this + ']').parent('li').addClass('checked');
$('.filters input[value=' + this + ']').parent('li').find('label').css({ 'color': '#efefef' });
$('.filters input[value=' + this + ']').attr('checked', 'checked');
});
$(this).parent('li').addClass('checked');
$(this).parent().find('label').css({ 'color': '#efefef' });
if ($.browser.webkit) {
$('#main #holder li').css({ 'position': 'relative' })
}
} else {
$("#holder li." + selection + " img").fadeOut('slow');
$("#holder li." + selection).slideUp('fast', function () {
var stringOfClassNames = '';
var thisClassString = $("#holder li." + selection).attr('class');
stringOfClassNames = stringOfClassNames + ' ' + thisClassString;
var arrayClasses = stringOfClassNames.split(' ');
$.each(arrayClasses, function () {
$('.filters input[value=' + this + ']').parent('li').removeClass('checked');
$('.filters input[value=' + this + ']').parent().find('a.jqTransformCheckbox').removeClass('jqTransformChecked');
$('.filters input[value=' + this + ']').parent('li').find('label').css({ 'color': '#40575F' });
$('.filters input[value=' + this + ']').removeAttr('checked');
});
if ($('.filters input:checked').length & lt;= 0){
$("#holder li").slideUp('fast');
$(".played").slideDown('fast');
}
});
$(this).parent('li').removeClass('checked');
$(this).parent('li.' + selection + ' input[type=checkbox]').removeAttr('checked');
$(this).parent().find('label').css({ 'color': '#40575F' });
if ($('#filterIDall').is(':checked')) {
$('#filterIDall').removeAttr('checked');
$('#filterIDall').parent().find('li').removeClass('checked');
$('#filterIDall').parent().find('label').css({ 'color': '#40575F' });
}
}
}
});
});
In conclusion, this is a great bit of Interface Design that I'm quite proud of. I do know there are a few slight improvements possible and I'm open to any comments but hope someone out there finds it helpful.
wohooo, thats so awesome! just what i needed. blog bookmarked.
This is AWESOMEEEEEE!!!!! very well done.
I have a question. Do you think is possible to call the list from a DB and achieve the same result and have a lighter script?
Hi Luca. I guess you mean with Ajax. I can’t see a reason why you couldn’t adapt the script to work with Ajax calls rather than everything on the page. It’d be great to see it inspire something else.
My brother suggested I might like this web site. He was once entirely right. This put up truly made my day. You can not believe just how so much time I had spent for this information! Thanks!
Me too… i spent several hours, days, weeks… searching for a script like this one… !!!! It´s amazing!! Thanks a lot! Can we use it for free? What license do you use it on this project?
Thank you!!
Excellent, I was frustrated with the lack of something like this, which is why I wrote it. It is free to use as you wish, add to it or modify how you like.
There is a ‘donate’ link at the bottom of the site so if you feel generous, it wouldn’t go unappreciated.
Awesome tutorial. Is there a way that I can make the “Image placeholder” to be 200×200 so there will be a 3 columns of images?
You should be able to change anything via css and html as long as all the classes and stuff jquery needs are still in place. Have a play and let me know.
Nico one!
Is it possible to sort entries in there original order when clicking individual ones? Now all is only being sorted in order if you click on “show all”. With the other options, if clicked, it shows google, then yahoo.. (so they are not mixed on entry order)
Cheers Kris
It doesn’t do this at the moment but definitely scope there for further development.
This is amazing! Thank you!!!
That’s gr8!!! keep it up 🙂
Hi there,
that is a really cool filter. I was wondering: Is it posible to see all results in the beginning and exclude result through the filter?
Many Thanks
Klaus
Yes, it should just be a small change in the initial call. Have a play!
Hey! Great script, looking forward to using it. Question: How possible is it to modify the JS to return results that match only specified checks? Currently if you click a value in one section, it will automatically tick all corresponding classes. Doing this would make this script a little more dynamic, but I don’t have the brains to figure it out. Thanks in advance 🙂
Thanks for the new comments guys. So glad and flattered this script has become so popular.
Unfortunately it would seem some of you ‘don’t have the brains’ and I don’t have the time to support all requests for modifications as I’m working doing this sort of stuff full time for a Web Agency.
Everything you’ve all suggested is very possible so feel free to rip it apart, do what you want with it and see what you can come up with. That’s the only way to learn. Good luck all!
You are the biggest life saver ever! 😉
No problem 🙂
Very Nice! Exactly what I was looking for – excellent intuitive design. Thanks very much.
Not a problem, glad to have helped you out.
Very nice tutorial. Many thanks for this. However I have additional requirement on top of this and I am not able to implement my own requirement. My requirement is: if the number of elements is huge (say 500) and if I need to implement pagination to the result of multiple filter, how do I implement? Please help me with a code.
Unfortunately I don’t have the time to support requests. Feel free to pull the plugin apart and play with it though. Good luck!
looks great, but i cant get it to work. im kinda noob at this stuff. can anyone send me the source code in a zip or rar file and send it to saleemgagguturu@live.com
thx
Unfortunately I don’t have time to support your request. Have you looked at the demo (http://demos.webegg.co.uk/jquery-multiple-filter/)? That works and you can copy everything down to your local machine to play with it.
First off I love your code its perfect for my needs except for one feature.
Im planning to create a site with alot of checkboxes and results with multiple tags, is there anyway to stop the code from ticking multiple checkboxes when I only select one?
I would like the only checkboxes to be ticked to be ones the user selects.
Thx again for ur code its saving my project!
There’s always a way. Happy developing.
hi ! Awesome script !
I need some help with editing the script.
I do count all elements after filtering.
for example: Found: xxx elements
If you hire a developer I’m sure they can help you.
Thank You.thats so awesome just what i needed
Hey! Brilliant script!
I noticed that when you click ‘2006’ as your first filter selection, the ‘geewiz’ , ‘administration’ & ‘writing’ categories don’t autoselect. The holder shows all the related projects, but the .filter checkboxes only highlight the categories related to the first list item with ‘2006’. ”
Just wondering if you did this on purpose for any reason? Thank you!