If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make "filtering by category" a little more interesting with just a little bit of jQuery.
The Markup
Our portfolio is nothing more than a simple unordered list:
<ul id="portfolio"> <li><a href="#"><img src="images/a-list-apart.png" alt="" height="115" width="200" />A List Apart</a></li> <li><a href="#"><img src="images/apple.png" alt="" height="115" width="200" />Apple</a></li> <li><a href="#"><img src="images/cnn.png" alt="" height="115" width="200" />CNN</a></li> <li><a href="#"><img src="images/digg.png" alt="" height="115" width="200" />Digg</a></li> <li><a href="#"><img src="images/espn.png" alt="" height="115" width="200" />ESPN</a></li> <li><a href="#"><img src="images/facebook.png" alt="" height="115" width="200" />Facebook</a></li> <li><a href="#"><img src="images/google.png" alt="" height="115" width="200" />Google</a></li> <li><a href="#"><img src="images/netflix.png" alt="" height="115" width="200" />Netflix</a></li> <li><a href="#"><img src="images/nettuts.png" alt="" height="115" width="200" />NETTUTS</a></li> <li><a href="#"><img src="images/twitter.png" alt="" height="115" width="200" />Twitter</a></li> <li><a href="#"><img src="images/white-house.png" alt="" height="115" width="200" />White House</a></li> <li><a href="#"><img src="images/youtube.png" alt="" height="115" width="200" />YouTube</a></li> </ul>
Note: I was by no means a part of creating these wonderful sites; I am just using them as examples.
Categorizing the Portfolio
We are going to assume that our portfolio can be broken down into 5 categories:
- Design
- Development
- CMS
- Integration
- Information Architecture
In order to use the categories we have defined, we will convert them to lowercase and replace all spaces with hyphens:
- Design = design
- Development = development
- CMS = cms
- Integration = integration
- Information Architecture = information-architecture
We are going to assume that each portfolio item could be in one or many categories, so we are going to randomly add our newly created categories as classes to the list items:
<ul id="portfolio"> <li class="cms integration"> <a href="#"><img src="images/a-list-apart.png" alt="" height="115" width="200" />A List Apart</a> </li> <li class="integration design"> <a href="#"><img src="images/apple.png" alt="" height="115" width="200" />Apple</a> </li> <li class="design development"> <a href="#"><img src="images/cnn.png" alt="" height="115" width="200" />CNN</a> </li> <li class="cms"> <a href="#"><img src="images/digg.png" alt="" height="115" width="200" />Digg</a> </li> <li class="design cms integration"> <a href="#"><img src="images/espn.png" alt="" height="115" width="200" />ESPN</a> </li> <li class="design integration"> <a href="#"><img src="images/facebook.png" alt="" height="115" width="200" />Facebook</a> </li> <li class="cms information-architecture"> <a href="#"><img src="images/google.png" alt="" height="115" width="200" />Google</a> </li> <li class="integration development"> <a href="#"><img src="images/netflix.png" alt="" height="115" width="200" />Netflix</a> </li> <li class="information-architecture"> <a href="#"><img src="images/nettuts.png" alt="" height="115" width="200" />NETTUTS</a> </li> <li class="design information-architecture cms"> <a href="#"><img src="images/twitter.png" alt="" height="115" width="200" />Twitter</a> </li> <li class="development"> <a href="#"><img src="images/white-house.png" alt="" height="115" width="200" />White House</a> </li> <li class="cms design"> <a href="#"><img src="images/youtube.png" alt="" height="115" width="200" />YouTube</a> </li> </ul>
Adding Category Navigation
Now that we have the portfolio pieces in place, we are going to need some way to navigate through them. Another unordered list should do:
<ul id="filter"> <li class="current"><a href="#">All</a></li> <li><a href="#">Design</a></li> <li><a href="#">Development</a></li> <li><a href="#">CMS</a></li> <li><a href="#">Integration</a></li> <li><a href="#">Information Architecture</a></li> </ul>
Since I want the default view of the portfolio to show All items, I have assigned a class of current to the first list item.
You will probably look at that and question me on the accessibility of this example. My thought is that you have 3 options to solve that problem.
- When creating a portfolio like this, there is a strong probability that it will be database driven. Thus, you should be able to create a separate page for each category. So if a user does not have JavaScript enabled, they can go to the separate page with the filtered portfolio.
- You can use a similar technique from my last tutorial: setting a parameter in the url.
- You could always just write in the navigation with JavaScript before the portfolio items:
$(document).ready(function() { $('ul#portfolio').before('<ul id="filter"><li class="current"><a href="#">All</a></li><li><a href="#">Design</a></li><li><a href="#">Development</a></li><li><a href="#">CMS</a></li><li><a href="#">Integration</a></li><li><a href="#">Information Architecture</a></li></ul>'); });
Ok, you’ve got my notes on accessibility, so don’t criticize me for not thinking about it.
The CSS
This tutorial is not meant to be about CSS, so I’m going to run through the CSS pretty quickly.
I always start with some basic styles as a sort-of framework, so I’m not going to go over those styles right now. These styles basically just act as a reset and define some styling for basic elements.
To start, I just want to display the categories across the top horizontally with a border between each:
ul#filter {
float: left;
font-size: 16px;
list-style: none;
margin-left: 0;
width: 100%;
}
ul#filter li {
border-right: 1px solid #dedede;
float: left;
line-height: 16px;
margin-right: 10px;
padding-right: 10px;
}
Next, I want to remove the border from the last list item (in browsers that support it) and change the display of the links:
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #999; text-decoration: none; }
I also want to make sure and differentiate the currently selected category:
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #333; font-weight: bold; }
Ok, now that we have the category navigation styled, let’s focus on the actual layout of the portfolio. Let’s plan on floating 3 list items next to each other with a border around each one:
ul#portfolio {
float: left;
list-style: none;
margin-left: 0;
width: 672px;
}
ul#portfolio li {
border: 1px solid #dedede;
float: left;
margin: 0 10px 10px 0;
padding: 5px;
width: 202px;
}
Now, we just need to add some basic styling for the images and links:
ul#portfolio a { display: block; width: 100%; }
ul#portfolio a:hover { text-decoration: none; }
ul#portfolio img { border: 1px solid #dedede; display: block; padding-bottom: 5px; }
Compensating for Internet Explorer 6
Of course, let’t not forget about our friend IE6. Once you start clicking through some of the filters, the layout gets a little crazy.
From what I can tell, it is the dreaded IE Double Margin bug. I tried applying display: inline to the list items once they are filtered, but that didn’t seem to fix it. So my best solution was to just halve the right margin:
ul#portfolio li { margin-right: 5px; }
We are of course only going to serve this IE6 specific stylesheet using conditional comments:
<!--[if lt IE 7]> <link href="stylesheets/screen-ie6.css" type="text/css" rel="stylesheet" media="screen,projection" /> <![endif]-->
Yeah, it doesn’t look as good, but you know what: I don’t care. If you are using IE6, you deserve it.
The jQuery
Ok, now that we have the markup and CSS all done, let’t get to the important part of this tutorial: the JavaScript.
We are going to start by including the latest version of jQuery in the head of our document.
<script type="text/javascript" src="scripts/jquery.js"></script>
Next, we want to execute our code once the document is loaded.
$(document).ready(function() {
});
Now, we don’t want to do anything until one of our categories is clicked. We also want to make sure that we do not follow the href value of the link, so we need to return false:
$('ul#filter a').click(function() {
return false;
});
Once a category link is clicked, I want to do a couple of things: remove the outline on the clicked link, remove the class of current on the list item that has it, and add the class of current on the parent of the clicked link:
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');
Next, we want to get the text inside of the clicked link, convert it to lowercase, and replace any spaces with hyphens (just like before when we were creating the category classes):
var filterVal = $(this).text().toLowerCase().replace(' ','-');
The first case of the script is when the All link is clicked. When that is clicked, we want to show all of the portfolio items and remove the class of hidden:
if(filterVal == 'all') {
$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
}
Otherwise, one of the actual categories were clicked. So we want to go through each portfolio item and check to see if it has the class that equals the value of the category clicked. If it does not have the class, we want to fade out the list item and add a class of hidden. It it does have the class, we want to fade it in and remove the class of hidden:
else {
$('ul#portfolio li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
The Finished Script
Let’s take a look at the entire script:
$(document).ready(function() {
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#portfolio li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
Some people may not like the effect, but I think it looks pretty cool how they all kind of dance around. This is definitely not the only way to accomplish something like this, and it could easily be built on to do other things.
This technique is actually evolved from the coding that I did for my company’s portfolio.
One Quick Note
You may have noticed that I was adding and removing the class of hidden on the items as I was toggling the visibility. While I didn’t end up doing anything with the class, I try and make it a habit to add and remove classes to denote the state they are in. You may not use it immediately, but it can provide a hook for you do stuff with in the future.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Sérgio Soares February 3rd
Super
( )florian February 3rd
exactly what I was looking for. Thank you very much for this post.
( )Dan February 3rd
Looks good – I was actually just trying to figure out how I could set this up on my portfolio site.
( )john February 3rd
wow, it’s a great template starter for a portfolio.
( )Thanks for this.
Mason Sklut February 3rd
Very neat. Would be useful with a “lightbox” feature on the pages.
( )Matt February 3rd
Great stuff, nice JQuery effects!
( )Jaswinder February 3rd
DAMMIT Trevor its cool but I don’t know how you did it but you went into my brain and stole my idea! lol But very good tut so it will make it easier for me to code my idea
Also your blog is awesome that will be all
( )Nokadota February 3rd
This has been an informative and extremely helpful tutorial. Thanks a lot. I hope to implement this effect into some themes.
( )Greg February 3rd
This is quite an interesting tutorial, thanks!
( )- Greg
Brenelz February 3rd
This is a great tutorial! Neat Effect!
( )mamjed February 3rd
this is amazing!
( )TheDoc February 3rd
Fantastic tutorial, just wish it went that one step further to make the transitions a little smoother.
Good stuff!
( )insic February 3rd
awesome! I like it. thanks for sharing
( )Christopher Francis O'Donnell February 3rd
Wonderful. I’m not a huge fan of the fade effect, but just glimpsing at your code, it looks very flexible. I’d almost not use any effect at all. Just my preference.
Overall, great post!
( )Joefrey Mahusay February 3rd
Wow this is great! Thanks a lot.
( )Mitch February 3rd
woah thanx a lot could probably use it soon…
( )Simon February 4th
Nice effect! I can use this!
Great post!
( )Al February 4th
Would nbe great if this fantastic site offers stuff like this for MooTools
( )sfeerhaarden February 4th
Great tutorial
( )I realy like the filtering function
Fred Soler February 4th
Ok, will try to make this tonight.
Thanks.
( )James February 4th
Nicely executed idea Trevor! The order in which items fade in and out might need a bit of tweaking though. And thanks for mentioning accessibility in the article. Nice work!
( )M.A.Yoosuf February 4th
simply awesome, im gonna useit for my portfolio
( )Progmary February 4th
Thank you a lot!
I love this:
( )“Yeah, it doesn’t look as good, but you know what: I don’t care. If you are using IE6, you deserve it.”
Abhisek February 4th
Cool
( )Sirsly February 4th
Why not integrate in the blogroll page of wordpress? Is an idea?
( )isseykun February 4th
this surely is an inspiration for my upcoming work, its just the right idea – with a couple of modifications though
good work and many thanks
( )sven February 4th
you could even put some opacity on the non active items and leave em in the list. like so: christopherhewitt.com (love this one btw.)
( )if you, like mentioned earlier put a lightbox effect on it, its going to rock!
chris simpson February 4th
nice tut, hadnt thought about using hasClass / removeClass for filtering, nice one
( )Yatrik February 4th
Superb article indeed.
( )Luke's Beard February 4th
This is perfect , just what i was after. Great stuff!
( )Patternhead February 4th
Great tutorial. I can see this being useful for other things, not just portfolios.
( )Thiago Pereira February 4th
Hello I’m from Brazil.
( )I really enjoyed the article, congratulations!
bruno February 4th
Great.
( )This will be very usefull for me:)
Aperta February 4th
Yaha.., not bad.. keep up!
( )Stefan February 4th
I was just thinking of switching my site from Mootools to jQuery.
Heaviest js component of my site is my portfolio (a mootools timeline-like thingy I did) and I was so not looking forard to converting everything to jQuery.
This portfolio might just might be it!
And it would mean dropping some of the fancy effects for more usability in my case.
OFFTOPIC: Hey, Nettuts! Gmail just stole your buttons!
( )Mark February 4th
Similar to what I did here: http://www.trone.com/index.php/our-work/portfolio/ , but I dimmed instead of removing the elements.
( )Stephen Coley February 4th
“Yeah, it doesn’t look as good, but you know what: I don’t care. If you are using IE6, you deserve it.”
Amen Trevor, amen.
( )Lindsey February 4th
This is pretty sweet. Is there any way to make the transitions between categories a bit more fluid? In the demo it seems to flash back to the whole list – or at least combining the previous categories screenshots before showing the new category.
Sweet stuff though!
( )Andy Shaw February 4th
Nice demo, but kinda jumps right at the end for me in safari/mac. Maybe just need to play with the transition timing.
( )Jeremy February 4th
“Yeah, it doesn’t look as good, but you know what: I don’t care. If you are using IE6, you deserve it.”
Nice quote.
Nice tutorial, good clean code and is a neat effect that can be easily adapted.
( )Wayne February 4th
Yes, yes, yes — very cool! I was looking to upgrade my portfolio, and you’ve given me some great ideas. Thanks!
( )Matt February 4th
Thanks for sharing, gonna try and use it soon.
( )joe February 4th
Great idea, some work still needs to be done I think with how each elements fades out and comes back in, it isn’t very smooth (maybe if you sort the list as well, so when things fade back in the fade in after the visible items). Otherwise I think i like the examples of just dimming the the objects. Although when you dim them you should make them not clickable also.
( )Daniel February 4th
Very nice.
You can try to change fadeIn() to slideDown() and fadeOut() to slideUp()
( )John Deszell February 4th
Really cool tutorial! I might have to integrate something like this into my portfolio. You definitely have got the wheels turning in my head. My portfolio section could use some jazzin up.
( )Shane February 4th
Good stuff. Just a small point – I would keep the original jQuery version in the filename.
( )Jonas February 4th
“Of course, let’t not forget about our friend IE6.”
I cannot stress this enough…we have to kill the IE hack! Users will switch browsers only if stop offering IE workarounds.
( )Ronny February 4th
Great!
i will share this filterable portfolio with our friends.
Thanks a lot.
( )Timothy February 4th
Nice effect.
( )crysfel February 4th
thats easy!! but the idea is great!!
( )Zargam February 4th
simply awesome!!
( )monaye February 4th
easy, effective and useful. Great tut!! thank you,
( )Joe McCann February 4th
Nice tut, however, the page completely fails with JavaScript turned off. From an accessibility perspective, you should have the links return false, but ultimately link to other pages that are filtered.
( )Luis February 4th
Great job, I’m just learning this stuff and I wish I can be half as smart as you are my friend. Keep up the great job.
( )Mat February 4th
Killer! Thank you.
( )Lindsey February 4th
“I cannot stress this enough…we have to kill the IE hack! Users will switch browsers only if stop offering IE workarounds.”
No they won’t. They just won’t visit your site.
( )ardhian.satrya February 5th
This is very very useful! Thanks for the post!
( )David February 5th
What happens when the images are different sizes?
( )Paul J February 5th
Joe McCann, makes a good point about it not being degradable. I prefer jQuery that atleast degrades to some extent when the user does not have javascript. It’s some nice work though.
( )Emehrkay February 6th
Ehhh, it was ok. I am taking this as a “what is possible” type of example.
My only real suggestion to improve it would be make it more streamlined. So when (or as) an item fades out, shrink its container to zero width using a timed interval (overflow: hidden of course). This would get rid of the pop in and out effect that is happening now.
( )João Pedro Pereira February 8th
Excelent article, I’ve loved it and I think I’ll adapt it to my new portfolio design!
( )myows February 8th
this is sweet !
( )Jonny Haynes February 9th
Would this work with lightbox or something similar? No conflicts?
( )Steve February 9th
I’m trying to use this with multiple selections, isntead of single links to change the content. I’d like to set up the form so that only when Submit is clicked, the content refreshes with as many checkboxes that are checked.
Has anyone else tried doing something like this and had any luck?
( )Valerio Vaz February 12th
It seems i can’t integrate this into my wordpress blog. When i click on the menu the effect doesnt work and doesnt filter the images… maybe it’s the path that is not working well… i will try to fix it and post here the results.
( )mukatebal February 12th
wooowww. thats great
( )Chris Paul February 13th
I changed it up a bit so that all the portfolio items disappear and the wanted portfolio items reappear. It gets rid of that weird shifty effect that’s happening with yours. (Oh and my hidden css class also contains visibility: none;)
if(filterVal == ‘all’) {
( )$(’ul#portfolio’).fadeOut(’normal’,function(){
$(’ul#portfolioli.hidden’).removeClass(’hidden’);
$(’ul#portfolio’).fadeIn(’normal’);
});
}
else {
$(’ul#portfolio’).fadeOut(’normal’,function(){
$(’ul#portfolioli’).each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).addClass(’hidden’);
}
else{
$(this).removeClass(’hidden’);
}
$(’ul#portfolio’).fadeIn(’normal’);
});
});
}
Hjörtur Scheving September 17th
Thanks for your tweak, however I am running into a small problem with it, the thing is that sometimes a chosen category is empty.
I maybe have categories: hotels, guesthouses, camping.
And maybe on some pages the camping category is empty, so that when a visitor clicks on camping then everything goes away, as it should. But now when clicking back to All or other category, like hotel, then nothing is displayed.
Can this be fixed?
( )M.A.Yoosuf February 13th
just i noticed, its similer to http://www.viget.com/work
awsome worck man, continue continue
( )Sascha February 16th
Hey Chris,
didn’t get your “tweaks” running. Would be nice to see some tweaks for this script here. Maybe for a better fading.
( )Scott February 19th
Hi, Whenever I try and use this with a lightbox, it no longer works. Does anyone have a fix for that?
( )Paul February 19th
That’s really useful. I love it.
Thanks a lot for this tutorial.
Paul
( )Maegog Studios February 19th
I implemented this for my portfolio. It works wonderfully! Thanks!
http://www.maegogstudios.com/category/portfolio
( )pud February 19th
Just nitpicking but wouldn’t it have made more sense to use REL attribute on the anchor as opposed to arbitrary classes (which might conflict) on the LIs.
Otherwise neat idea
( )Keshia February 21st
Currently building my portfolio….life saver! I think you where reading my mind i was thinking about inter grading this exact feature.
( )Chris Paul February 23rd
My tweaked version: http://www.chrispaul.ws/filterable/
Edit the .js and .css files.
( )Steve Forbes February 24th
Awesome, just used this on my friends gallery. Turned out awesome! Thanks for the tutorial!
( )Virgil Spruit February 26th
Way better Chris Paul. I was already looking for a comment that noticed the shifting. And even better, you tweaked it!
( )Sadia February 28th
Thanks it is Just Wonderful , so it is the Updated one Fixed by Chris ?
( )Rocky March 4th
Wow nice skills can anyone here help design a set of UI designs which will be made public in a pack.
Ive already started in depth content and i will publish i just need more authors.
( )fwolf March 7th
perfect. That’s just what I wanted to create, but failed when it came to the IE (some JS bug kept appearing over and over). Gonna borrow some of your JSing, so maybe that’ll fix my problems
cu, w0lf.
( )Pranshu March 8th
This is pretty cool. Had I seen it sooner I might have used it on my website (http://pthesis.com) instead of hand-coding my own solution. Nice post!
( )Liam March 10th
If you just wanted to dim the non-selected elements as someone mentioned, rather that clear them, what change would you make?
( )mores May 15th
instead of
fadeOut(’normal’).addClass(’hidden’);
use
fadeTo(’normal’,0.1)
Of course, to fade back to normal you use
( )fadeTo(’slow’,1)
Liam March 11th
I’m trying to use this but must be overlooking something. My unselected items fade out as they should, but the list doesn’t shuffle back omitting the spaces where those items were. Any ideas?
( )mengbo March 11th
good,very good.
( )leorios March 15th
Very good tut … thanks for posting
( )Hiren Modi March 19th
Superb tut, Thanks.
( )Neal March 21st
This is wonderful. I’ve been needing something like this. Thank you!
( )Alex March 22nd
It’s great! But what if i don’t want to start with “All” but with an pre-defined filter? Class “current” only effects on the style. Can you help me?
( )sparkybarkalot March 23rd
Just a note for what it’s worth: if you forget to include height and width in your tags (oops) you get blank spots when applying filters.
( )sparkybarkalot March 23rd
The above post from sparkybarklot should have said “…height and width in your image tags…”
( )crawford13 March 28th
not exactly sure what to change in the css for chris paul’s tweaks. could you possibly post it.
thanks
( )Nirmal April 1st
superb….
( )Abhishek April 3rd
How can i make it work with lightbox gallery so that on clicking on a thumbnail within a filtered category, the lightbox doesn’t move to every image on the All category but only for the filtered thumbnails.
hiding the thumbnails by css ses to tbe problem. any workaround
( )Eric April 9th
Does anyone know if there is a way to not have it load All at first, instead just one of the categories?
( )Trinity4ever April 16th
Great tutorial. Thanks for ideas.
( )Curtis April 20th
Is it possible to directly link to a page with something other than “all” selected?
Thanks!
( )adam May 3rd
if one would want to create a secondary navigation @ the bottom that is in sync with the correct category what would need to be done
( )CgBaran Tuts May 10th
Great tutorial thanks
( )Boback May 12th
This is a great tutorial, very useful for my new portfolio.
However, it would be nice if the author could reply to a few of the requests asking how you could jump to a category, rather than showing ALL by default.
Many thanks
( )Insight Website Design Blog + Podcast May 12th
I’ve been using JQuery on my recent clients list, works wonders. Although you have to keep SEO in mind in some situations. Need to balance the two.
( )mores May 15th
Is there a way to get this to work with checkboxes?
( )First, I’d need to figure out how to change the link-click listener to a form checkbox select listener.
And then how to use two attributes simultanously. In your case, “cms” and “development”, for example.
SEO Consultant May 22nd
Very nice portfolio filter. Good for showcase different types of web design portfolios! Cool!
( )Lee May 29th
This is great, i am just starting out with jQuery and was wondering how easy it would be to implement pagination, some of my categories have 100 items in there, can I paginate after 10 items per page?
Appreciate any help
( )Jonny August 25th
Did u get a response? Or find a solution?
( )Stuart June 1st
Great tute. I am just starting out and found the detail in this very helpful.
How would you filter mutiple classes with using an OR rather than an AND comparator – ie ’show all with class of either Design OR Development’ rather than ’show all with class Design AND Development’?
( )hiuyu June 16th
nice work.
( )i like it. it is simple and clear.
Jacob June 19th
I am using this tutorial to build an rss feed widget for my site. I am trying to get it to automatically load a category/filter instead of displaying all of the items mixed together. I will still be using a tab that has all the rss feed titles, but I will be treating this tab as just a regular filter so that simplepie can sort the titles by time/date published. How do I change the javascript in order to do this?
( )sam June 19th
successfully set this up with wordpress. (using category_nicename to output the class names) however iif your titles/classes might have more than one space/hyphen then you need to change a line in framework.js
from this:
var filterVal = $(this).text().toLowerCase().replace(’ ‘,’-');
to this:
( )var filterVal = $(this).text().toLowerCase().replace(/ /g,’-');
Steve July 6th
I was totally able to use this for a kickass checkbox selection, for filtering a portfolio. I’ll have a link up soon. Thanks Trevor and NetTuts.
( )lucas July 12th
hi great tutorial, is possible to sort by date as well
( )Hiro July 17th
hi, thanks for great tutorial!
by the way, how can i use image as navigation menu?
( )please reply to my email add thanks!
marinus August 8th
Nice tut. The demo did not work with ie8.
( )Austin Siewert August 12th
What happens when you have a comma or ampersand in your filter categories. How can you disregard them and add a dash just between the words?
var filterVal = $(this).text().toLowerCase().replace(’ ‘,’-')
For instance I have a category: “Reds, Blues & Greens” I want returned “reds-blues-greens”
( )Brian August 13th
I am curious as well for Ampersands!
I am using this filterVal:
var filterVal = $(this).text().toLowerCase().replace(/ /g,’-');
For multiple spaces but I have ampersands in some and would like to get rid of it.
( )Anybody know the extra bit of code? or a javascript tut on the subject? couldn’t find anything revelant.
Josh August 24th
Very cool. I use something very similar to this on my themes site. However, I am thinking about switching away from it because there are too many themes and I don’t want this to affect load time.
( )Bjarne Christensen August 24th
This is an exciting effect! Specially after Chris Paul’s tweaking… Wonderful! Could anyone think of a way to make multiple filtering possible?
I’m thinking that for instance CMS, developing and design could hold a lot of the same entries.
A lot like this Danish concert calendar, http://www.albani.dk/, developed in Flash though. But the filtering is very much the same as this, if you could achieve the “multiple sorting”!
( )Balaji August 25th
Wow, I hadn’t thought about it that way before. Good write up, very clearly written. Have you written previously about Jquery ? I’d love to read more.
( )Jonny August 25th
I like it. Great tutorial!?
Now would there be a way to paginate?
Lets say you wanted to show results 1 – 10… on page 1, 10 – 20 on page 2.
If you filtered out 5 results from page 1.
Could you make page 1 still display 10 results?
(And then page 2 would display the next 5.)
( )Paul August 26th
man i love this. just what i needed to organize a list of physicians on a surgery website (:
( )Andy August 31st
Thanks man,
( )I have a really large number of previous web designs for my portfolio and I wanted to give that ‘quantity/experience’ initial impact but very easily offer the user filtering options. Your script saved me a lot of time so that I could concentrate more on the actual display of web designs. Now I just need the time to add them all – lol
Cheers dude.
AndieR September 7th
It’s a nice script but without the option of not opening it on the ‘all’ view, it can’t be applied to real life situations. I mean if we have 1000 screens there’s no way you can just load them all when the user first enters the page.
Just my take…
( )AndieR September 7th
I stand corrected, should have checked it out before posting! Here is a quick way to get rid of the ‘load all’ when the page loads.
$(document).ready(function() {
var filterVal = ‘page-1′;
$(’ul#portfolio’).fadeOut(’normal’,function(){
$(’ul#portfolio li’).each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).addClass(’hidden’);
} else {
$(this).removeClass(’hidden’);
}
$(’ul#portfolio’).fadeIn(’normal’);
});
});
$(’ul#filter a’).click(function() {
$(this).css(’outline’,'none’);
$(’ul#filter .current’).removeClass(’current’);
$(this).parent().addClass(’current’);
var filterVal = $(this).text().toLowerCase().replace(’ ‘,’-');
if(filterVal == ‘all’) {
$(’ul#portfolio’).fadeOut(’normal’,function(){
$(’ul#portfolio li.hidden’).removeClass(’hidden’);
$(’ul#portfolio’).fadeIn(’normal’);
});
}
else {
$(’ul#portfolio’).fadeOut(’normal’,function(){
$(’ul#portfolio li’).each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).addClass(’hidden’);
} else {
$(this).removeClass(’hidden’);
}
$(’ul#portfolio’).fadeIn(’normal’);
});
});
}
return false;
( )});
});
Liam September 9th
I had this working perfectly but seem to have done something that just makes all the items flash constantly when you try and filter. Can someone take a look and help at all?
http://bit.ly/4yWiDZ
( )ali September 13th
it’s working very good.
( )Adam September 15th
Would inline block work to combat the IE6 issue? seems to work easily cross browser when conditional comments are used?
( )Hjörtur Scheving September 17th
A bit late comment, and maybe nobody following this anymore but anyway I was wondering if someone could help me with a little problem I have.
I am using this to filter some search results you get on my site, but sometimes a category can be empty, so this filters everything out. That is great, but would be great if I could display some text if the category is empty. Something like “no results for this category”.
( )DRoss September 18th
Chris Paul with the sweet assist.
( )Web Design SG September 19th
Thanks for this! Very help!
( )DRoss September 24th
@Liam – I had the same problem, looks like you fixed yours.
I had written my own css, html and tweaked the js to match IDs/classes — One thing I didn’t have was float: left on my main portfolio UL. Added that and the flash flickering went away.
This may help someone else down the road.
My redesigned site/portfolio coming soon.
( )Jason Kirkendall September 29th
I too would like to have punctuation in my Filter Categories. For instance, I want Communications, Energy to be stripped down to communications-energy
How is this possible?
( )alex September 30th
hey there ,
check out my version of filterable portfolio combined with highslide.js
http://alex-web.gr/filterable/
( )Hung Nguyen October 1st
Who can help me!
I use this apps to my asp.net page, when I put it in tag, it does not work! Thank you all!
( )Hung Nguyen October 1st
Who can help me!
I use this apps to my asp.net page, when I put it in asp:content tag, it does not work! Thank you all!
Quang Hung
( )Alexander October 8th
This script’s great, but i’ve just started learning java and its frameworks so I’ve a lot of questions. The main of them is the question about non-english languages. So, how can I use russian words in the navigation if they used for class names? Actually, how can I use different words for navigation and for class names?
( )Xaby October 8th
suuuuuuuuuuperb!
( )Ashley October 11th
I’m trying to incorporate several jquery image galleries into the “thumbnails” of this filterable nav… however, they are not properly filtering, and simply disappear when I attempt to filter one section. Is it possible to have an image gallery as a thumbnail or only a single image?
( )Thanks
Hung Nguyen October 13th
Who use this apps into asp.net Master Detail page? I tried to use it in asp.net detail page but it did not work. It does work when put it into asp: content tag. Who use it successful in asp.net? Please help me!
Thanks
( )Hung Nguyen October 13th
Who use this apps into asp.net Master Detail page? I tried to use it in asp.net detail page but it did not work. It does not work when put it into asp: content tag. Who use it successful in asp.net? Please help me!
Thanks
( )Rob October 15th
Excellent article. I thought doing something like this would be a lot more complicated.
( )Sascha October 23rd
Thanks alot! Great idea!
I pimped my portfolio with this kind of effect.
http://brotherskorth.com/index.php?id=referenzen
( )Elliot November 17th
Hello,
Excellent article!
how could it be possible to use this filterable system for the homepage of a wordpress blog? Can we replace the hard coded html portfolio by a dynamic content classed by wordpress tags?
THanks a lot
Elliot
( )