Posted 5 months ago #
Hi I've been trying to get Infinite-Scroll to work with Masonry.
I am currently using the WP plugin and it loads the next content fine, but the masonry does not apply to the new posts. It seems like whenever I try to post something in the javascript field within the options page it breaks the infinite-scroll functionality.
Could someone provide me with what exactly I should paste into the Javascript to be called after the next posts are fetched: field?
Posted 5 months ago #
This is the site that its being developed on
http://pewlpit.com/?themedemo=2.0-Pew
Right now I'm using a themeswitcher plugin to view the updated theme and I only have the infinite-scroll plugin turned on for admins right now.
Any help would be much appreciated, I can't figure out which parts of the appended method listed here http://masonry.desandro.com/docs/methods.html#appended to post where.
Posted 5 months ago #
I realized I forgot to include the version it is 'version 2.0b2.110822'
and currently in the javascript field I have:
// trigger Masonry as a callback
function( newElements ) {
$container.masonry( 'appended', $newElems, true );
}Sorry for the multiple posts, just want to make sure and give as much information as possible.
Posted 5 months ago #
Hi bwatanabe,
First off thank you for providing all the information, I can't express how much it helps me to help you :) (And so many people just shout "DONT WORK!" and expect me to help fix!).
Eerm I think you need a little more code in the callback, I'm taking a look at:
https://github.com/paulirish/infinite-scroll/issues/94
So to give a bit of background, when you paste something into the "Javascript to be called after the next posts are fetched" field, it is called like:
function(newElements, data)
{
<<yourcode here>>
}From that issue thread I pasted above, you might want to see if the below gives you any luck. Obviously you'll need to replace "#infinitecontent" with the selector you used for Masonry when you initialized it.
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$('#infinitecontent').masonry( 'appended', $newElems, true );
});I'm not sure what you're coding competency is like so let me know if you want me to go over anything or if it doesn't work.
Posted 5 months ago #
beaver6813 Thank you!
You're really a Purple Cow of the Internet! (lol, I hope you've read Seth Godin's "Purple Cow," or that might sound like an insult). The support that you provide here, and that I've seen you giving on github is amazing!
I just can't believe that you do it all for free. Well, if you haven't read Purple Cow yet let me send it to you through Amazon, if you're interested, as a small thanks for the your great plugin and support.
Not sure if this site has a PM function, but if it does just send me your email and I'll be sure to send you a
Thanks, let me know!
Posted 5 months ago #
Hi beaver6813,
Sorry to be a bother, but I've got another question if you don't mind helping.
Its related to your answer here: http://wordpress.org/support/topic/infinite-scroll-vs-fb-like-and-g?replies=6
Except I need my Google ads to repeat within the next page. An example of the ads working can be seen here: http://pewlpit.com/?themedemo=2.0-Pew
Really appreciate your help.
Posted 5 months ago #
@bwatanabe, what are you using to initially call the Masonry?
Posted 5 months ago #
@bawtanabe, Google ads are a little different (as you need to actually load the adcode in that selector somewhere. I'll try and have a look on Sunday, until then perhaps google "Loading Google Adsense with Ajax" or something like that to see what comes up :)
Posted 5 months ago #
@beaver6813, turns out that running the ads in ajax loaded elements is against Google's TOS I guess... Seems a little less relevant for infinite scroll, but I probably won't attempt it since I don't want my account getting banned.
They do have an Ajax beta program, but as of now it's closed. I'll probably look into an alternative until it opens.
@Ryan I'm using the following in my header:
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.masonry.min.js"></script>
<script type="text/javascript">
//$(window).load(function() {
$(document).ready(function() {
//set some variables
var $container = $('#container');
//calls the imagesLoaded function
$container.imagesLoaded( function(){
//show content and hide loading div once p-age is ready.
$('#container').fadeIn("normal");
$('#loading').hide();
//calls masonry
$container.masonry({ itemSelector : '.post', singleMode: false, gutterWidth: 27, columnWidth: 300, });
});
});
</script>Why do you ask?
Posted 5 months ago #
Thanks for the reply bwatanabe.` I ask because I am still running into a few problems.
I've tried a few different configurations, and I either end up with overlapped images, or the following error:
newElements is not defined in regards to var $newElems = $( newElements ).css({ opacity: 0 });
In my header I have the following:
jQuery(function(){
var $container = jQuery('#excerpts');
$container.imagesLoaded(function(){
$container.masonry({
// itemSelector: '.box',
// columnWidth: 100
});
});
$container.infinitescroll({
navSelector : '.navigation', // selector for the paged navigation
nextSelector : '.navigation a', // selector for the NEXT link (to page 2)
itemSelector : '.excerpt', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});And in the plugin settings I have the following for my callback:
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$('#excerpts').masonry( 'appended', $newElems, true );
});I have tried so many things that my code is somewhat butchered, haha. But do either of you notice something that I am doing wrong?
Again, thank you so much for the help. This is another reason why I love the WordPress community.
Posted 5 months ago #
Ryan, you said that you had the code in your header, is that generated by the plugin or did you manually put that in?
Also... what version are you running? :) http://downloads.wordpress.org/plugin/infinite-scroll.2.0b.111218RC2.zip is the latest (released yesterday, though RC1 had most of the main changes).
EDIT: You'll need to update to RC1 or RC2 for the newElements thing to work, its a new addition ^^
Posted 5 months ago #
Beaver,
Apparently I was using an older version, and I didn't even know it. I appologize for not checking beforehand. Anyways, I updated to the latest with the link that you provided and it worked perfectly! Thank you so much for all of your help.
Since I brought it up initially, if anyone is wondering, here is my code.
I have manually added the following to the header to call Masonry:
jQuery(function(){
jQuery('#excerpts').masonry({
// itemSelector: '.excerpts'
});
});And the plugin is generating the following:
//We leave a function outside the infinite-scroll area so that it works with older jQuery versions
function infinite_scroll_callback() {
var $newElems = jQuery(newElements).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
jQuery('#excerpts').masonry( 'appended', $newElems, true );
});
}
jQuery(document).ready(function($) {
// Infinite Scroll jQuery+Wordpress plugin
// Now we're inside, we should be able to use $ again
$('#excerpts').infinitescroll({
debug : true,
loading : {
img : "http://catnaptree.com/dev/wp-content/plugins/infinite-scroll/ajax-loader.gif",
msgText : "<em>Loading the next set of posts...</em>",
finishedMsg : "<em>There are no more posts to display.</em>"
},
state : {
currPage : "1"
},
nextSelector : "div.navigation a",
navSelector : "div.navigation",
contentSelector : "#excerpts",
itemSelector : "#excerpts div.excerpt",
pathParse : ["http://catnaptree.com/dev/blog/page/", "/"]
}, function() { window.setTimeout(infinite_scroll_callback(), 1); } );
});
Posted 5 months ago #
Cheers Ryan, I'll get this added to an FAQ when I get some spare time.. I haven't released RC1/RC2 via the auto-updater yet because they still need some testing, any feedback would be awesome, oh and thanks for helping others on the forums as well :)
Posted 4 months ago #
Sorry for not marking this as resolved sooner. Thanks for the help beaver6813!
You must log in to post.
