WordPress.org

Ready to get started?Download WordPress

Forums

Infinite-Scroll
[resolved] All new groups of posts load behind first group (3 posts)

  1. ModularBase
    Member
    Posted 1 year ago #

    All the selectors are correct. Using this plugin with Isotope on "layoutMode:masonry" only, so Infinite-Scroll setting is 'Masonry/Isotope'. Posts per page set to 10 on WP. Site is http://modularbase.com/. Navigation disappears when scrolling like it is supposed to.

    Have done everything I could think of, including removing entire Isotope and its script. When I remove Isotope and set Infinite-Scroll on "layoutMode:masonry", posts do not stack as masonry, they stack vertically to the left straight down.

    When scrolling, the next groups of posts loads behind the first, not under it, like it should. When I view the page source HTML before scrolling, there are the first 10 posts; and after scrolling, there are only the second groups of 10 posts in the page source HTML, not 20 posts like there should be.

    This is the Isotope code:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="/isotope/jquery.isotope.js"></script>
    
    <script>
    
        $(window).load(function() {
    
    var $container = $('#container');
    
    $('#container').isotope({
      itemSelector : '.post',
      layoutMode : 'masonry'
    });
    
    });
    
    </script>

    Had to disable Infinite-Scroll plugin, because site was unusable.
    Suggestions?

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

  2. ModularBase
    Member
    Posted 1 year ago #

    Solved it myself. Eliminated plugin and set my own code in footer. Works fine. Many thanks to the creator(s) of these fine scripts.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="/js/jquery.isotope.js"></script>
    <script src="/js/jquery.infinitescroll.js"></script>
    
    <script>
    
    $(window).load(function(){
    
      var $container = $('#container');
    
      $container.isotope({
        itemSelector : '.post'
      });
    
      $container.infinitescroll({
        navSelector  : ".navigation",
        nextSelector : ".nav-previous a",
        itemSelector : ".post"
      },
            function( newElements ) {
              $container.isotope( 'appended', $( newElements ) );
            }
      );
    
    });
    
    </script>
  3. ModularBase
    Member
    Posted 1 year ago #

    ...forgot to mark "resolved".

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.