Highlight an Active Isotope Filter: The Problem

My youngest sister graduated from Georgia Tech (Go Jackets!) and was creating her portfolio site so she can continue applying for post-bachelor’s degree jobs. While helping her with this (as any good, web-developer brother would do) we ran across the perfect use for isotope filtering on her projects. Then today, while working on a site, I came across another use for it. In both cases, it just made good user experience sense to highlight an active isotope filter. So, when I realized on my sister’s site that I had no idea how to highlight an active isotope filter, I got to work.

I’m quickly getting back into the swing of using javascript and jQuery, but I’m not all there…yet. In other words, to say it took me a bit to remember what exactly I needed to do is an understatement. Luckily, I was doing this for my sister and she wasn’t too impatient. My programming process usually entails me creating comments that follow the flow in which I think things should go. This time was no different. My first draft at a little JS function looked like what’s below.

The Start

// We need a function to get us started once the document is ready
// Then we'll need to have this function do something when the anchor text is clicked
// If there is an element with the selected class, we'll need to remove it
// Then we need to add the class to the element that was clicked

That really was more simple than my initial jump. “Well we need to have two different functions, one that unselects and the other that selects.” ‘Tis the reason I comment first, write code later. Obviously in such a small site, I could have used unit tests but why?

Now that we have the comments version of what we need to do, let’s create it. In order to invoke the function when a page is ready, we’ll just use jQuery(document).ready(function($)){}. Note the $ can be interchanged for another character should you have another script using jQuery that would conflict with ours. I typically put all my jQuery in one js file and set it to j instead of the $. This way I can typically avert conflicts.

Next in our journey to highlight an active isotope filter, we will “have this function do something when the anchor text is clicked.” Otherwise said (or rather, programmed): $('body').on('click','.filters li a', function(){}. Let’s dissect that a little bit. The $(‘body’) is telling jQuery which element to look for that contains what we are looking for. It doesn’t have to be the body element, but in this case it’s what I used. Since the code below is an example of our list items, it could have been `.filters` or even `.filter-group`.

<div class=".filter-group">
  <ul class=".filters">
    <li><a href="javascript:void();" data-filter="*">All</a></li>
    <li><a href="javascript:void();" data-filter=".prototype">Prototypes</a></li>
  </ul>
</div>

We have jQuery listening now for the body elements which, on ‘click’, will evaluate to see if they match the .filters class and are an anchor link within a list-item. If all that matches, then it will run the next function that actually does the meat of our activities.

The Meat Function

The first thing that needs to happen in our ‘meat function’ is evaluate if there is an element with the class ‘.checked.’ If there is, we need to remove the class so it is no longer checked. I initially had it iterating through the group of possible filter elements. That would then pass that to another function which used the jQuery.find() method to search for the element with that class so it could then remove it.

It didn’t take long for me to realize this was way too much code. So, we deleted all that mess out and started anew. This time, I thought about exactly what we were doing. There was only one thing on the screen being filtered so I didn’t have to worry about extra things being cleared. If we did, we wouldn’t be using the body element to listen on above. Instead I thought about what we needed to do: “use the class selector to remove itself.” That’s what we did with $('.is-checked').removeClass('is-checked');. It’s probably a good time to take a look at what we’ve done so far towards our goal of trying to highlight an active isotope filter.

/* We need a function to get us started once the document is ready */
jQuery( document ).ready( function( $ ) ) {
  // Then we'll need to have this function do something when the anchor text is clicked
  $( 'body' ).on( 'click', '.filters li a', function (){
    // If there is an element with the selected class, we'll need to remove it
    $( '.is-checked' ).removeClass( 'is-checked' );
    // Then we need to add the class to the element that was clicked
  });
});

Highlight an Active Isotope Filter: The Finale

All that remains is adding the class ‘is-checked‘ to the clicked anchor element triggering the isotope filter. That’s the one we want to highlight anyways. For this, we will just use the .addClass() method. It goes a little something like this: $( this ).addClass( 'is-checked' );.

To make sure our element is styled correctly, have a CSS style for the is-checked class selector. If not, the changes aren’t going to be visible unless you have DevTools or Firebug or something up.

The final code looked about like this:

// We need a function to get us started once the document is ready
jQuery( document ).ready( function( $ ) ) {
  // Then we'll need to have this function do something when the anchor text is clicked
  $( 'body' ).on( 'click', '.filters li a', function (){
    // If there is an element with the selected class, we'll need to remove it
    $( '.is-checked' ).removeClass( 'is-checked' );
    // Then we need to add the class to the element that was clicked
    $( this ).addClass( 'is-checked' );
  });
});

Thanks for playing and, as always, if you are in need of a web developer, please get in touch with me.