Question

I am using isotope, here's the jsfiddle: http://jsfiddle.net/desandro/DA3wF/

Or, alternatively, a demo I have set up: http://nerdi.net/isotope-test.html

There's an option filter: selector

How could I pass a filter, ex: index.html#green that on page load, would filter to the .green class? is this possible?

Was it helpful?

Solution

filter: (window.location.hash != '') ? '.' + window.location.hash.replace('#', '') : 'default'

This is an if/then statement that checks to see if the current hash is an empty string. If it is then filter will be set to default otherwise it will be set to the window.location.hash value (minus the #).

A URL like this, index.html, will result in filter being set to default and a URL like this, index.html#my-selector, will result in filter being set to .my-selector.

Update

The reason your code isn't working doesn't actually have anything to do with my code, but here is an updated version of your code that I tested on your site:

$filterLinks.click(function(){
    var $this = $(this);

    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
        return;
    }

    $filterLinks.filter('.selected').removeClass('selected');
    $this.addClass('selected');

    // get selector from data-filter attribute
    var selector = $this.data('option-value');

    $container'.isotope({
        filter: selector
    });
});

OTHER TIPS

filter: window.location.hash.replace('#', '.')

The location.hash will return "#green", we just replace it with a dot to get ".green".

jsfiddle with example of how to also change the selected link based on the hash.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top