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.