Design Lunatic

A Continuation of the Isotope Tutorial: Hash History with Isotope

I’ve written several tutorials on how to use isotope effectively and maximize its potential, and today’s post will be part of that series. What exactly does isotope do? It reorders the content on a page to only display what is necessary. The user can usually control this by clicking on links that change what the content is filtered by. But what if the user refreshes the page? Or decides that what the content was previously filtered by worked better, and presses the back button? Then, problems begin. The user has to reorder the content again to get back to where they were. Today’s post aims to solve that problem by using a plugin called jQuery hashchange event. This plugin works with the hash, the part after the url of the page that begins with “#”. It adds back button support to cycle through the hashes, and adds a handy “hashchange” jquery event.

As usual, before we begin on this post, grab a copy of the original isotope tutorial.

HTML

There are no changes from the HTML of the original isotope tutorial.

CSS

Nope, no changes here either. Keep reading.

Jquery

Here’s where the fun starts. We’ll rewrite the jquery from scratch, as there are several changes and optimizations to be made. Before you start writing the code, download the hashchange plugin. Once you’ve included the plugin, start off with jquery’s essential document.ready function.

$(document).ready(function(){

	var $container = $('#content');

});

There’s also a “$container” variable defined, which is just what we’re filtering.

Now, we need to create the code that will deal with appending values to the URL when a link is clicked.

$('#nav a').click(function(){
	var selector = $(this).attr('data-filter');

	location.hash = selector;

	return false;
});

The above code takes the “data-filter” attribute of the link that was just clicked, and appends it the url via the “location.hash” method. Then, there’s a return false, so the link isn’t followed. The above code works fine, but personally, I don’t like what is appended to the url. I think the dot before the category is extra – so let’s get rid of it.

$('#nav a').click(function(){
	var selector = $(this).attr('data-filter');

	var prettyselector = selector.substr(1);
  
	location.hash = prettyselector;

	return false;
});

With this addition, the URL looks cleaner and is nicer to look at. The above code now does exactly what we want it to do.

At this point, we’ll start using the capabilities of the “hashchange” plugin we’ve included.

$(window).hashchange( function(){

});

This is a “hashchange” function. When the hash of the URL is modified, the function fires. We can use this to filter the content as soon as a “hashchange” is detected.

$(window).hashchange( function(){
	var hashfilter = "." + location.hash.substr(1);
	
	$container.isotope({
		filter: hashfilter,
		animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false,
		}
	});

});

The “hashfilter” variable may seem a bit complex at first, but it’s quite simple. We’re taking the “location.hash”, which is the current hash of the URL, and deleting the first character. Why? Because the first character is a “#”, and we don’t need it. We then append a period to the beginning of a variable. Here’s what the process looks like: #cat1 => cat1 => .cat1.

While it may seem that the “hashchange” function works exactly as it has to, that’s incorrect. There’s one big issue with this – try clicking on the “All” button. Notice how nothing happens? That needs fixing.

$(window).hashchange( function(){
	
	if(location.hash!="#"){
		var hashfilter = "." + location.hash.substr(1);
	}
	else{
		var hashfilter = "*";
	}

	$container.isotope({
		filter: hashfilter,
		animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false,
		}
	});

});

The “if…else” statement fixes this. If the “location.hash” is NOT equal to a blank, the “hashfilter” is what created earlier. If it IS a blank space, then the “hashfilter” is a “*”, which basically means “All” in isotope.

We’re almost done – there’s just one thing left. If the page doesn’t get refreshed, everything works exactly as it should – but what if the page is refreshed, or is opened in a new window? The code doesn’t know what to filter it by, so it just goes with “*”. This is easy to fix though; we already wrote all the code we need.

$(document).ready(function(){
	var $container = $('#content');
		
	if(location.hash!=""){
		var hashfilter = "." + location.hash.substr(1);
	}
	else{
		var hashfilter = "*";
	}
		
	$container.isotope({
		filter: hashfilter,
		animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false,
		}
	});

Boom. Copy-pasted from inside the “hashchange” function, and it does exactly what we need to it do. At this point, everything should work perfectly for you. If it doesn’t, just download the files for the post and compare them to yours, but if it does, good job! That’s the end of this tutorial. If you have any questions or comments, feel free to post them below, and I’ll do my best to answer them.