Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    determine position of element from top of page (not browser)

    I have a floating div that stays at the bottom of the browser window while the user scrolls down a long page. The div reads "scroll down for more". How can I determine the current position of the div in relation to the top of the page, not the top of the browser window. I need to determine this because I would like to hide the div when the user scrolls to the top of the last page. I have looked at offsetParent, offsetHeight, scrollHeight, etc.

    I have the code for everything except determining the position of the div, or the distance of the div from the top of the page.
    Last edited by RCGUA; 07-27-2011 at 07:38 PM. Reason: first word in title was mispelled

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Maybe this (comprehensive) article will help you: http://www.quirksmode.org/mobile/viewports.html

  • Users who have thanked devnull69 for this post:

    RCGUA (07-28-2011)

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    the key was the scroll event not div position

    Thank You Very Much! the link you supplied helped to point me in the right direction and I learned that I could track the "scroll" of the scroll to see how far the user has moved down page. There are two different ways to track scrolling depending on whether the browser is IE or non-IE. The code below checks the scrolling, the page height and the window height.

    Code:
    <script type="text/javascript">
    function f_scrollTop() {
    var returnValue = undefined;
    if (navigator.appName == 'Microsoft Internet Explorer'){
        var ua = navigator.userAgent;
        var ie = ua.indexOf('MSIE')
        returnValue = parseInt(ua.substring(ie+5, ua.indexOf ('.', ie)));
    }
    if (returnValue==undefined)
    {
    yoya = window.pageYOffset;
    alert("non-IE scroll position is " + yoya);
    }
    else
    {
    if (document.documentElement && document.documentElement.scrollTop)
    yoya = document.documentElement && document.documentElement.scrollTop;
    alert("IE scroll position is " + yoya);
    }
    
    ph = document.body.scrollHeight;
    alert("page height = " + ph);
    winH = 460;
    if (document.body && document.body.offsetWidth) {
     winH = document.body.offsetHeight;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
     winH = document.documentElement.offsetHeight;
    }
    if (window.innerWidth && window.innerHeight) {
     winH = window.innerHeight;
    }
    alert("window height = " + winH);
    ah = screen.availHeight;
    alert("available height" + ah);
    }
    window.onscroll = f_scrollTop;
    </script>
    Last edited by RCGUA; 07-28-2011 at 05:11 PM. Reason: mispelling


  •  

    Posting Permissions

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