SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    scrollPosition IE/MZ

    I want to calculate how far a page is scrolled down. I found how to do this with Internet Explorer with the following equation: (scrollFrame.document.body.scrollTop / (scrollFrame.document.body.scrollHeight - scrollFrame.document.body.clientHeight)) (where scrollFrame is parent.yourFrameName)
    But I canít find it for Mozilla. I have (scrollFrame.window.pageYOffset / (scrollFrame.document.height - scrollFrame.window.innerHeight))
    The result of the equation should give 0 when you are at the top of the screen and 1 when you scrolled down. Independent of the window size of course. But that's just what the problem is: As the window size increases, the result of this equation (when you are scrolled all the way down) diverts from 1 to 2.

    Some examples:

    almost maximzed window at 1280 x 1024:
    At the top: 0 / (830 - 756) = 0
    In the middle: 48 / (830 - 756) = 0.6486486486486487
    At the bottom: 94/(830 - 756) = 1.2702702702702702

    maximzed window at 1280 x 1024:
    At the top: 0 / (830 - 810) = 0
    In the middle: 20 / (830 - 810) = 1
    At the bottom: 40 / (830 - 810) = 2

    I canít figure out the solution, maybe another property of the window or document and I donít like the solution of reinstalling my old screen so I switch back to a normal 1024x768

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's what I use:
    Code:
    // taken from the X Library, licensed LGPL
    // from cross-browser.com
    
    function xScrollLeft(e) {
      var offset=0;
      if (!(e=xGetElementById(e))) {
        if(document.documentElement && document.documentElement.scrollLeft) offset=document.documentElement.scrollLeft;
        else if(document.body && xDef(document.body.scrollLeft)) offset=document.body.scrollLeft;
      }
      else { if (xNum(e.scrollLeft)) offset = e.scrollLeft; }
      return offset;
    }
    function xScrollTop(e) {
      var offset=0;
      if (!(e=xGetElementById(e))) {
        if(document.documentElement && document.documentElement.scrollTop) offset=document.documentElement.scrollTop;
        else if(document.body && xDef(document.body.scrollTop)) offset=document.body.scrollTop;
      }
      else { if (xNum(e.scrollTop)) offset = e.scrollTop; }
      return offset;
    }
    function xDef() {
      for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])=='undefined') return false;}
      return true;
    }
    function xNum(n) {
      return typeof(n)=='number';
    }
    function xGetElementById(e) {
      if(typeof(e)!='string') return e;
      if(document.getElementById) e=document.getElementById(e);
      else if(document.all) e=document.all[e];
      else e=null;
      return e;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    I tried all suggestions I have had, but none worked. All proposed properties gave the same result as scrollFrame.window.pageYOffset. So I knew it was scrollFrame.document.height - scrollFrame.window.innerHeight that flawed. My solution is than is to search the actual scrollHeight in advance:


    Code:
      
    var totalScrollHeight; //the tot scrollHeight of the scrollframe
     
     
     
    // FOR MZ : Going after the scrollHeight because scrollFrame.window.pageYOffset NOT IS scrollFrame.document.height-scrollFrame.window.innerHeight @ max scrollDown
     
    if (document.getElementById)
     
    {
     
    // Scrolling all the way down
     
    scrollFrame.scrollTo(0, scrollFrame.document.height);
     
    // storing the scrollHeight
     
    totalScrollHeight = scrollFrame.window.pageYOffset;
     
    // Scrolling back to the top
     
    scrollFrame.scrollTo(0, 0);
     
    }
    Here I finally have what I thought to find with scrollFrame.document.height - scrollFrame.window.innerHeight



    And I just fill it in the equation, resulting in scrollFrame.window.pageYOffset/ totalScrollHeight;



    Damn, always searching for the right properties cross-browser scripting is a disaster (even if you assume there are only two browsers)
    Are there any good cross-browser scripting tutorials or ebooks?

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've lost me. I thought you were needing a cross-browser "clientHeight" function.

    Don't trust "document.height" to be cross-browser.

    Are there any good cross-browser scripting tutorials or ebooks?
    Yes

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, maybe some of the alternative property names are used better than. But anyway it was the fact that scrollFrame.window.pageYOffset NOT IS scrollFrame.document.height-scrollFrame.window.innerHeight @ max scrollDown and the code above solves that problem.

    (Are there any good cross-browser scripting tutorials or ebooks?)

    Yes
    Any URLs at hand ?


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
  •