Generate more articles as user scrolls

Question

I am building a website that will allow users to upload images, gifs, and videos. On the home page I want to have a list of files people have uploaded, preferably based on popularity but I'm not that far along yet. When the page first loads, I want to have a certain number of files being shown, based on the users screen resolution. Something where to the user can scroll down a little before more files are loaded. My code right now is just like this:

<article class="item thumb" data-width="282">
     <h2><?php echo $file_title;?></h2>
     <a href="<?php echo $randomImage ?>"><img src="<?php echo $randomImage ?>" alt=""></a>
</article>
<article class="item thumb" data-width="384">
     <h2><?php echo $file_title;?></h2>
     <a href="<?php echo $randomImage ?>"><img src="<?php echo $randomImage ?>" alt=""></a>
</article>

It does that for a total of 8 times. How can I make the page request more tags as the user scrolls over...Just like Facebook loads more content as you scroll down? Sorry if I'm not explaining this well.

Possible duplicate http://stackoverflow.com/questions/13237555/jquery-load-content-when-scroll-to-bottom-100px-of-page-multiple-events-fired — Royal Bg, Jul 18 '13 at 08:42

score 0 · Answer 1 · answered Jul 18 '13 at 08:48

You should look at the window.onscroll event, here you can hook up at function to be called when somebody scrolls the window on your page. Then you can do a decision if more content needs to be loaded.

As always the MDN has some documentation on this. Check it out https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll

score 0 · Answer 2 · answered Jul 18 '13 at 08:53

I am using this method on my webpage, where I check if the user has scrolled almost to the bottom of the page (200px from bottom) and then I will add some data to an existing element.

I have a DIV (#main) where I read the ID of the last entry and then I pass this ID to the AJAX page and add more entries with a higher ID.

$(document).ready(function() {

// Check if we have scrolled to the bottom (trigger 200px from bottom)
$(window).scroll(function() {   
  if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {

    // Get the ID on the last DIV
    var lastDiv = $("#main").find("div:last");
    var lastID = lastDiv.attr("id");

    // Get the new weblog
    ajaxGet(lastID);
  }
});


// ajaxSend will send all form data for processing
// -----------------------------------------------
function ajaxGet (id) {
  $.ajax({
    url: "weblog_ajax.php",
    type: "get",
    data: { wid : id },
    async: false
  }).done(function(data) {
    $("#main").append(data); // append a new DIV
  }).fail(function(data) {
    // do something if it fails
  }).always(function(data) {
    // always do something
  });

} // function ajaxSend

});

So, I want to only load more blocks with random images. How would I write the code that would go in the page referenced by **"url: *"** Do i just put my code that currently loads a random file and puts it in an article tag from the home page? Or is there some special format the ajax php file needs to be in? — Justin Miller, Jul 23 '13 at 07:47

Generate more articles as user scrolls

2 Answers2