Infinite Scroll Plugin Conditional Callback

[KeithPickering]

I’m using the Infinite Scroll plugin for WordPress, and the Isotope plugin for the layout of certain pages.

Basically, you click a button and it loads more posts. I have this callback in the Infinite Scroll options:

var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$(‘#main-posts’).isotope( ‘appended’, $newElems );
});

However, there is one page where I’m NOT using Isotope, but still want to use infinite scroll. It still works as expected, but since Isotope isn’t used on that page, Infinite Scroll creates an error.

Is there any way I can make the callback only on pages that are using Isotope?

[KeithPickering]

Hold on, I think I fixed it. I’ll leave this here for anyone who might have this problem in the future.

All I did was check if the isotope container exists during the callback. Like so:

if ( $(‘.isotope’).length ) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$(‘#main-posts’).isotope( ‘appended’, $newElems );
});
}

If anyone has a better way, let me know, but this seems to work just fine.

[TheDoc]

My gut instinct told me that doing `hasClass()` would be faster. Looks like that’s probably the case:

http://lookalive.co.uk/blog/jquery-which-faster-hasclass-or-length

So I would so something like:

if( $(‘.your-div’).hasClass(‘isotope’) ) { }

[KeithPickering]

Ah, cool. Thanks.

[Author]

Posts