Dynamic Scrollbox
<p>I'm trying to implement Dynamic Scrollbox found in <a href="http://demo.webdeveloperplus.com/dynamic-scrollbox/" rel="nofollow">http://demo.webdeveloperplus.com/dynamic-scrollbox/</a></p>

<p>but it has a problem of keep getting the same list over and over. so I'm trying to view only the items in my aa.html file.</p>

<p>my aa.html file has the following:</p>

<pre><code>&lt;p&gt;Item1&lt;/p&gt;
&lt;p&gt;Item2&lt;/p&gt;
&lt;p&gt;Item3&lt;/p&gt;
&lt;p&gt;Item4&lt;/p&gt;
&lt;p&gt;Item5&lt;/p&gt;
&lt;p&gt;Item6&lt;/p&gt;
&lt;p&gt;Item7&lt;/p&gt;
&lt;p&gt;Item8&lt;/p&gt;
</code></pre>

<p>and my implementation script is:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"&gt;
&lt;head profile="http://gmpg.org/xfn/11"&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;Scrolling Dynamic Content box&lt;/title&gt;
&lt;script type="text/javascript" src="js/jquery-1.3.2.js" &gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$('document').ready(function(){
    updatestatus();

});
function updatestatus(){
    //Show number of loaded items
    var totalItems=$('#content p').length;
    $('#status').text('Loaded '+totalItems+' Items');
    $.get('aa.html', function(data) {
        var dom = $('&lt;div/&gt;').append(data);
        var tnoi = dom.find('p').length;
        alert("Total number of items = " + tnoi + ", Items of Current file = " + totalItems);
            if(totalItems &lt; tnoi)
                scrollalert();

});

}
function scrollalert(){
    var scrolltop=$('#scrollbox').attr('scrollTop');
    var scrollheight=$('#scrollbox').attr('scrollHeight');
    var windowheight=$('#scrollbox').attr('clientHeight');
    var scrolloffset=20;
    if(scrolltop&gt;=(scrollheight-(windowheight+scrolloffset)))
    {
        //fetch new items
        $('#status').text('Loading more items...');
        $.get('aa.html', '', function(newitems){
            $('#content').append(newitems);
            updatestatus();
        });
    }
    setTimeout('scrollalert();', 1500);
}
&lt;/script&gt;

&lt;style type="text/css" &gt;
    #container{ width:400px; margin:0px auto; padding:40px 0; }
    #scrollbox{ width:400px; height:300px;  overflow:auto; overflow-x:hidden; border:1px solid #f2f2f2; }
    #container &gt; p{ background:#eee; color:#666; font-family:Arial, sans-serif; font-size:0.75em; padding:5px; margin:0; text-align:right;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id="container"&gt;
    &lt;div id="scrollbox" &gt;
        &lt;div id="content" &gt;

        &lt;/div&gt;
    &lt;/div&gt;
    &lt;p&gt;&lt;span id="status" &gt;&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;hr /&gt;
&lt;p&gt;
Demo Provided By: &lt;a href="http://webdeveloperplus.com" title="Web Developer Plus - Ultimate Web Development &amp; Design Resource" &gt;Web
Developer Plus&lt;/a&gt;&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
