Isotope is more than just a hardware accelerated pretty face, though. Imagine the last time you used eBay or any other site that allows you to apply (sometimes complex) filters and sort criteria to your search results. Sorting and filtering are inherently boring operations. You click a button and the server spits out the same page with some different items, or the same items in a different order. Not very exciting, and it puts the user a page load away from the data that they want to look at. What we loved about Isotope was the way it overcame this problem by dynamically sorting and ordering on the fly – and so easily too! Your filters can be regular jQuery selectors – so if you were searching an online clothes shop, simple class selectors like .jacket and .hoodie are totally acceptable filter criteria. Let’s have a look at a simple example:
Example
To get Isotope up and running, all you need is the CSS and Javascript library to be included onto your page and as little as one line of Javascript:
$('#your-element').isotope();
That’s all you need for the elements inside the container to be given full Isotope treatment. Of course, for sorting, filtering and the plethora of other features that Isotope has to offer, you’ll have to write just a little bit more code.
As mentioned earlier, just two of the features that we found ourselves using most was filtering and sorting…
Sorting
For Isotope to extract the sort data from the elements you’re trying to sort, you need to pass in an object of functions which return the data out of the element. So, if your elements have a data-name attribute, you’d write a function returning that attribute. Like so…
function getName(el) {
return el.attr('data-name');
}
Wrap this up in the getSortData object and your Isotope initialize function looks like this:
('#your-element').isotope({
getSortData: {
name: function(el) { // a single argument gets passed in
return el.attr('data-name'); // you could also use el.data('name')
}
}
});
This demonstrates to the plugin that the name of your element can be extracted by return the “data-name” attribute. In more recent versions of jQuery you can use el.data(‘yourDataAttribute’); instead of el.attr(‘data-yourDataAttribute’); as a slightly more elegant way of extracting data attributes.
That’s it – simple! You’re not restricted to just returning a single value – an example below demonstrates how you’d sort a list of people by their Last Name:
$('#your-element').isotope({
getSortData: {
firstName: function(el) {
return el.data('name'); // using el.data here instead of el.attr
},
lastName: function(el) {
var name = el.data('name');
if(name.lastIndexOf(' ') >= 0) // if there is a space in the name to begin with
return name.substr(name.lastIndexOf(' ') + 1);
else
return name;
}
}
});
Now, to sort your elements, just use the Isotope API:
$('#your-element').isotope({
sortBy: 'firstName', // or lastName if using example above
sortAsc: true
});
Filtering
Filtering is even easier than sorting! Similarly to sorting, you can have filtering happen once the page has loaded, to re-order, show or hide elements as necessary. Unlike sorting, though, you don’t have to provide any filter data up front. Filtering is done completely on-the-fly.
To filter elements, all you need to provide is a valid jQuery selector. With that, Isotope will loop through all the elements on the page. If they match the selector, they will be shown. If not, they get hidden. The selector can be anything from a class name to all sorts of weird and wonderful combinations to drill down to exactly what you need. Here are a few examples:
// to filter down to all elements matching class my-filter
$('#your-element').isotope({filter: '.my-filter'});
// to filter all elements where the data-name attribute equals "Sweet"
$('#your-element').isotope({filter: '[data-name=Sweet]'});
// filter all elements that contain the word "awesome"
$('#your-element').isotope({filter: ':contains(awesome)'});
That’s not the limit, either – you can read the full jQuery selector specification to find exactly what you need. Upon providing the jQuery selector, Isotope does all the hard work in matching elements and animating them in and out.
Conclusion
The inner workings of Isotope aren’t simple by any means, but David DeSandro has done a great job of abstracting the API to a point where it’s incredibly easy for developers to get their hands on some sweet functionality. Filtering and sorting are two useful features but are nowhere near the limits of what Isotope can do. The plugin was originally an improved version of Masonry, another great plugin used for creating dynamic layouts where CSS floats don’t quite cut the mustard. Isotope takes this idea and runs with it, allowing many layout modes, hardware accellerated CSS3 animations with jQuery fallback and awesome extensibility
If you intend to use Isotope for commercial use there is a $25 one-off license fee per developer, but we feel that this is totally worth it for the features that are on offer.