Home › Forums › JavaScript › Infinite Scroll + Masonry append help
- This topic is empty.
-
AuthorPosts
-
April 28, 2012 at 8:49 pm #37835ansParticipant
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 #101959Taufik NurrohmanParticipantI 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});
});April 29, 2012 at 9:40 am #101963ansParticipantThanks 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;}April 30, 2012 at 9:26 am #102003ansParticipantstill haven’t solved this..? Is anyone able to help?
Thanks
April 30, 2012 at 2:06 pm #102019TheDocMemberHey @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.
April 30, 2012 at 10:06 pm #102035ansParticipantHey @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 #102038TheDocMemberYou 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.
April 30, 2012 at 11:55 pm #102029ansParticipantThanks, 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 #102042TheDocMemberSorry, 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.
May 1, 2012 at 1:08 am #102045ansParticipantOk 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 #102047TheDocMemberEverything 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.
May 1, 2012 at 1:52 am #102051ansParticipantStill no change…
I’ve checked the container and item markup and they look correct.
May 1, 2012 at 2:45 am #102055TheDocMemberYou’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.
May 1, 2012 at 12:43 pm #102088ansParticipantI’ve completely rewritten the whole thing. Working now!
Thanks for your help.
May 1, 2012 at 1:49 pm #102094TheDocMemberNo problem!
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.