asked on

Autoload next page content on scroll down

Hi,

I'm looking for a script that will autoload new webpage content when users reaches bottom of the page.

Something like this one would be ideal: http://www.pr0gramm.com (my website also has images only).

Anyone knows where I could one of these? It can be premium paid script.

Thanks
Tom

ASKER CERTIFIED SOLUTION

gery128

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michel Plungjan

Here is one not using jQuery. It is horizontal.
Let me know if it is useful and I can change it for you

<html>
<head>
<title>Scroll Horizontally</title>
<style>
div { display:inline }
</style>
<script type="text/javascript">
/* © 2008-2011 Michel Plungjan http://plungjan.name */
var pageUrl = "http://www.thewaron.org/josiah/qdig/qdig-files/converted-images/Collage/Urban%20Outfitters%20Free%20People%20Anthropologie/med_image@.jpg"; // the @ will be replaced with the page number 
var nofPages=10;

var throbber = new Image();
throbber.src='http://upload.wikimedia.org/wikipedia/en/7/78/Netscape_throbber_2.gif'; // waiting image


function getQString() {
  var qs = new Array();
  var loc = location.search;
  if (loc) {
    loc = loc.substring(1); // loose the leading ?
    var parms = loc.split('&');
    for (var i=0;i<parms.length;i++) {
      nameValue = parms[i].split('=');
      qs[nameValue[0]]=unescape(nameValue[1]);
    }
  }
  return qs;
}
var qs = getQString();
var pageNumber = parseInt(qs["pagenumber"]); // if you want to scroll to a specific page using pagenumber in the query string
pageNumber  = (isNaN(pageNumber) || pageNumber == null)?0:pageNumber; // starts at 0  
var url = getUrl(pageNumber);

var w =  800;
var h = 1100;
var tId="";
var curScrollPos = 0;
var curPage = 1;
var savePage = 1;
var text = ""; 

function getUrl(pageNumber) {
  return pageUrl.replace(/@/g,pageNumber);
}

function getPlaceHolder(w,h,cnt) {
  return '<img name="img'+cnt+'" src="'+throbber.src+'" alt="" width="'+w+'" height="'+h+'" />'
}
function getEmbed(w,h,url,cnt) {          
  return '<img style="display:none" src="'+url+'" onLoad="document.images[\'img'+cnt+'\'].src=this.src" />';
}
function updateIt() {
  if (savePage == curPage) {
    clearTimeout(tId)
    return;
  }  
  var prevPage = curPage-1;
  if (prevPage >=1) {
    var prevImg = document.images["img"+prevPage];
    if (prevImg.src.toLowerCase().indexOf('.gif')!=-1) prevImg.src=getUrl(prevPage);
  }
  var curImg = document.images["img"+curPage];
  if (curImg && curImg.src.toLowerCase().indexOf('.gif') !=-1) curImg.src=getUrl(curPage);
  var nextPage = curPage+1;
  if (nextPage <= nofPages) { // <=
    var nextImg = document.images["img"+nextPage];
    if (nextImg.src.toLowerCase().indexOf('.gif')!=-1) nextImg.src=getUrl(nextPage);
  }
  savePage = curPage;
}
window.onscroll = scrollIt;
function scrollIt() {
  clearTimeout(tId)
  curScrollPos = (document.body.scrollLeft)?document.body.scrollLeft: window.pageXOffset;
  if (isNaN(curScrollPos)) curScrollPos=0; // when scolling to far left
  // here we need code to handle scrolling to extreme right since in FF that does not trigger the last page
  if (curScrollPos >= ((nofPages-1)*w)) curScrollPos=(nofPages*w)

  curPage = (parseInt(curScrollPos/w)+1);
  if (curPage > nofPages) curPage = nofPages;
  tId=setTimeout('updateIt()',100)
}
window.onload=function() {
  var scrollAmount = (pageNumber-1)*w
  window.scrollTo(scrollAmount,0) 
  scrollIt();
}
</script>
</head>
<body style="overflow:auto">
<script type="text/javascript">
var text = '<table border="1" width='+((w*nofPages)+50)+'>';
text += '<tr align="center">';
for (var i=1;i<=nofPages;i++) {
  text += '<td>page '+ i+'</td>'
}
text += '</tr><tr>';
for (var i=1;i<=nofPages;i++) {
  text += '<td>';
  if (i == (curPage-1) || i == curPage || i == (curPage+1)) {
    text +=getPlaceHolder(w,h,i)+getEmbed(w,h,getUrl(i),i);
  }
  else text+=getPlaceHolder(w,h,i)
  text += '</td>';
}
text+='<td width="50"></td></tr><table>'
document.write(text);
</script>

</body>
</html>

Open in new window

Michel Plungjan

Ah, I just looked at the site you suggested.
Mine is not like that, really