Total Followers 132,503
Pagination is a technique used to break large data sets into small blocks in order to reduce the server load. We used to create pagination buttons with page numbers and next/previous links. Now pagination has gained a new perspective with infinite scrolling.
Are you new to infinite scrolling? Then take a quick look at the demo before we start.
Infinite scrolling is where you can keep scrolling and data will keep coming until all the data is displayed. In this technique, the first set of data will be displayed initially. Once you scroll to the end of the window the next page of data will be generated and so on. No pagination buttons are required and you get the data on demand. Let’s see how we can create infinite scrolling.
We are going to create an infinite scrolling page with images, similar to Pinterest. These are the requirements needed before we start coding.
When the page is loaded we have to get the data from the database and display the initial result. I have stored the names of the images in a database table. I have simplified the code using basic syntax so that beginners can go through the tutorial without any problems.
<!--?php $con = mysql_connect("localhost", "username", "password"); mysql_select_db("database_name"); $result = mysql_query("select SQL_CALC_FOUND_ROWS * from scroll_images order by id asc limit 12"); $row_object = mysql_query("Select Found_Rows() as rowcount"); $row_object = mysql_fetch_object($row_object); $actual_row_count = $row_object--->rowcount;
?>
The result will be broken into pages of 12 images. So the above code generates the first 12 results from the database table. Also keep in mind that $actual_row_count variable will hold the total number of images available in the table.
So lets move onto creating the initial version of our HTML document.
Infinite Scroll
<script type="text/javascript" src="jquery-1.7.2.js"></script></pre>
<div id="more">Loading More Content</div>
<pre>
</pre>
<div id="no-more">No More Content</div>
<pre>
</pre>
<div id="result"></div>
<pre>
"; } ?>
I have included jQuery and some sample CSS code to style our page at the top. In the body section you can see 2 div elements called more and no-more. These are used to show the status when we keep scrolling and position of these divs are made fixed. Next we are going to display the images inside the PHP code using the results we generated earlier. So the initial data set is displayed now and we have to create the scrolling part.
Let’s add the jQuery scrolling event to our page. jQuery provides a built-in function called scroll as shown in the code below.
$(window).scroll(function () {
});
Whenever you scroll to the top or bottom, the code inside this function will be executed. Identify end of the Page We are loading the next set of data, once the scroll reaches the end of the page. So first we have to identify the end of the page. Now I’ll show you a simple technique for that. 
if($(window).scrollTop() + $(window).height() == $(document).height()) {
}
jQuery scrollTop function will return the area hidden on the top of your page. $(window).height() gives the height of the browser viewport. So addition of both values will be equal to the page height, when scroll reaches the bottom. Pretty simple isn’t it? Now we got the basics covered and we can move onto the full script code as shown below.
<script type="text/javascript">// <![CDATA[
var page = 1; $(window).scroll(function () { $('#more').hide(); $('#no-more').hide(); if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
$('#more').css("top","400");
$('#more').show();
}
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('#more').hide();
$('#no-more').hide();
page++;
var data = {
page_num: page
};
var actual_count = "<?php echo $actual_row_count; ?>";
if((page-1)* 12 > actual_count){
$('#no-more').css("top","400");
$('#no-more').show();
}else{
}
}
});
// ]]></script>
Code Explanation
Requesting Data for Next Page
We have to use an Ajax call to request the next page from server as shown below. This code should be inside the else part we left empty in the earlier code.
$.ajax({
type: "POST",
url: "data.php",
data:data,
success: function(res) {
$("#result").append(res);
}
});
Creating Page for Data Generation
We need a separate PHP file to request the Ajax request data. I have created a file called data.php to generate results as shown below.
<!--?php <br ?-->$requested_page = $_POST['page_num'];
$set_limit = (($requested_page - 1) * 12) . ",12";
$con = mysql_connect("localhost", "username", "password");
mysql_select_db("database_name");
$result = mysql_query("select * from scroll_images order by id asc limit $set_limit");
$html = '';
while ($row = mysql_fetch_array($result)) {
$html .= "</pre>
<div><img src="images/" . $row[" alt="" name="" /></div>
<pre>
";
}
echo $html;
exit;
?>
We are done with creating the infinite scrolling pagination. Let’s have a look at how it is used in popular websites.
1. Google Reader
Google Reader uses this technique to generate feed items. You can see a 3 colored circles at the end of the page while more data is loaded.
2. Facebook Wall
Facebook uses infinite scrolling to display the posts in the wall.
3. Pinterest
Pins are generated on demand as you keep scrolling.
4. Twitter
Twitter tweet stream is generated using the infinite scrolling technique.
We have learned how to create an infinite scrolling page and various kind of practical uses of this techniques using most popular sites in the world. Now it’s your chance to make a move and create something new with infinite scrolling.
How are you going to use this technique? Feel free to share your comments.
Get The Only Freelancer crash course you will ever need to read!
Rakhitha Nimesh is a software engineer and writer from Sri Lanka. He likes to develop applications and write on latest technologies. He is available for freelance writing and WordPress development. You can read his latest book on Building Impressive Presentations with Impress.js. He is a regular contributor to 1stWebDesigner, Tuts+ network and Sitepoint network. Make sure to contact him at www.innovativephp.com or follow him on Twitter
Monday, August 20th, 2012 02:09
hi i have problem with data.php
$html = ”;
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$imgname= $row['title'];
}
$html .= ‘
‘.$imgname.’
‘;
echo $html;
exit;
the problem is.. its only show the 1st word..
example :
you love me like this … ad it only show “you”.
sorry for my bad english and thanks for helping
Tuesday, August 28th, 2012 20:30
I didnt understand your issue. Please explain further. What is “you love me like this” ? Is it the image name?
Please tell me the exact changes you made to my demo code so that I can check it locally on my pc.
Thursday, August 9th, 2012 17:34
ok, further to my last comment it seems the scroller doesn’t work in Firefox if you reference the image names in the database but store them on a different domain.
Tuesday, August 28th, 2012 20:26
Have you changed the code on the demo ? If so I need to look at your code before commenting on the issue. Will you be able to send the code or give a link to your demo where i can look for the issue ?
Thursday, August 9th, 2012 16:27
Hi
Just wanted to let you know on my Mac it failed to work in Firefox as well
G,
Saturday, August 4th, 2012 07:33
hello i find my problem in mozilla the $(window).scrollTop() + $(window).height() is not always equal to $(document).height() some time there is difference between one and some time it is 2
Tuesday, August 28th, 2012 20:23
Can you send me the complete code so that I can check ?
Thursday, August 2nd, 2012 09:40
Thanku so much for sharing this it helps me a lot i read many tutorial of infinite scrolling but my search ends here
thanku so much but i have problem regarding this following conditition( if($(window).scrollTop() + $(window).height() == $(document).height()) {) is not working in firefox but it works on chrome can u help me please
Friday, August 3rd, 2012 03:20
Thanks for the comment
I have checked it in firefox and it works properly. Can you tell me the error message you are getting when you use firefox. Please tell me the firefox version you are using as well.
Friday, August 3rd, 2012 12:27
Thanks for reply i am using mozila version 12.0 actually there is problem when the condition $(window).height() == $(document).height()) {) becomes equal then code is not executed inside and even when it satisfy the condition it doesn’t goes inside it shows loading morecontent div but it works good in chrome and ie i m using tag after div. is it create problem or not?
Monday, August 6th, 2012 03:46
If you have changed the code of the demo, I have to take a look at your demo to identify the issue. Demo should work properly on firefox. Also if you add any new elements add the end we might need to recalculate the heights
Wednesday, August 1st, 2012 10:00
Thank you, how is it works if the div are not same height ?
Tuesday, August 28th, 2012 20:36
I have used a single div for keeping these images. So if the divs are in different heights it will still work. But there will be lot of empty spaces between images. In your case you can use 3 divs as columns and assign each image to columns one by one. Then you will get the images without empty areas.
Tuesday, July 10th, 2012 06:06
Hello ! very good. I like it.
But How to make Lightbox like “yoxview”to work on it ?
I tried, but it dont work in the part of ajax page readed…
Thank you.
Chris
Friday, August 3rd, 2012 03:23
Hello Chris
I am not clear about your requirement. Can you explain it further.
Thanks
Tuesday, June 26th, 2012 15:39
Thank you! The only good tutorial out there.
Easy to understand and works like charm!
Sunday, June 17th, 2012 12:47
Hah, strange comment Andrew! But glad you enjoy tutorial!
Tuesday, June 12th, 2012 07:29
Wow, it’s great.
Just one thing I dont understand is the $(window).height(). The meaning that you are showing in the tutorial is the scroller’s height is the $(window).height().
This means the bigger the $(document).height() will be the smaller $(window).height() will be. Isn’t it?
Anyways I am working on it to know the real thing on it.
Thanks for this awesome trick!!
Wednesday, June 13th, 2012 13:17
Hi Ashish
Thanks for the comment and I corrected the issue you were having. $(window).height() is the browser viewport height. If you have a scroll on page $(window).height() will be lesser than $(document).height().
Tuesday, June 12th, 2012 00:52
Google search result ought to have this feature.
Monday, June 11th, 2012 12:32
I think infinite scrolling is a nice feature for many webpages, but I think sometimes it’s overused. For examble: I don’t want to be able to scroll down a whole tumblr page, just because it’s cool. But the greater issue of this technic is that it’s killing the usability of the scrollbar.
Firstly you’re never sure how much of the page you’ve allready seen.
Secondly if you try to use the scrollbar to actually scroll with it, you allways get to the point, where the site loads new content. With the new content, you’re suddenly jumping to a far deeper part of the website, which is annoying. You were interrupted in reading or looking at something and you have to search, where you’ve been, before you can continue (if it’s worth the effort).
Most people would argue, that no one ever really uses the scrollbar, in fact apple even “removed” it in OS X Lion, but I’m working quite a lot with a tablet with pen. So offen the scrollfactor is to low to scroll down a long webpage, but just right to work with in other programs. Than I have to use the scrollbar or kill my hand to get to where I want to read on.
So I think if you want to grant best usabiliy to your readers, you should find a better way to organise content instead of using infinite scrolling.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Benjamin Milde
Monday, June 11th, 2012 12:32
I think infinite scrolling is a nice feature for many webpages, but I think sometimes it’s overused. For examble: I don’t want to be able to scroll down a whole tumblr page, just because it’s cool. But the greater issue of this technic is that it’s killing the usability of the scrollbar.
Firstly you’re never sure how much of the page you’ve allready seen.
Secondly if you try to use the scrollbar to actually scroll with it, you allways get to the point, where the site loads new content. With the new content, you’re suddenly jumping to a far deeper part of the website, which is annoying. You were interrupted in reading or looking at something and you have to search, where you’ve been, before you can continue (if it’s worth the effort).
Most people would argue, that no one ever really uses the scrollbar, in fact apple even “removed” it in OS X Lion, but I’m working quite a lot with a tablet with pen. So offen the scrollfactor is to low to scroll down a long webpage, but just right to work with in other programs. Than I have to use the scrollbar or kill my hand to get to where I want to read on.
So I think if you want to grant best usabiliy to your readers, you should find a better way to organise content instead of using infinite scrolling.
Gary
Thursday, August 9th, 2012 16:27
Hi
Just wanted to let you know on my Mac it failed to work in Firefox as well
G,
Bertold
Tuesday, June 26th, 2012 15:39
Thank you! The only good tutorial out there.
Easy to understand and works like charm!
Chris
Tuesday, July 10th, 2012 06:06
Hello ! very good. I like it.
But How to make Lightbox like “yoxview”to work on it ?
I tried, but it dont work in the part of ajax page readed…
Thank you.
Chris
Rakhitha Nimesh
Friday, August 3rd, 2012 03:23
Hello Chris
I am not clear about your requirement. Can you explain it further.
Thanks
Ferhat
Wednesday, August 1st, 2012 10:00
Thank you, how is it works if the div are not same height ?
Rakhitha Nimesh
Tuesday, August 28th, 2012 20:36
I have used a single div for keeping these images. So if the divs are in different heights it will still work. But there will be lot of empty spaces between images. In your case you can use 3 divs as columns and assign each image to columns one by one. Then you will get the images without empty areas.
ali karim
Monday, June 18th, 2012 03:44
It is a nice feature.
Thanks,
Dainis Graveris
Monday, June 18th, 2012 04:34
Thanks Ali!
mosquito
Tuesday, June 12th, 2012 00:52
Google search result ought to have this feature.
Dainis Graveris
Tuesday, June 12th, 2012 05:03
Interesting that they took it off still.
Ashish
Tuesday, June 12th, 2012 07:29
Wow, it’s great.
Just one thing I dont understand is the
$(window).height(). The meaning that you are showing in the tutorial is the scroller’s height is the$(window).height().This means the bigger the
$(document).height()will be the smaller$(window).height()will be. Isn’t it?Anyways I am working on it to know the real thing on it.
Thanks for this awesome trick!!
Rakhitha Nimesh
Wednesday, June 13th, 2012 13:17
Hi Ashish
Thanks for the comment and I corrected the issue you were having. $(window).height() is the browser viewport height. If you have a scroll on page $(window).height() will be lesser than $(document).height().
Andrew
Sunday, June 17th, 2012 12:13
Just an comment! Amazing! This is Brilhant!
Dainis Graveris
Sunday, June 17th, 2012 12:47
Hah, strange comment Andrew! But glad you enjoy tutorial!
Tarun Allawadhi
Thursday, August 2nd, 2012 09:40
Thanku so much for sharing this it helps me a lot i read many tutorial of infinite scrolling but my search ends here
thanku so much but i have problem regarding this following conditition( if($(window).scrollTop() + $(window).height() == $(document).height()) {) is not working in firefox but it works on chrome can u help me please
Rakhitha Nimesh
Friday, August 3rd, 2012 03:20
Thanks for the comment
I have checked it in firefox and it works properly. Can you tell me the error message you are getting when you use firefox. Please tell me the firefox version you are using as well.
Tarun Allawadhi
Friday, August 3rd, 2012 12:27
Thanks for reply i am using mozila version 12.0 actually there is problem when the condition $(window).height() == $(document).height()) {) becomes equal then code is not executed inside and even when it satisfy the condition it doesn’t goes inside it shows loading morecontent div but it works good in chrome and ie i m using tag after div. is it create problem or not?
Rakhitha Nimesh
Monday, August 6th, 2012 03:46
If you have changed the code of the demo, I have to take a look at your demo to identify the issue. Demo should work properly on firefox. Also if you add any new elements add the end we might need to recalculate the heights
deasvr
Monday, August 20th, 2012 02:09
hi i have problem with data.php
$html = ”;
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$imgname= $row['title'];
}
$html .= ‘
‘.$imgname.’
‘;
echo $html;
exit;
the problem is.. its only show the 1st word..
example :
you love me like this … ad it only show “you”.
sorry for my bad english and thanks for helping
Rakhitha Nimesh
Tuesday, August 28th, 2012 20:30
I didnt understand your issue. Please explain further. What is “you love me like this” ? Is it the image name?
Please tell me the exact changes you made to my demo code so that I can check it locally on my pc.
Gary
Thursday, August 9th, 2012 17:34
ok, further to my last comment it seems the scroller doesn’t work in Firefox if you reference the image names in the database but store them on a different domain.
Rakhitha Nimesh
Tuesday, August 28th, 2012 20:26
Have you changed the code on the demo ? If so I need to look at your code before commenting on the issue. Will you be able to send the code or give a link to your demo where i can look for the issue ?
Tarun Allawadhi
Saturday, August 4th, 2012 07:33
hello i find my problem in mozilla the $(window).scrollTop() + $(window).height() is not always equal to $(document).height() some time there is difference between one and some time it is 2
Rakhitha Nimesh
Tuesday, August 28th, 2012 20:23
Can you send me the complete code so that I can check ?