Solved

Autoload next page content on scroll down

Posted on 2011-03-14
3
909 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
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 the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

786 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