First filtering doesn't seem to work

[hymnzzy]

Hi guys,

I'm facing an issue here. I'm using a similar code for filtering in two pages

• https://www.tallengestore.com/collections/vincent-van-gogh
• https://www.tallengestore.com/products/bani-thani-as-radha-art-by-nihal-chand

$('#filter a')[<number>].click() is the triggering mechanism. On page load it is triggered after 10 seconds automatically or can be manually intervened before 10 seconds

When the page(s) loads a default set of items in $('.portfolio_block') are shown and the rest are display:none

On the first page, the first filtering works properly. Items are added in filteredItems, elements are hidden, animation shows up and elements are displayed. No problems here

But on the second page, items are added and elements are hidden. Mechanism stops here. This only happens on the first trigger. From the second trigger on wards, it goes back to functioning properly.

$('.portfolio_block').isotope({ filter: $(this).attr('data-option-value')}) that's how I'm using isotope.

Any help will be great.

P.S. I've tried using $('.portfolio_block').isotope() but it just messes up the layout on page load.

[desandro]

I'm sorry to see you're having trouble with Isotope. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

[hymnzzy]

Hi @desandro . I've replicated the issue on codepen - http://codepen.io/anon/pen/zqLdEm

Will this be sufficient?

[desandro]

Thanks. Given this demo, it looks like you first need to initialize Isotope with an initial filter.

  // init isotope
 var $portfolioBlock = $('.portfolio_block').isotope({
   itemSelector: '.element',
   filter: '.unframed'
 });

I recommend removing style="display: none;" and letting Isotope handling that initial filter. See demo http://codepen.io/desandro/pen/be26ec750a819f131122c859527e4063/

[hymnzzy]

Hi @desandro .. This worked. Can you tell me what I was doing wrong here? I thought

$('.portfolio_block').isotope({
  filter: $(this).attr('data-option-value')
});

would be sufficient to init a simple filter.

[desandro]

You need to initialize Isotope before a button was clicked. Otherwise, the layout might be broken.

[hymnzzy]

Thanks for the help @desandro