Your Ad Here Your Ad Here
Results 1 to 2 of 2

Thread: How to Auto "extend" site?

  1. #1
    100%'s Avatar ╚════╩═╬════╝
    Join Date
    Jan 2003
    Posts
    13,671
    If you look at this site
    http://www.butdoesitfloat.com/
    let it finish loading
    then
    scroll to the bottom
    it then automatically loads the rest of 15 submissions, then when you reach the bottom of that one it does more.
    How does one do this?

  2. Internet, Programming and Graphics   -   #2
    I've only done AJAX with symfony, which uses the prototype framework so I can't help you much with that aspect. But I put together some javascript to alert you once you've scrolled 90% or more down the page, which ought to be enough to get you started. You might also want to take a look at the javascript on that site to see what they do.

    Make sure to give your body tag an id. I called it "page".

    Code:
    <script>
    
    function getRelativeScroll() {
    
        var windowHeight = 0;
        var maxScroll = 0;
        var scrollPosition = 0;
        var bodyMaxScroll = document.getElementById('page').scrollHeight; 
     
      if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        windowHeight = window.innerHeight;
      } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        windowHeight = document.documentElement.clientHeight;
      } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        windowHeight = document.body.clientHeight;
      }
    
    maxScroll = bodyMaxScroll-windowHeight;
      
    scrollPosition = document.body.scrollTop;
    
    if (scrollPosition == 0) {
        if (window.pageYOffset) {
            scrollPosition = window.pageYOffset;
        }
        else {
            scrollPosition = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
        }
    }
    
    
    // if the scroll position is greater than 90% of the maximum, do your thing
    if(scrollPosition/maxScroll > 0.9) {
    // this is where the AJAX call(s) that add more content would go
        alert(scrollPosition/maxScroll);
        }
    }
    
    
    // the number value, in milliseconds, determines how often to check the scroll position
    setInterval("getRelativeScroll()",1000)
      
    </script>

Bookmarks

Posting Permissions

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