You have a search page and as the results end you show a navigation bar with links to the other pages of the search. So boring. Seriously. This is the Web, and I am still turning pages.

And I think I am Pied Piper who will save you from this hell. The uber-cool solution is, detect as soon as a user is about to reach the end of the page and get new content[the second page of the search], just in time. Setting out, we need:

The height of the current document. So to this end, we will place a div with a decided upon ID at the end of the page. And all the content in the body will be loaded in another div just above this last div. We are detecting the document height by detecting where this ending div is located, pixel-wise, with this:

pageend = document.getElementById(‘laststop’).offsetTop;

So clearly, the ID of the last div is ‘laststop’. Next we need the screen resolution of the client window to find out how much of the document is visible right now. We do:

winheight = (typeof window.innerHeight != ‘undefined’ ? window.innerHeight : document.body.offsetHeight);

Now having this much, we need to detect when does the user scroll the page to the bottom. The following lines will give exactly how many pixels from the top have you scrolled to. Note that, this is the ‘height’ from the top of the document to the top of the visible area. The real end of the document is obtained by adding this ‘height’ and the window height retrieved earlier.

if(navigator.appName == “Microsoft Internet Explorer”)
alert(document.body.scrollTop);
else
alert(window.pageYOffset);

But these lines need to be run every few seconds to check as soon as as the user reaches the end of the current page. So we will do a setInterval() in the onload event of the body to do so. And keep the interval time to something a little over 2 seconds and nothing less than that, you of course don’t want your user’s browser to hang on them. It is annoying.

Said and done, this is what you end up with, demofile.php, annotated with explanatory comments:

<html>
<head>
<title>Page End Reached Detection Demo</title>
<script type=”text/javascript”>
var oRequest;
var pageend, winheight;
var howoften = 2000;
// this value implies that function howlow() will keep checking every
// 2000 milliseconds(2 seconds) to find out how low is the user on the page

var bufferHeight = 300;
// adjust bufferHeight, to take action as soon as the user is within these
// many pixels of the end of the page, so a larger buffer makes sure the user doesn’t
// see the dynamic page content loading. In this example, the script will fetch content
// as soon as you are within 200 pixels of the end of the page

// ooooo, ajax. ooooooo …
if(window.XMLHttpRequest)
oRequest = new XMLHttpRequest();
else if(window.ActiveXObject)
oRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

function sendAReq()
// a generic function to send away any data to the server
// specifically ‘morecontent.php’ in this case, to get more content from the server
// all content fetched will be handled by showcontent()
{
oRequest.open(“POST”, “morecontent.php”, true);
oRequest.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
oRequest.onreadystatechange = showcontent;
oRequest.send(null);
}

function showcontent()
{
if(oRequest.readyState == 4)
{
// now all the data that comes adds to the end of the page, specifically
// to the container div referenced with the ID ‘bodycontent’
if(oRequest.status == 200)
document.getElementById(‘bodycontent’).innerHTML = document.getElementById(‘bodycontent’).innerHTML + oRequest.responseText;
else
alert(‘No Response from Server. Try Again Later.’);
}
}

function calcParams()
{
// calculate the end coordinates of the page and the visibile height of a page
// at any time on the client’s desktop
pageend = document.getElementById(‘laststop’).offsetTop;
winheight = (typeof window.innerHeight != ‘undefined’ ? window.innerHeight : document.body.offsetHeight);
}

function isitend(curpos)
{
calcParams();
if((curpos + winheight + bufferHeight) > pageend)
{
alert(‘you are reaching the end of the page;’);
sendAReq();
}
else
{
alert(‘keep going’);
}
}

function howlow()
{
if(navigator.appName == “Microsoft Internet Explorer”)
isitend(document.body.scrollTop);
else
isitend(window.pageYOffset);
}
</script>
</head>

<body onload=”javascript:setInterval(‘howlow()’,howoften);”>
<div id=’bodycontent’>
<?php
for($index=0; $index<200; $index++)
echo ‘Line:’.$index.'<br>’;
?>
</div>
<div id=’laststop’/>
</body>
</html>

Oh and yeah, this sends a request using the XMLHttp object so we need another php file at the server to catch the request and send in additional content. This additional content will be appended to the div with ID ‘bodycontent’. So here is morecontent.php

<?php
for($index = 0; $index < 100; $index++)
echo ‘We Are New Lines:’.$index.'<br>’;
?>

That’s about it. Please do throw in your experiences with this in the comments section below and I will surely respond. I am jobless. 🙂