Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 918
  • Last Modified:

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
0
jhmplondon
Asked:
jhmplondon
  • 2
1 Solution
 
gery128Commented:
Hello Tom,

Check out this link:
http://stackoverflow.com/questions/3863069/how-do-you-call-a-javascript-ajax-function-when-the-user-reaches-the-end-of-a-p

It has discussion of Infinite Scroll jQuery Plugin. Which enables automatic as well as custom content load at the end of the page. http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
0
 
Michel PlungjanIT ExpertCommented:
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

0
 
Michel PlungjanIT ExpertCommented:
Ah, I just looked at the site you suggested.
Mine is not like that, really
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now