Infinite scroll : Loading Content While Scrolling, Using Java and JQuery
Join the DZone community and get the full member experience.
Join For FreeHave you seen the infinite scrolling of content in some web pages? For example, in DZone.com when you scroll the page to the bottom, new links will be loaded automatically and it’ll give you the illusion that the page scrolls infinitely. Another good example is that Bing’s Image Search.
The technique is not hard to implement. With the use of a single servlet and JSP, we can implement a basic functionality with infinite scroll. Before dive into code details, have a look at this demo to get a feel of it: Infinite Scroll Demo
To implement this, we need a servlet which will serve the dynamic content and a JSP file which will have the UI and act as a client to receive the content. Below are the code for these two files. I’m leaving other common stuffs (like web.xml entry etc) to you.
Code for Servlet:
package com.vraa.demo;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class InfinitContentServlet extends HttpServlet {
private static Integer counter = 1;
protected void processRequest(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
try {
String resp = "";
for (int i = 1; i <= 10; i++) {
resp += "<p><span>"
+ counter++
+ "</span> This is the dynamic content served freshly from server</p>";
}
out.write(resp);
} finally {
out.close();
}
}
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
}
Code for JSP file:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Load content while scrolling - Infinite Scroll with Java and JQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
body{
font-family:Arial;
font-size:.93em;
}
#content-box{
background-color:#FAFAFA;
border:2px solid #888;
height:300px;
overflow:scroll;
padding:4px;
width:500px;
}
#content-box p{
border:1px solid #EEE;
background-color:#F0F0F0;
padding:3px;
}
#content-box p span{
color:#00F;
display:block;
font:bold 21px Arial;
float:left;
margin-right:10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$contentLoadTriggered = false;
$("#content-box").scroll(function(){
if($("#content-box").scrollTop() >= ($("#content-wrapper").height() - $("#content-box").height()) && $contentLoadTriggered == false)
{
$contentLoadTriggered = true;
$.get("infinitContentServlet", function(data){
$("#content-wrapper").append(data);
$contentLoadTriggered = false;
});
}
});
});
</script>
</head>
<body>
<h1>Demo page: Infinite Scroll with Java and JQuery</h1>
<p>This page is a demo for loading new content while scrolling.</p>
<p style="margin:20px 0;background-color:#EFEFEF;border:1px solid #EEE;padding:3px;">
Credits: Veera Sundar | <a href="http://veerasundar.com">veerasundar.com</a> | <a href="http://twitter.com/vraa">@vraa</a>
</p>
<div id="content-box">
<div id="content-wrapper">
<p><span>1</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero. </p>
<p><span>2</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero. </p>
<p><span>3</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero. </p>
<p><span>4</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero. </p>
<p><span>5</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero. </p>
</div>
</div>
</body>
</html>
How it works?
The secret behind this is the scrolltop property. By checking this value we can determine whether the scrollbar has reached near to the bottom or not. If it reached, send an AJAX request to server to get more content and append it to the page. Look at the following two lines which does this:
$contentLoadTriggered = false;
$("#content-box").scroll(function(){
if($("#content-box").scrollTop() >= ($("#content-wrapper").height() - $("#content-box").height()) && $contentLoadTriggered == false)
{
$contentLoadTriggered = true;
$.get("infinitContentServlet", function(data){
$("#content-wrapper").append(data);
$contentLoadTriggered = false;
});
}
});Opinions expressed by DZone contributors are their own.
Comments