All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

Infinite Scroll Plugin Conditional Callback

  • # February 17, 2013 at 12:47 pm

    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.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?

    # February 17, 2013 at 12:53 pm

    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.animate({ opacity: 1 });
    $(‘#main-posts’).isotope( ‘appended’, $newElems );

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

    # February 17, 2013 at 2:12 pm

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

    So I would so something like:

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

    # February 17, 2013 at 2:55 pm

    Ah, cool. Thanks.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed