Isotope v2 filtering with Infinite Scroll – Filter not finding all items and Window not resizing on filter

For question 2, one thing you could do is applying the display:none style to all hidden elements (and remove from all the visible ones) after isotope filtering.

I think you should be able to use the “on layoutComplete” event listener of isotope to apply it at the right time, like this:

$container.isotope( 'on', 'layoutComplete',
      function( isoInstance, laidOutItems ) {

          $('.my-elements-class.hiddenStyle').addClass('reallyHiddenStyle');
          $('.my-elements-class.visibleStyle').removeClass('reallyHiddenStyle');
      }
);

Where, of course, the elements you want to filter are of css class my-elements-class, you applied isotope filtering to $container and you define

reallyHiddenStyle: {
  display: 'none'
}

in your CSS.

For question 1, perhaps you need to use a similar strategy with infinitescrolling callback, adding new elements to the filter once they appear because of scrolling.
You already have the callback passed as last parameter of the infinitescroll method, so at a quick look it seems that something like this might work:

$container.isotope('destroy');
$.each(newElements, function (i, el){/** add new elements to arr */});
$container.isotope({ filter: arr });

Do you have a working example you can share? So that I can check it out, if you’d like me to.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)