5

i'm working on jquery isotope and the filter works just fine using the method given below on the same page portfolio.html:

<li class="current"><a href="#" data-filter="*">all</a></li>
<li><a href="#" data-filter=".design">design</a></li>
<li><a href="#" data-filter=".coding">coding</a></li>
<li><a href="#" data-filter=".logo">logo</a></li>

What i'm trying to achieve is to link to a specific category so that my users can come from other pages to the filtered category.

i tried the following linking method but it didn't work:

<a href="portfolio.html#filter=logo" data-filter=".logo">logo</a>

can anyone help me out? is there any method to pre-filter the categories?

Employed Russian
  • 199,314
  • 34
  • 295
  • 362
nikita gupta
  • 49
  • 1
  • 1
  • 4

2 Answers2

5

After you configure isotope you need to read the querystring variable and then click the filter button that matches.

jsFiddle Example: http://jsfiddle.net/Y6vWn/

var filterFromQuerystring = getParameterByName('filter');
$('a[data-filter=".' + filterFromQuerystring  + '"]').click();
Bill
  • 645
  • 3
  • 11
  • Then to be clear you link to the page more like so: `logo` - with a querystring, not a hash as in the question. – ArleyM Mar 26 '14 at 19:18
0

Bill-

I tried your method and can't seem to make it work. Are those two lines all that are necessary?

Here is the menu HTML for the link to my isotope filtered page:

<li><a href="entertainment.html">Entertainment</a>
     <ul>
        <li><a href="entertainment.html#party">Party bands, Show and Tribute bands</a></li>
        <li><a href="entertainment.html#classical">Classical, Jazz, and Easy Listening</a></li>
        <li><a href="entertainment.html#djs">DJs, Emcees, Variety, and Interactive</a></li>
    </ul>
</li>

Here is the code for my filters (IDs not being used here):

<div id="filters">
<ul class="option-set" data-option-key="filter">
    <li><a id="f-all" href="#filter" class="selected" data-option-value="*">All</a></li>
    <li><a id="f-party" href="#filter" data-option-value=".party">Party Bands</a></li>
    <li><a id="f-classical" href="#filter" data-option-value=".classical">Classical, Jazz, and Easy Listening</a></li>
    <li><a id="f-djs" href="#filter" data-option-value=".djs">DJs and Emcees</a></li>
</ul>

And here is the script I put at the end of the filtered page:

<script type="text/javascript">
$(document).ready(function() {
    var pathname = window.location;
    alert(pathname.toString()); //testing purposes
    if(pathname.toString().indexOf("party") != -1){
        alert('shit went through 9'); //testing purposes

        var filterFromQuerystring = 'party'; // getParameterByName('filter');
        $('a[data-option-value=".' + filterFromQuerystring  + '"]').click();
    }
});

I intend to have the page choose a different filter based on what comes after the hashtag in the URL. Is there a smarter way to go about this?

jhchawk
  • 85
  • 1
  • 5
  • If you put your code in to a [jsFiddle](http://jsFiddle.net) I will get it working for you. – Bill Jul 18 '12 at 03:07