jQuery

Creating a “Filterable” Portfolio with jQuery

Feb 3rd in JavaScript & AJAX by Trevor Davis

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.

PG

Author: Trevor Davis

Hi, I’m Trevor Davis, and I make websites. I’m obsessed with them; it’s a problem. I’m a 24 year old Front-End Developer living in Alexandria, VA. I work full-time at Matrix Group International and freelance on the side. I specialize in CSS, HTML, jQuery and WordPress. I spend a lot of my time writing blog articles, building websites, playing basketball, and watching movies.

Final Product

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.

  1. 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.
  2. You can use a similar technique from my last tutorial: setting a parameter in the url.
  3. 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.

IE Screenshot

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.

Final Product

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

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    Sérgio Soares February 3rd

    Super

    ( Reply )
  2. PG

    florian February 3rd

    exactly what I was looking for. Thank you very much for this post.

    ( Reply )
  3. PG

    Dan February 3rd

    Looks good – I was actually just trying to figure out how I could set this up on my portfolio site.

    ( Reply )
  4. PG

    john February 3rd

    wow, it’s a great template starter for a portfolio.
    Thanks for this.

    ( Reply )
  5. PG

    Mason Sklut February 3rd

    Very neat. Would be useful with a “lightbox” feature on the pages.

    ( Reply )
  6. PG

    Matt February 3rd

    Great stuff, nice JQuery effects!

    ( Reply )
  7. PG

    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

    ( Reply )
  8. PG

    Nokadota February 3rd

    This has been an informative and extremely helpful tutorial. Thanks a lot. I hope to implement this effect into some themes.

    ( Reply )
  9. PG

    Greg February 3rd

    This is quite an interesting tutorial, thanks!
    - Greg

    ( Reply )
  10. PG

    Brenelz February 3rd

    This is a great tutorial! Neat Effect!

    ( Reply )
  11. PG

    mamjed February 3rd

    this is amazing!

    ( Reply )
  12. PG

    TheDoc February 3rd

    Fantastic tutorial, just wish it went that one step further to make the transitions a little smoother.

    Good stuff!

    ( Reply )
  13. PG

    insic February 3rd

    awesome! I like it. thanks for sharing

    ( Reply )
  14. 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! :-)

    ( Reply )
  15. PG

    Joefrey Mahusay February 3rd

    Wow this is great! Thanks a lot. :)

    ( Reply )
  16. PG

    Mitch February 3rd

    woah thanx a lot could probably use it soon…

    ( Reply )
  17. PG

    Simon February 4th

    Nice effect! I can use this!

    Great post!

    ( Reply )
  18. PG

    Al February 4th

    Would nbe great if this fantastic site offers stuff like this for MooTools

    ( Reply )
  19. PG

    sfeerhaarden February 4th

    Great tutorial
    I realy like the filtering function

    ( Reply )
  20. PG

    Fred Soler February 4th

    Ok, will try to make this tonight.

    Thanks.

    ( Reply )
  21. PG

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

    ( Reply )
  22. PG

    M.A.Yoosuf February 4th

    simply awesome, im gonna useit for my portfolio

    ( Reply )
  23. PG

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

    ( Reply )
  24. PG

    Abhisek February 4th

    Cool

    ( Reply )
  25. PG

    Sirsly February 4th

    Why not integrate in the blogroll page of wordpress? Is an idea? :-)

    ( Reply )
  26. PG

    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

    ( Reply )
  27. PG

    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!

    ( Reply )
  28. PG

    chris simpson February 4th

    nice tut, hadnt thought about using hasClass / removeClass for filtering, nice one :)

    ( Reply )
  29. PG

    Yatrik February 4th

    Superb article indeed.

    ( Reply )
  30. PG

    Luke's Beard February 4th

    This is perfect , just what i was after. Great stuff!

    ( Reply )
  31. PG

    Patternhead February 4th

    Great tutorial. I can see this being useful for other things, not just portfolios.

    ( Reply )
  32. PG

    Thiago Pereira February 4th

    Hello I’m from Brazil.
    I really enjoyed the article, congratulations!

    ( Reply )
  33. PG

    bruno February 4th

    Great.
    This will be very usefull for me:)

    ( Reply )
  34. PG

    Aperta February 4th

    Yaha.., not bad.. keep up!

    ( Reply )
  35. PG

    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!

    ( Reply )
  36. PG

    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.

    ( Reply )
  37. PG

    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.

    ( Reply )
  38. PG

    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!

    ( Reply )
  39. PG

    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.

    ( Reply )
  40. PG

    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.

    ( Reply )
  41. PG

    Wayne February 4th

    Yes, yes, yes — very cool! I was looking to upgrade my portfolio, and you’ve given me some great ideas. Thanks!

    ( Reply )
  42. PG

    Matt February 4th

    Thanks for sharing, gonna try and use it soon.

    ( Reply )
  43. PG

    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.

    ( Reply )
  44. PG

    Daniel February 4th

    Very nice.
    You can try to change fadeIn() to slideDown() and fadeOut() to slideUp()

    :)

    ( Reply )
  45. PG

    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.

    ( Reply )
  46. PG

    Shane February 4th

    Good stuff. Just a small point – I would keep the original jQuery version in the filename.

    ( Reply )
  47. PG

    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.

    ( Reply )
  48. PG

    Ronny February 4th

    Great!

    i will share this filterable portfolio with our friends.

    Thanks a lot.

    ( Reply )
  49. PG

    Timothy February 4th

    Nice effect.

    ( Reply )
  50. PG

    crysfel February 4th

    thats easy!! but the idea is great!!

    ( Reply )
  51. PG

    Zargam February 4th

    simply awesome!!

    ( Reply )
  52. PG

    monaye February 4th

    easy, effective and useful. Great tut!! thank you,

    ( Reply )
  53. PG

    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.

    ( Reply )
  54. PG

    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.

    ( Reply )
  55. PG

    Mat February 4th

    Killer! Thank you.

    ( Reply )
  56. PG

    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.

    ( Reply )
  57. PG

    ardhian.satrya February 5th

    This is very very useful! Thanks for the post!

    ( Reply )
  58. PG

    David February 5th

    What happens when the images are different sizes?

    ( Reply )
  59. PG

    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.

    ( Reply )
  60. PG

    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.

    ( Reply )
  61. PG

    João Pedro Pereira February 8th

    Excelent article, I’ve loved it and I think I’ll adapt it to my new portfolio design!

    ( Reply )
  62. PG

    myows February 8th

    this is sweet !

    ( Reply )
  63. PG

    Jonny Haynes February 9th

    Would this work with lightbox or something similar? No conflicts?

    ( Reply )
  64. PG

    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?

    ( Reply )
  65. PG

    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.

    ( Reply )
  66. PG

    mukatebal February 12th

    wooowww. thats great

    ( Reply )
  67. PG

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

    ( Reply )
    1. PG

      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?

      ( Reply )
  68. PG

    M.A.Yoosuf February 13th

    just i noticed, its similer to http://www.viget.com/work

    awsome worck man, continue continue

    ( Reply )
  69. PG

    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.

    ( Reply )
  70. PG

    Scott February 19th

    Hi, Whenever I try and use this with a lightbox, it no longer works. Does anyone have a fix for that?

    ( Reply )
  71. PG

    Paul February 19th

    That’s really useful. I love it.

    Thanks a lot for this tutorial.

    Paul

    ( Reply )
  72. PG

    Maegog Studios February 19th

    I implemented this for my portfolio. It works wonderfully! Thanks!

    http://www.maegogstudios.com/category/portfolio

    ( Reply )
  73. PG

    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

    ( Reply )
  74. PG

    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.

    ( Reply )
  75. PG

    Chris Paul February 23rd

    My tweaked version: http://www.chrispaul.ws/filterable/

    Edit the .js and .css files.

    ( Reply )
  76. PG

    Steve Forbes February 24th

    Awesome, just used this on my friends gallery. Turned out awesome! Thanks for the tutorial! :)

    ( Reply )
  77. PG

    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!

    ( Reply )
  78. PG

    Sadia February 28th

    Thanks it is Just Wonderful , so it is the Updated one Fixed by Chris ?

    ( Reply )
  79. PG

    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.

    ( Reply )
  80. PG

    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.

    ( Reply )
  81. PG

    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!

    ( Reply )
  82. PG

    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?

    ( Reply )
    1. PG

      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)

      ( Reply )
  83. PG

    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?

    ( Reply )
  84. PG

    mengbo March 11th

    good,very good.

    ( Reply )
  85. PG

    leorios March 15th

    Very good tut … thanks for posting

    ( Reply )
  86. PG

    Hiren Modi March 19th

    Superb tut, Thanks.

    ( Reply )
  87. PG

    Neal March 21st

    This is wonderful. I’ve been needing something like this. Thank you!

    ( Reply )
  88. PG

    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?

    ( Reply )
  89. PG

    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.

    ( Reply )
  90. PG

    sparkybarkalot March 23rd

    The above post from sparkybarklot should have said “…height and width in your image tags…”

    ( Reply )
  91. PG

    crawford13 March 28th

    not exactly sure what to change in the css for chris paul’s tweaks. could you possibly post it.

    thanks

    ( Reply )
  92. PG

    Nirmal April 1st

    superb….

    ( Reply )
  93. PG

    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

    ( Reply )
  94. PG

    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?

    ( Reply )
  95. PG

    Trinity4ever April 16th

    Great tutorial. Thanks for ideas.

    ( Reply )
  96. PG

    Curtis April 20th

    Is it possible to directly link to a page with something other than “all” selected?

    Thanks!

    ( Reply )
  97. PG

    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

    ( Reply )
  98. PG

    CgBaran Tuts May 10th

    Great tutorial thanks

    ( Reply )
  99. PG

    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

    ( Reply )
  100. 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.

    ( Reply )
  101. PG

    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.

    ( Reply )
  102. PG

    SEO Consultant May 22nd

    Very nice portfolio filter. Good for showcase different types of web design portfolios! Cool!

    ( Reply )
  103. PG

    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

    ( Reply )
    1. PG

      Jonny August 25th

      Did u get a response? Or find a solution?

      ( Reply )
  104. PG

    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’?

    ( Reply )
  105. PG

    hiuyu June 16th

    nice work.
    i like it. it is simple and clear.

    ( Reply )
  106. PG

    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?

    ( Reply )
  107. PG

    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,’-');

    ( Reply )
  108. PG

    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.

    ( Reply )
  109. PG

    lucas July 12th

    hi great tutorial, is possible to sort by date as well

    ( Reply )
  110. PG

    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!

    ( Reply )
  111. PG

    marinus August 8th

    Nice tut. The demo did not work with ie8.

    ( Reply )
  112. PG

    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”

    ( Reply )
  113. PG

    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.

    ( Reply )
  114. PG

    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.

    ( Reply )
  115. PG

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

    ( Reply )
  116. PG

    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.

    ( Reply )
  117. PG

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

    ( Reply )
  118. PG

    Paul August 26th

    man i love this. just what i needed to organize a list of physicians on a surgery website (:

    ( Reply )
  119. PG

    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.

    ( Reply )
  120. PG

    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…

    ( Reply )
  121. PG

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

    ( Reply )
  122. PG

    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

    ( Reply )
  123. PG

    ali September 13th

    it’s working very good.

    ( Reply )
  124. PG

    Adam September 15th

    Would inline block work to combat the IE6 issue? seems to work easily cross browser when conditional comments are used?

    ( Reply )
  125. PG

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

    ( Reply )
  126. PG

    DRoss September 18th

    Chris Paul with the sweet assist.

    ( Reply )
  127. PG

    Web Design SG September 19th

    Thanks for this! Very help!

    ( Reply )
  128. PG

    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.

    ( Reply )
  129. PG

    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?

    ( Reply )
  130. PG

    alex September 30th

    hey there ,

    check out my version of filterable portfolio combined with highslide.js

    http://alex-web.gr/filterable/

    ( Reply )
  131. PG

    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!

    ( Reply )
  132. PG

    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

    ( Reply )
  133. PG

    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?

    ( Reply )
  134. PG

    Xaby October 8th

    suuuuuuuuuuperb!

    ( Reply )
  135. PG

    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

    ( Reply )
  136. PG

    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

    ( Reply )
  137. PG

    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

    ( Reply )
  138. PG

    Rob October 15th

    Excellent article. I thought doing something like this would be a lot more complicated.

    ( Reply )
  139. PG

    Sascha October 23rd

    Thanks alot! Great idea!

    I pimped my portfolio with this kind of effect.

    http://brotherskorth.com/index.php?id=referenzen

    ( Reply )
  140. PG

    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

    ( Reply )
  1. Arrow
    Gravatar

    Your Name
    November 17th