Solved

Autoload next page content on scroll down

Posted on 2011-03-14
3
903 Views
Last Modified: 2012-05-11
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
Comment
Question by:jhmplondon
  • 2
3 Comments
 
LVL 9

Accepted Solution

by:
gery128 earned 500 total points
ID: 35128425
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35128846
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35128872
Ah, I just looked at the site you suggested.
Mine is not like that, really
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now