Grow your CSS skills. Land your dream job.

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

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

    # 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:

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

    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.

*May or may not contain any actual "CSS" or "Tricks".