I have been trying to get an infinte scroll working in wordpress for about a week now, I have tryed verious diffrent plugins and diffrent coding laguages and I have been struggeling to get them to work. I am not very confident with Javascript JQuery or PHP these are all new to me.
I found a very good blog post and have followed the steps, http://www.affariproject.com/2015/03/ajax-lazyload-wordpress-pagination/, this is the closest I have come to getting it working. All of my posts showing and so is my ajax loader gif however the infinte scroll is still not working :(.
If any one has any ideas of what I am doing wrong it would be much appreciated. I will post the code below, I am unable to give you a link to the wordpress website as it on the loacl server at work.
Thank you :)
<div class="container">
<h1 class="title">Blog</h1>
<div id="lazyload" class="grid_12">
<?php
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$query_args = array(
'post_type' => 'post',
'posts_per_page' => 5,
'paged' => $paged
);
?>
<?php if (have_posts()) { ?>
<div class="page" id="p<?php echo $paged; ?>">
<?php while (have_posts()) { the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('entry') ?>>
<header class="entryheader">
<h2 class="entrytitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</header>
<div class="entrycontent">
<?php the_excerpt(); ?>
</div>
</article>
<?php } ?>
</div>
<?php } ?>
</div>
<div id="spinner">
<img src="<?php bloginfo('template_directory'); ?>/images/ajax-loader.gif" />
</div>
<script>
jQuery(function(){
var page = 2;
var loadmore = 'on';
jQuery(document).on('scroll resize', function() {
if (jQuery(window).scrollTop() + jQuery(window).height() + 60 > jQuery(document).height()) {
if (loadmore == 'on') {
loadmore = 'off';
jQuery('#spinner').css('visibility', 'visible');
jQuery('#lazyload').append(jQuery('<div class="page" id="p' + page + '">').load('/?paged=' + page + ' .page > *', function() {
page++;
loadmore = 'on';
jQuery('#spinner').css('visibility', 'hidden');
}));
}
}
});
jQuery( document ).ajaxComplete(function( event, xhr, options ) {
if (xhr.responseText.indexOf('class="page"') == -1) {
loadmore = 'off';
}
});
});
</script>
</div>
