Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Autoload next page content on scroll down

Posted on 2011-03-14
3
Medium Priority
?
915 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 9

Accepted Solution

by:
gery128 earned 2000 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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 …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Suggested Courses

604 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