• Resolved ModularBase

    (@modularbase)


    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/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter ModularBase

    (@modularbase)

    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>
    Thread Starter ModularBase

    (@modularbase)

    …forgot to mark “resolved”.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘All new groups of posts load behind first group’ is closed to new replies.