Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm having trouble debugging why the InfiniteScroll jQeury plugin isn't loading more of my .boxy class items. So far I've placed the div containing the selectors in different levels of heirarchy, but this isn't working to suss out any console errors.

<div id="fold-below" class="belowTheFold">
        <div id="articlePost">

            <?php if (have_posts()) : ?>
                <?php while (have_posts()) : the_post(); ?>
                  <div class="boxy">
                    <div class="read">

                        <div class="postmetadata">
                            <?php echo time_ago(); ?><Br />
                        </div>

                        <div class="articleImageThumb">
                        <a href="<?php if(get_post_meta($post->ID, "url", true)) echo get_post_meta($post->ID, "url", true); else the_permalink(); ?>" rel="<?php the_ID(); ?>"><?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?></a>
                        </div>

                        <div class="articleTitle">
                                <a href="<?php if(get_post_meta($post->ID, "url", true)) echo get_post_meta($post->ID, "url", true); else the_permalink(); ?>" rel="<?php the_ID(); ?>"><?php the_title(); ?></a>
                        </div>

                    </div>

                  </div>
                  <?php endwhile; ?>
                 <?php endif; ?>
        </div>
        <div id="nav-below">
                        <a id="next" href="#">Load more</a>
        </div>
</div>

Here is the code I've found to be the most elegant so far for the InfiniteScroll jquery plugin:

$(document).ready(function($) {
        var $container = $('#articlePost');

// infinitescroll() is called on the element that surrounds
// the items you will be loading more of
  $container.infinitescroll({

    navSelector  : $('#nav-below'),
           // selector for the paged navigation 
    nextSelector : $('#nav-below a'),
                   // selector for the NEXT link (to page 2)
    itemSelector : $('#articlePost'),
                   // selector for all items you'll retrieve
  },
    // trigger Isotope 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 Isotope layout
      $newElems.imagesLoaded(function() {
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
    $container.isotope( 'appended', $newElems );
      });
    }
  );
});
share|improve this question
    
have you seen this? –  Milo May 14 '13 at 16:05
    
Yup. Thanks Milo. I've tried a few variations, but to no effect. Can you suggest anything else? –  canacast May 14 '13 at 17:22
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.