Isotope Filter by URL Hash

jQuery Isotope remains the best script to filter and sort elements in various layouts like grids, masonry and responsive layouts. A missing feature is the ability to sort these layouts via a URL hash and you can fill in this blank with the following snippet.

<script>
// Isotope filter by URL Hash
jQuery(document).ready( function($) {
// Store # parameter and add "." before hash
var hashID = "." + window.location.hash.substring(1);
// Set Isotope Container
var $container = $('.container');
$container.isotope({
itemSelector: ".item",
filter: hashID, // the variable filter
});
});
</script>

In our example, the Isotope container is ‘.container’ and the isotope items being filtered are denoted by ‘.item’. A live example of a URL hash being passed to Isotope would be: –

https://totalkravmaga.com/classes#buckinghamshire

In the client example above Classes are filtered by region when a parameter is passed to Isotope via the URL hash. Here we found it useful to set a delay on the Isotope filter as live Google maps needed to be fully loaded and to do this simply wrap the Isotope URL Filter in a jQuery delay script.

About the Author
Isotope Filter by URL Hash 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.