PHPology.co.uk Collective of freelance web developers and designers

  • Load Content While Scrolling With jQuery

    Working on this art gallery competition project for Internet Week where one of the request was:
    "Rather then have pagination links, can we have it so that when the user scrolls to the bottom of the browser, new content is loaded in?"

    I had seen websites like this before and always thought it was a really cool feature on a website, esp for a gallery type website.

    Searching the net, found this link that gave me a good base to start with. I kind of followed his steps but made a few tweaks to the way the pagination worked.

    Below is the code that I used which would send through the page number everytime condition as met which then using PHP displayed the relevent results.

        var pageLoaded = 1; //this basically says that we are on page 1 of the results
      $(window).scroll(function()
       {
       
        if($(window).scrollTop() == $(document).height() - $(window).height())
        {
         pageLoaded = pageLoaded+1; //when this condition has met, increase the pageLoaded so that I can tell php told load in data for page 2/3/4/5, etc, etc
         $.post("gallery_ajax_load.php?page="+pageLoaded,
            function(data)
           {
                if (data != "")
              {
                 $('#submissions').append(data);
                }
             }
         );
         //alert(pageLoaded);
        }
       }
      );

  • Comments

    2 comment(s)
    On Wed 29th February 2012 at 05:01am, Ashish wrote:
    Wow, great one! Basically better solution, will try this soon and will see if this really works or not! Thanks for sharing!!
    On Tue 23rd August 2011 at 10:55am, Nilo Botay wrote:
    very good. very good nice tutorials
    Add your comment
    Name*:
    Email*:
    Website URL (including full path e.g. http://www.yourwebsite.com/):
    Comment* (html/script tags will be removed):
    What do you see below?: