You

may have looked profile feeds of well known social networking sites like FaceBook and LinkedIn. They are using infinite scroll to display latest feeds. When you reach at bottom of page it updates relative feeds and so on. It loads new content via Ajax when the user has finished scrolling through the page’s existing content.






Now a days, Ajax infinite scroller takes places of traditional paginations. This technique also known as lazy scroll. One of my reader have requested tutorial of Ajax Infinite Scroller. In this post we will learn how to integrate simple infinite ajax scroller.

 Demo Download

Directory Structure

index.php
ajax.index.php
js/
--jquery.min.js
css/
--style.css

ajax.index.php

By getting request parameters form ajax, It creates HTML response to append in scroller.

index.php

Add <div> having class cls-scroller and include latest version of jQuery (Download jQuery). cls-loader shows loading status.

Ajax Call

page provides page number for database records.






index.php (Full Code)

When user scrolls bottom of page, Ajax call fetches data from database using ajax.index.php. Reach me at gopal@sgeek.org with your queries, I will glad to help.

 

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">