PHP, MySql, Jquery Infinite scroll paging tutorial

I found wonderful plugin jscroll to create Infinite scrolling feature whenever user will scroll div next page data will be loaded automatically or on click event. JScroll is a jQuery plugin for infinite scrolling, written by Philip Klauzinski. Infinite scrolling; also known as lazy loading, endless scrolling, auto-pager, endless pages, etc. In this tutorial i am going to demonstrate how can we use this plugin to apply endless scrolling feature in our application like facebook or wordpress paging.

This plugin work efficiently and easy to install and configure in your application, also good documentation will help you to customize scrolling as per your need. Here I am going to read my rss feed one by one by this Infinite scrolling when ever user click for next post it’ll be automatically loaded like ajax paging without page refresh.
infinite-scroll-jquery
First of all create feed.php page to read my blog’s feed.

feed.php

<?php 
$rssFeed = simplexml_load_file("http://www.iamrohit.in/feed/");
$page = (int)$_GET['page'];
?>
<br/>
<h1>Post-<?= $page+1 ?></h1>
<h4><?= $rssFeed->channel->item[$page]->title; ?> </h4>
<?= implode(' ', array_slice(explode(' ', $rssFeed->channel->item[$page]->description), 0, 150)); ?><br/>
<b><?= $rssFeed->channel->item[$page]->pubDate; ?></b>
 
<?php if($page<9) { ?>
 <a href="feed.php?page=<?= $page+1 ?>" class="next">Next Post</a>
<?php } ?>


Create index.php file with one pre loaded feed. and add jscroll library after jquery core library on your page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jscroll.min.js"></script>

index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Infinite scroll jquery plugin jscroll</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style>
  body {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
}
  </style>
</head>
<body>
<div>
<h1>Infinite scroll using jquery (jscroll)</h1>
<div style="width:40%; margin:0 auto; border: 1px solid; overflow:auto; height:450px; ">
<div id="rss" style="padding-left:10px; padding-right:10px;">
<?php 
$rssFeed = simplexml_load_file("http://www.iamrohit.in/feed/");
?>
<br/>
<h1>Post-1</h1>
<h4><?= $rssFeed->channel->item[0]->title; ?> </h4>
<?= implode(' ', array_slice(explode(' ', $rssFeed->channel->item[0]->description), 0, 150)); ?><br/>
<b><?= $rssFeed->channel->item[0]->pubDate; ?></b>
 
<a href="feed.php?page=1">Next Post</a>
</div>  
</div>

Finally add jscroll lazy load function to configure infinite scrolling, In my tutorial paging will work on user action whenever user click on next post link, next post will be loaded.

<script>
 $(function(){
   $('#rss').jscroll({
    loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
     autoTrigger: false
   });
 });
</script>

For making it action you need to add next page link under post. jscroll will automatically use this link as paging, so that when ever user requested for next post it’ll be loaded under div with scroll.

You can make it automatically just remove autoTrigger: false from jscroll function. Now user don’t need to click on link to load next post, when ever user scroll div next post will be loaded automatically.

Read official documentation of jscroll on http://jscroll.com/ to apply more customization.

DEMO

DOWNLOAD

If you are looking for php mysql based infinite scroll solution then here we have shared some popular GitHub repository which you can directly download and use in your web based projects.

PHP MySql Infinite Scroll

Following are the list of popular top rated hand picked PHP MySql Infinite Scroll.

I Hope you liked Hand-picked list of PHP MySql Infinite Scroll, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked PHP and MySql code examples, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.