Pergunta

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?

Foi útil?

Solução

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
    });
});

Outras dicas

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.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top