Javascript – Continuous Pagination

Javascript – Continuous Pagination

<div style=“position:relative;height:400px;width:500px;border:1px solid black;”>
<div style=“overflow:auto;height:100%;width:100%;”
      onscroll=“OnDivScroll();” id=“scrollContainer”>
<!– Entries go here –>
</div>
<div id=“loadingDiv” tyle=“position:absolute;bottom:2px;right:20px;
      padding:5px;display:none;background-color:Black;color:White;”>

Loading…
</div>
</div>
function OnDivScroll()
{
var el = document.getElementById(‘scrollContainer’);
if(el.scrollTop < el.scrollHeight 800)
return;

var loading = document.getElementById(‘loadingDiv’);
if(loading.style.display == )
return; //already loading

loading.style.display = ;

LoadMoreElements();
}

function LoadMoreElements()
{
//Do a server callback to load
//more elements

setTimeout(LoadCallback, 350);
}

var NumberOfNewEntrySets = 1;

unction LoadCallback()
{
var el = document.getElementById(‘scrollContainer’);
var loading = document.getElementById(‘loadingDiv’);

loading.style.display = ‘none’;

for(var i=1; i<=6; i++)
el.innerHTML += “<div class=’entry’>New Entry “ + i
+ ” of Set “ + NumberOfNewEntrySets + “</div>”;
NumberOfNewEntrySets++;
}

<html>
<head>
<title>Auto Fill Scroll Test</title>
<style type=“text/css”>
.entry
{
height:75px;

border-bottom:solid 1px #cccccc;
border-top:solid 1px #cccccc;
border-collapse:collapse;
padding:5px;
}
</style>
<script type=“text/javascript” src=“javascript.js”></script>
</head>
<body>
<div style=“position:relative;height:400px;width:500px;border:1px solid black;”>
<div style=“overflow:auto;height:100%;width:100%;”
          onscroll=“OnDivScroll();” id=“scrollContainer”>
<div class=“entry”>Initial Entry 1</div>
<div class=“entry”>Initial Entry 2</div>
<div class=“entry”>Initial Entry 3</div>
<div class=“entry”>Initial Entry 4</div>
<div class=“entry”>Initial Entry 5</div>
<div class=“entry”>Initial Entry 6</div>
<div class=“entry”>Initial Entry 7</div>
<div class=“entry”>Initial Entry 8</div>
<div class=“entry”>Initial Entry 10</div>
<div class=“entry”>Initial Entry 11</div>
<div class=“entry”>Initial Entry 12</div>
<div class=“entry”>Initial Entry 13</div>
<div class=“entry”>Initial Entry 14</div>
<div class=“entry”>Initial Entry 15</div>
<div class=“entry”>Initial Entry 16</div>
<div class=“entry”>Initial Entry 17</div>
<div class=“entry”>Initial Entry 18</div>
</div>
<div id=“loadingDiv” tyle=“position:absolute;bottom:2px;right:20px;
          padding:5px;display:none;background-color:Black;color:White;”>

Loading…
</div>
</div>
</body>
</html>

var NumberOfNewEntrySets = 1;

function OnDivScroll()
{
var el = document.getElementById(‘scrollContainer’);
if(el.scrollTop < el.scrollHeight 800)
return;

var loading = document.getElementById(‘loadingDiv’);
if(loading.style.display == )
return; //already loading

loading.style.display = ;

LoadMoreElements();
}

function LoadMoreElements()
{
//Do a server callback to load
//more elements

setTimeout(LoadCallback, 350);
}

function LoadCallback()
{
var el = document.getElementById(‘scrollContainer’);
var loading = document.getElementById(‘loadingDiv’);

loading.style.display = ‘none’;

for(var i=1; i<=6; i++)
el.innerHTML += “<div class=’entry’>New Entry “ + i
+ ” of Set “ + NumberOfNewEntrySets + “</div>”;
NumberOfNewEntrySets++;
}

 

 

 

This entry was posted in Code Snippets and tagged , . Bookmark the permalink.

2 Responses to Javascript – Continuous Pagination

  1. RG says:

    Auto Fill Scroll Test

    .entry
    {
    height:75px;

    border-bottom:solid 1px #cccccc;
    border-top:solid 1px #cccccc;
    border-collapse:collapse;
    padding:5px;
    }

    var NumberOfNewEntrySets = 1;

    function OnDivScroll()
    {
    var el = document.getElementById(‘scrollContainer’);
    if(el.scrollTop < el.scrollHeight – 800)
    return;

    var loading = document.getElementById('loadingDiv');
    if(loading.style.display == '')
    return; //already loading

    loading.style.display = '';

    LoadMoreElements();
    }

    function LoadMoreElements()
    {
    //Do a server callback to load
    //more elements

    setTimeout(LoadCallback, 350);
    }

    function LoadCallback()
    {
    var el = document.getElementById('scrollContainer');
    var loading = document.getElementById('loadingDiv');

    loading.style.display = 'none';

    for(var i=1; i<=6; i++)
    el.innerHTML += "

    New Entry ” + i + ” of Set ” + NumberOfNewEntrySets + “

    “;
    NumberOfNewEntrySets++;
    }

    Initial Entry 1
    Initial Entry 2
    Initial Entry 3
    Initial Entry 4
    Initial Entry 5
    Initial Entry 6
    Initial Entry 7
    Initial Entry 8
    Initial Entry 10
    Initial Entry 11
    Initial Entry 12
    Initial Entry 13
    Initial Entry 14
    Initial Entry 15
    Initial Entry 16
    Initial Entry 17
    Initial Entry 18

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s