www.webdeveloper.com
Results 1 to 3 of 3

Thread: Autoload previous posts when scroll down...

  1. #1
    Join Date
    Mar 2012
    Posts
    2

    Exclamation Autoload previous posts when scroll down...

    well, on my website.. load previous posts is already configured BUT WHEN TRIGGERED WITH A CLICK ON PARTICULAR LINK...

    now, the requirement is to load the previous posts on scroll down (AS IN FACEBOOK AND TWITTER...)


    this is the source of the link which when clicked loads previous posts

    Code:
           <a id="more_<?php echo @$next_records?>" href="javascript: void(0)" class="more_records">
                <div id="bottomMoreLink">
                    Dig More...
                </div>
            </a>
    now as this code doesn't include a function name, there is a script which has got the same class as this one to handle the request.. which is as under..

    Code:
    <script type="text/javascript">
    $('a.more_records').livequery("click", function(e)
    {
    SOME CUSTOM CODE TO LOAD POSTS..
    });
    </script>
    now as per the requirement... i have two things to do..

    1. Detect the user has scrolled down to the end of the page.

    this can be done as follows...

    Code:
    <scrtip type="text/javascript">
    $(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
          lastRow();
        }
    });
    </script>
    2. trigger the thing that loads previous posts.. if the user has scrolled to the bottom of the page

    THIS IS WHERE I AM LOOKING FOR SOME HELP, WHICH IS CURRENTLY BEING DONE BY A CLICK ..
    am not able to figure out how to trigger the code in second block above..

    please suggest something..

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    You will need to keep track of some state in JavaScript. When the page loads, you'll need to know which page you are currently on. When the user scrolls down far enough, increment that number, making a POST or GET back to PHP using Ajax and insert the HTML for a new page of results into a new DIV.

  3. #3
    Join Date
    Mar 2012
    Posts
    2
    wtf.. i always knew.. what i need to do..

    the only question was.. how do i it..

    and here is the sollution..

    var invoked = false;
    var height = $(document).height() - 2400 - $(window).height();
    $(window).scroll(function()
    {
    if ($(window).scrollTop() >= height && !invoked )
    {
    invoked = true; // don't call this twice
    $('a.more_records').click();
    }
    });

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles