FREELessons: 12Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Adding Functionality to Our Filterable Portfolio

Our filterable portfolio is hardly filterable right now, so let’s fix that with help from the famous and incredibly useful Isotope plugin.

Related Links

3.5 Adding Functionality to Our Filterable Portfolio

Welcome back to Power Up Your Portfolio with Bootstrap, I'm your instructor Cory Simmons. In the last lesson we learned how to use and override bootstrap's pill navigation component and got more familiar with bootstrap's grid system. In this lesson we'll use a JavaScript plugin call isotope to add functionality to our filterable portfolio. First things first, go to and immediately you'll see one of these filterable UI elements. Click around on the different filter buttons to get a feel for what we'll be implementing. Now click on the Filtering link in the sidebar. If we skip down to the UI section, we can essentially copy and paste this example into our code. First we'll need to import isotope, though. Remember bower? We can use it to grab a copy of isotope to use. So open up a terminal, cd to your project root, and type bower install isotope. It'll grab a copy of isotope.js and put it in your bauer components folder. If we open up that folder we can see that the path of the file is in our underscore components forward slash isotope forward slash dist forward slash isotope pkgd.min.js. So let's include that script under our, under our bootstrap script towards the bottom of our markup. Just make sure it appears before main.js, so we know isotope is being loaded before we try to use it in main.js. Now open up main.js, this is where we'll put all of our custom JavaScript. So, if we look back at the isotope example, we can see that we first need to initialize isotope on a container that houses our portfolio items. And the example they use, the container ID, but in our website, we have a portfolio-items class that is housing all of our portfolio items. So, we use it on that instead. We'll pass layout to the initializer to make sure our portfolio items don't end up sitting on top of each other when they first fire up. So we'll say, var $ container equals $ portfolio items.isotope. And then pass Layout to it. Next let's copy the filterable part of the code. Says the filter's id on click. It'll be executed on the button, and there will be a function with the variable filter value. And this button gets click, the attribute of it, its data filter, will be the variable filter value. Container dot isotope, and then we're passing the filter a filter value. So whenever we pass that filter value, it's actually just the button that we click's data filter attribute. Firstly, we don't have a filters ID. So let's change that to the class portfolio dash filter. And we don't have buttons, we have anchors. So make sure to change that as well. And be sure that the portfolio filter class exists in your markup by adding it to the nav pills that have all of our filter-able anchors in them. Any time you pass a hash to an anchor and click on that anchor, it'll take you to the top of the page. We want dead anchors, but we don't want to jump up to the top of the page each time we click on one of these dead links. So let's pass an e to that function, and then say e.preventdefault, to prevent that default event from firing. This effectively cancels out whatever the standard behavior for an element is. Now refresh, and our portfolio still doesn't work. What's going on? Well, it's because Isotope operates by finding certain bits and pieces in our markup and acting upon them. So let's add an data dash filter equals asterisk to our all anchor, data filter animation to our animation anchor, and so on. [BLANK_AUDIO] Now let's go down into our portfolio items and add those classes to them as we see fit. We can even add two or more of these classes to filters to any of our portfolio items if they apply to each category. [BLANK_AUDIO] Now if we refresh, our portfolio works and looks great. But we still have a problem our pill navigation isn't changing when it's clicked on. So let's do that now. First let's remove the active class from any list item whenever a link is clicked. Then say whenever this link is clicked on, find its containing list item and apply the class of active to it. [BLANK_AUDIO] Refresh and voila, our portfolio is now filterable and looks amazing. In this lesson we learned how to use the JavaScript Isotope plug-in to make an incredible filterable portfolio. In our next lesson, we'll apply some finishing touches to our home page.

Back to the top