Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Problem with applying filter in Isotope javascript

I'm trying to implement Isotope on a page using the plain-vanilla javascript options (and not JQuery).

Everything seems to be working just fine. Isotope correctly lays out the DIVs on the page. I can then apply a filter, to remove all but one class of DIV.

The problem arises, when I try to apply a second filter and see a different category of DIV. At this point, everything seems to disappear. I think what's happening, is that it's applying the filter to the 'results' of the first filter, and not to the original set of DIV's.

Here is an example

<DIV id="thecontainer">
<DIV class="displaybox catnum1"> div content </DIV> 
<DIV class="displaybox catnum1"> div content </DIV> 
<DIV class="displaybox catnum2"> div content </DIV> 
<DIV class="displaybox catnum2"> div content </DIV> 
<DIV class="displaybox catnum3"> div content </DIV>
</DIV>

My function is to show a new category looks like this:

function ShowCat(catnumber) {
    var container = document.getElementById('thecontainer');
    var iso = new Isotope(container);
    iso.arrange(
       filter: '.catnum'+catnumber,
    });
}

So we pass a # 1-5 to the function and reveal the corresponding DIVs catnum1, catnum2, catnum3, etc.

It works fine the first time, but doesn't work for successive calls.

I've tried using the "*" (show all) filter before calling the function a second time, but that doesn't seem to work. Any ideas? (Please note: I am not looking for a Jquery solution).

User Gravatar

Bangkokian

Posted Mar 24 2014 23:43 UTC

$30


  • Assigned To NBoychev
  • Solved
  • javascript
    isotope
  • 971 Views

2 Replies


Hello Bangkokian,

Here is working example: http://jsfiddle.net/7LKTw/

Tell me if you need clarification on my code.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Mar 25 2014 2:18 UTC

Solution

This didn't solve your task? Get your own custom solution.

Brilliant! Thanks Nikola. 'Works like a charm!

User Gravatar

Bangkokian

Posted Mar 25 2014 3:57 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions