Facebook Like Infinite Scroll Using jQuery

Posted by & filed under Ajax, CSS, HTML5, JAVASCRIPT, 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.

 

 

 

Infinite Scroll jQuery

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

Auto Tab Using jQuery

Inline edit using jQuery and PHP, MySQL and Bootstrap 3

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

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!