Load webpage content dynamically

Question

For my college project we are making a music download site.

On the page where I will be displaying the music. (which can be found by clicking the iStore button on the homepage) I want to display a top 100 or something along those lines. and at the bottom of the first 5 or so have a button which loads another 5.

I'm all for doing it my self etc. Would you be able to link me to some kind of tutorial etc.

Although so far I'm ahead of class where they are still using tables and not even onto CSS yet so any help is appreciated as we will be learning JQuery at some point but so far my knowledge of it is very little

the website in question can be found here: http://www.ryanholder.co.uk/project

Answer 1

You could remove the button and add more content when scrolling down :

$(document).ready(function() {
  $("#content").scroll(function(){
    if($("#content").scrollTop() >= ($("#content-wrapper").height() - $("#content").height()))
    {
        $.get("url", function(data){
            $("#content").append(data);
        });
    }
  })
});

By checking the scrollTop value you can determine whether the scrollbar has reached near to the bottom or not. If it reached, send an AJAX request to server to get more content and append it to the page.