WordPress.org

Ready to get started?Download WordPress

Forums

Infinite-Scroll
[resolved] Masonry & Infinite-Scroll (What Javascript to call?) (14 posts)

  1. bwatanabe
    Member
    Posted 2 years 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?

    http://wordpress.org/extend/plugins/infinite-scroll/

  2. bwatanabe
    Member
    Posted 2 years 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.

  3. bwatanabe
    Member
    Posted 2 years 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.

  4. beaver6813
    Member
    Plugin Author

    Posted 2 years 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.

  5. bwatanabe
    Member
    Posted 2 years 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!

  6. bwatanabe
    Member
    Posted 2 years 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.

  7. Ryan Cowles
    Member
    Posted 2 years ago #

    @bwatanabe, what are you using to initially call the Masonry?

  8. beaver6813
    Member
    Plugin Author

    Posted 2 years 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 :)

  9. bwatanabe
    Member
    Posted 2 years 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?

  10. Ryan Cowles
    Member
    Posted 2 years 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.

  11. beaver6813
    Member
    Plugin Author

    Posted 2 years 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 ^^

  12. Ryan Cowles
    Member
    Posted 2 years 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); } );
    					});
  13. beaver6813
    Member
    Plugin Author

    Posted 2 years 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 :)

  14. bwatanabe
    Member
    Posted 2 years ago #

    Sorry for not marking this as resolved sooner. Thanks for the help beaver6813!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic