Grow your CSS skills. Land your dream job.

Infinite Scroll + Masonry append help

  • ans
    # April 28, 2012 at 8:49 pm

    I have infinite scroll working on my tumblr theme (http://asindexed.tumblr.com/). I have added Masonry but it seems to stop working after what would be the ‘first page’. When I try to add the appended method (http://masonry.desandro.com/docs/methods.html) everything just goes back to a grid as though masonry was not functioning…

    Can anybody help me out? Thanks!

    Here is the current script that has masonry working for the first 15 posts:

     





    # April 29, 2012 at 8:17 am

    I guess the problem is on $(window).load()
    Can you make a specific function that will make each time an item is loaded, the masonry function will be triggered again and again. I do not know how the infinite scroll function works, but this is roughly:

    $('#posts').infiniteScroll({
    ...
    }, function() { // Always trigger the masonry each time an item is appended
    $('#posts').masonry({isAnimated:true});
    });
    ans
    # April 29, 2012 at 9:40 am

    Thanks for your reply Hompimpa. That’s what I thought but doing that seems to disable masonry all together, it stops working even on the first few posts…?

    I am getting infinite scroll by the tumblrautopagernopage.js script. I have this div around all posts:



    ...

    And this in the CSS:

    .tumblrAutoPager_page_separator {display:none !important;}
    .autopagerize_page_element{min-height:600px !important;}
    ans
    # April 30, 2012 at 9:26 am

    still haven’t solved this..? Is anyone able to help?

    Thanks

    # April 30, 2012 at 2:06 pm

    Hey @ans, unfortunately I don’t have any experience in the plugin you are using. I have, however, successfully used Paul Irish’s Infinite Scroll with Masonry on a couple of Tumblr blogs. Try switching to that and if you run into any issues, I’ll be happy to lend a hand.

    ans
    # April 30, 2012 at 10:06 pm

    Hey @TheDoc, thanks for your reply.
    I have tried putting the Paul Irish script in but now masonry doesn’t seem to work, the footer has moved up to the side and infinite scroll only works if I have this in the description box:

    I am new to javascript and very lost! Any help you can give would be amazing! This is the current script I have on asindexed.tumblr.com

     


    # April 30, 2012 at 11:12 pm

    You can’t add it inside of the description box, you’ll need to edit the HTML and add it near the bottom of the page.

    You’ll also want to be using a much newer version of jQuery.

    ans
    # April 30, 2012 at 11:55 pm

    Thanks, I updated that. Now using http://code.jquery.com/jquery-latest.js and have moved that codysherman code towards the bottom of the html.

    Infinite scroll is fine but masonry not working.

    # May 1, 2012 at 12:35 am

    Sorry, I can’t help you if you don’t use Paul Irish’s Infinite Scroll, I don’t know how the other one works. I’m working on a theme right now that utilizes this exact thing.

    Here is the first bit to Masonry the first batch of posts (before IS):

    $(document).ready(function() {
    var $container = $('#content');
    $container.imagesLoaded(function(){
    $('#content').masonry({
    // options
    itemSelector : 'article',
    columnWidth: 400,
    gutterWidth : 40
    });
    });
    });

    And here is the IS code: (not the Masonry code in the callback)

    I’ve also included some code that fixes video and audio posts (if you use them) that break when using infinite scroll.

    ans
    # May 1, 2012 at 1:08 am

    Ok thanks, I have only the Paul Irish code running now. Infinite scroll isn’t working nor is masonry.
    I copied the code you posted above. Is what I have below correct? This is below the css style, inside the head tag.






    # May 1, 2012 at 1:12 am

    Everything needs to go at the *end* of the document. Just before the closing < /body> tag.

    And you’ll need to change the settings to match your blog.

    You may also need to include the ImagesLoaded jQuery plugin.

    ans
    # May 1, 2012 at 1:52 am

    Still no change…

    I’ve checked the container and item markup and they look correct.

    # May 1, 2012 at 2:45 am

    You’re getting an error: Uncaught TypeError: Cannot read property ‘debug’ of undefined

    Also, this is wrong:
    itemSelector : “#posts post”,

    Should be:
    itemSelector : “#posts .post”,

    Again for the Masonry:
    itemSelector : ‘post’,

    Should be:
    itemSelector : ‘.post’,

    Another note, once you get it working you should upload those files to Tumblr, linking like this:

    Can be dangerous if he ever decides to take it off from there, change the name, permalink structure, etc.

    ans
    # May 1, 2012 at 12:43 pm

    I’ve completely rewritten the whole thing. Working now!

    Thanks for your help.

    # May 1, 2012 at 1:49 pm

    No problem!

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

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