Create a Dynamic Scrolling Content Box Using AJAX

Aug 4th, 2009 – 20 Comments »
Share: Delicious FacebookPosted in AJAX jQuery

If you have used Google Reader, then you might have noticed the way Google Reader shows feed items, it loads up few items first when you click on a feed and as you scroll down to view more items, it fetches more items dynamically and adds it to the list.
Google Reader loading more items

Dzone also implements this technique to show items as you scroll down the list.
Dzone dynamic scrolling list

Similarly, Facebook has also started using this technique to load more posts in user’s home page as you scroll down.
Today, I am going to create a similar dynamic content box that loads more content dynamically as user scrolls to the bottom of the box.

View Working Demo

The HTML Structure
view plaincopy to clipboardprint?
<div id=”container”>
<div id=”scrollbox” >
<div id=”content” >
<p>Lorem ipsum dolor sit amet</p>
<p>Ipsum lorem dolor amet sit</p>
<p>Dolor lorem ipsum amet tis</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Ipsum lorem dolor amet sit</p>
<p>Dolor lorem ipsum amet tis</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Ipsum lorem dolor amet sit</p>
<p>Dolor lorem ipsum amet tis</p>
</div>
</div>
<p><span id=”status” ></span></p>
</div>
The scrollbox div is the one that has fixed width and height and houses the content div that stores the content. The status span is used to display number of loaded items or the status message of loading more items.

The CSS Styles
The height and width of scrolling div is fixed using CSS and its overflow property is set to auto so that it gets a scrollbar when content exceeds the height or width. But to prevent horizontal scrolling, i added overflow-x:hidden attribute so that scrolling only occurs up or down.

view plaincopy to clipboardprint?
#container{
width:400px;
margin:0px auto;
padding:40px 0;
}
#scrollbox{
width:400px;
height:300px;
overflow:auto; overflow-x:hidden;
}
#container > p{
background:#eee;
color:#666;
font-family:Arial, sans-serif; font-size:0.75em;
padding:5px; margin:0;
text-align:rightright;
}
The Concept
Now to load more content on scroll, you will need to understand the concept behind the JavaScript code given below. To start with, i will be using, three attributes of DOM objects namely, scrollHeight, clientHeight and scrollTop. scrollHeight is the actual height of the inner content of a box, i.e. the actual height of content in the scrollbox container in our case. clientHeight specifies the height of the viewport container i.e. height of the visible region which is the height of scrollbox div in our case.
The scrollTop is the distance in pixels the content which has moved up.

Here is an illustraton specifying these properties.
Dynamic Scrolling Content Box

When the scrollTop becomes equal to scrollHeight-clientHeight, then the scroll bar has reached its bottom position, so this is the point when we need to fetch new items. To make the scrolling box more useful, i added another value called scrolloffset, which keeps track of the fact that how many pixels before the bottom the scroll bar is, so that we can start fetching new items instead of the user scrolling to the bottom and then waiting for content to load.

The JavaScript Code
Here’s the JavaScript code you will need. As always, you will need to include the latest jQuery library into your page header before this code.

