Infinite Scroll + Masonry append help

[ans]

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:

[Taufik Nurrohman]

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]

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]

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

Thanks

[TheDoc]

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]

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

[TheDoc]

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]

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.

[TheDoc]

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]

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.

[TheDoc]

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]

Still no change…

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

[TheDoc]

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]

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

Thanks for your help.

[TheDoc]

No problem!

[Author]

Posts