Wednesday, January 28, 2015

jquery infinite scrolling in Php

html structure:
<div id="postswrapper">
<ul>
$args=array('category_name'=>'home_posts');
query_posts( $args );
while ( have_posts() ) : the_post();
echo '<li>';
if(has_post_thumbnail()):
<a href="the_permalink();">the_post_thumbnail('thumbnail');</a>
else:
<a href=" the_permalink();"><img src=" echo bloginfo('template_url');/images/noimage.jpg" alt="defaultimage" /></a>
endif;
echo '</li>';
endwhile;
// Reset Query
wp_reset_query();
</ul>
</div>
<div id="loadmoreajaxloader" style="display:none;"><center><img src="/images/ajaxloader.gif" /></center></div>
script:
<script type="text/javascript">
$(window).scroll(function()
{
if($(window).scrollTop() == $(document).height() - $(window).height())
{
$('div#loadmoreajaxloader').show();
$.ajax({
url: "bloginfo('template_url');/loadmore_template.php",
success: function(html){
if(html){
$("#postswrapper ul").append(html);
$('div#loadmoreajaxloader').hide();
}else{
$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
}
});
}
});
</script>

No comments:

Post a Comment

Change priority of dual boot OS

Change priority of dual boot OS  (Windows and Linux): Go to your Linux OS, install Grub customizer. Then change priority by up and down arro...