Facebook Like Infinite Scroll Using jQuery
In this tutorial we are going to implement Facebook like Infinite Scroll using jQuery. I have implemented this Infinite Scroll jQuery using my previous tutorial design i.e. Responsive Facebook Style Timeline Design With Twitter Bootstrap . So please refer this Bootstrap timeline design tutorial before continuing this tutorial.
Infinite Scroll:
This Infinite scroll only loads the more data when users reaches the bottom of the page. This avoids web application to load tons of data when web application starts, this will greatly improves web application loading speed as well as improves users experience i.e. avoids the unnecessary page navigation to see more data.
Note : Next refer the following tutorial on how to make Ajax request to get more data from the server using jQuery, Ajax, PHP and MySQL.
Facebook Like Infinite Scroll Using jQuery Ajax PHP and MySQL
Advantages:
1. Improves the page loading speed.
2. Greatly improves the user experience by avoiding unnecessary navigation.
Create index.php file and add basic HTML markup in it.
Create a directory called infinite-scroll in your htdocs or in your server root folder. Now add create following list of folders (css, js ) in the infinite-scroll directory. Then download bootstrap and jQuery files and add in their respective css and js directories. Now create index.php file and include those css and js files in index.html file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Infinite Scroll</title> <!-- Bootstrap --> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,200' rel='stylesheet' type='text/css'> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href="css/style.css" rel="stylesheet"> <!-- Script --> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/script.js"> </script> </head> <body>
Create Responsive Facebook Style Timeline Design With Twitter Bootstrap
To create Responsive Timeline Design with Bootstrap, Please refer my previous tutorial.
Responsive Facebook Style Timeline Design With Twitter Bootstrap
You may also interested in following tutorials
jQuery Autocomplete Mutiple Fields Using jQuery, Ajax, PHP and MySQL
Infinite Scroll Using jQuery:
This Infinite scroll only loads the more data from the server when user reaches bottom of the page. Here the jQuery scrolling function that detects, when users reaches the bottom of the page using following conditions.
$(window).scrollTop() + $(window).height() == $(document).height()
When user reaches the bottom of the page the total document height will equal to the window height plus total scroll height.
So when user reaches the bottom of the page the above condition will satisfied, and makes Ajax request to get more data from the server. Here instead making Ajax request to the server, I am just simulating this Infinite Scroll only with the help of jQuery. So here I am using setTimeout() function to make some delay and gets the some hidden data and appends it to the timeline.
I kept html hiddden data in content.php file to simualte the Infinite Scroll.
<script>
year = 2013; i = 3;
flag = true;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()){
if(flag){
flag = false;
$('#loader').show();
setTimeout(function(){
$('#loader').hide();
$('#timeline-conatiner').append( '<li class="year">'+year+'</li>');
$('#timeline-conatiner').append( $('#'+i).html() );
if(i==6)i=0;
i++; year--;
flag = true;
}, 800);
}
}
});
</script>
CSS3 Loader
While loading more data, I am showing CSS3 loader to indicate some operation is undergoing. I used following CSS3 spinner
Here is html markup of CSS3 loader.
<div id="loader">
<div class="sk-spinner sk-spinner-pulse"></div>
</div>
Here is the CSS3 styles.
/***** Loader *****/
#loader{
margin-top:10px;
}
.sk-spinner-pulse.sk-spinner {
width: 60px;
height: 60px;
margin: 0 auto;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
animation: sk-pulseScaleOut 1s infinite ease-in-out;
}
@-webkit-keyframes sk-pulseScaleOut {
0% {
-webkit-transform: scale(0);
transform: scale(0); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
@keyframes sk-pulseScaleOut {
0% {
-webkit-transform: scale(0);
transform: scale(0); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
/***** Loader *****/
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