view plaincopy to clipboardprint?
$(‘document’).ready(function(){
updatestatus();
scrollalert();
});
function updatestatus(){
//Show number of loaded items
var totalItems=$(‘#content p’).length;
$(‘#status’).text(‘Loaded ‘+totalItems+’ Items’);
}
function scrollalert(){
var scrolltop=$(‘#scrollbox’).attr(‘scrollTop’);
var scrollheight=$(‘#scrollbox’).attr(‘scrollHeight’);
var windowheight=$(‘#scrollbox’).attr(‘clientHeight’);
var scrolloffset=20;
if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))
{
//fetch new items
$(‘#status’).text(‘Loading more items…’);
$.get(‘new-items.html’, ”, function(newitems){
$(‘#content’).append(newitems);
updatestatus();
});
}
setTimeout(‘scrollalert();’, 1500);
}
Code Explanation: The updatestatus() function counts the number of items loaded into the content and displays it in the status span. The scrollalert function checks the current scrollTop position of the scrollbox div and if the scroll bar is near the bottom area, new items are fetched using AJAX.
Here i am using new-items.html that simply displays some items for the content box as this is just a demo. In actual application, you might employ some server side script that will load next items from the result set.

The content obtained via AJAX is then appended to the content div and updatestatus() is called to update the status message. setTimeout is used so that position of the scroll bar is checked periodically and if it matches condition, then new items should be fetched.

So, there you are with a dynamic content box just like Google Reader or DZone.

View Working Demo or Download Source Code n Try
Enjoy!

Tags: user interface

Bookmark n Share
Bookmark to Delicious

Stumble this article
digg

Subscribe to Full RSS Feed
RSS FeedIf you found this article useful, then consider subscribing to our RSS Feed or e-mail updates to stay updated with latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.

Related Posts
Create Featured Content Slider Using jQuery UI
Create Flipping Content Tabs Using jQuery
Add Dynamic Scroll to Top Button to Your Web Pages
AJAX Multiple File Upload Form Using jQuery
20 Responses (Add Your Comment)
Spooky Designer says:
August 5, 2009 at 8:15 PM
Nice Ajax innovation Satbir……. keep the gud work up

من و متعه ام says:
August 12, 2009 at 12:47 PM
hi
scrollTop is define incorrectly in your image.
see:
https://developer.mozilla.org/@api/deki/files/842/=ScrollTop.png

webdeveloperplus says:
August 12, 2009 at 12:58 PM
thanks!! i have updated the image

Tom Willis says:
August 30, 2009 at 2:45 AM
Perfect, this is exactly what I needed and probably the cleanest of the all the implementations I came across while googling.

Thanks a LOT

Richard Hurley says:
September 20, 2009 at 1:42 PM
HI. Great script. Can you tell me how I can replace the contents with new information rather than appending it.
Thanks

Shekar says:
October 20, 2009 at 5:48 PM
Excellent work. It helped me a lot.

Shekar says:
October 20, 2009 at 5:50 PM
And also it would be really good if we can select the items on up/down arrow keys press, some thing like list box. I am trying for this, will post if found some thing use full.

Marco says:
October 30, 2009 at 4:57 AM
Hi, I would like to do exactly the same but horizontally, im not very good in css and haven’t been able to do it myself. Can you please post the css to do it horizontally?

Comments are closed for this post.

« Previous Post
21 Amazing CSS Techniques You Should KnowNext Post »
Site Down for Last 10 hours, Fixed Now!!
Subscribe:Subscribe to RSS Feed
Subscribe to RSS
Subscribe to email updates
Follow on Twitter
Sponsors
Recent Articles
40 Fresh & Beautiful Examples of Websites With Large Backgrounds
Quick & Easy Way to Implement Drag n Share With jQuery
Tips to Write Better CSS Code
12 Lesser Known But Useful WordPress Hacks
25 Amazing & Free Flash Based Image Galleries
15 Ways to Improve CSS Techniques Using jQuery
AJAX User Poll Using jQuery and PHP
25 New & Useful PHP Techniques & Tutorials
13+ Fresh and High Quality Texture Sets & Collections
15 Time Saving CSS Tools You Should Be Aware Of
Popular Articles
12 Lesser Known But Useful WordPress Hacks12 Lesser Known But Useful WordPress Hacks

Oct 30, 2009 – 21 Comments »

15 Ways to Improve CSS Techniques Using jQuery15 Ways to Improve CSS Techniques Using jQuery

Oct 20, 2009 – 25 Comments »

25 New & Useful PHP Techniques & Tutorials25 New & Useful PHP Techniques & Tutorials

Oct 13, 2009 – 30 Comments »

21 Brilliant jQuery Image Gallery/Slideshow Plugins21 Brilliant jQuery Image Gallery/Slideshow Plugins

Sep 14, 2009 – 17 Comments »

25 Incredibly Useful CSS Tricks You Should Know25 Incredibly Useful CSS Tricks You Should Know

Sep 01, 2009 – 71 Comments »

30+ Fresh & Amazing jQuery Plugins & Tutorials30+ Fresh & Amazing jQuery Plugins & Tutorials

Aug 19, 2009 – 7 Comments »

Cool Stuff (from around the web)
50 Fresh and Free WordPress 3 Series Compatible Themes

10 Important jQuery Selectbox/DropDown Plugins

15 Powerful jQuery Tips and Tricks for Developers

20 New Examples of Minimal Websites

Building Tabbed Navigation using SpryTabbedPanels

How to Create a Basic WordPress Theme with Gantry Framework

15 Fresh jQuery Menu Plugins and Tutorials