SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Maryland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to determine the relative position of an element?

    I know how to figure out the top coordinate of an element relative to the top of the document. I can use one of the following:

    - document.defaultView.getComputedStyle(document.getElementById(element_id), '').getPropertyValue('top')

    - document.getElementById(element_id).offsetTop


    But I want to know the top coordinate of an element relative to the top of the viewable area of the browser. Does anyone know how to do this (in IE, Opera, and Mozilla)?

  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)
    Hi delerious,

    offsetTop is the top position relative to the element's 'containing' element.

    Without writing this from scratch, I'll show one way of doing it using functions from the X library.

    Example usage:
    Code:
    var clientY = xPageY(ele) - xScrollTop();
    Functions from the X library:
    Code:
    // Extracted from X v3.14.1, Cross-Browser DHTML Library from Cross-Browser.com
    // This library is distributed under the terms of the LGPL (gnu.org)
    
    function xPageY(e) {
      if (!(e=xGetElementById(e))) return 0;
      if (xDef(e.pageY)) return e.pageY;
      var y = 0;
      while (e) {
        if (xDef(e.offsetTop)) y += e.offsetTop;
        e = xDef(e.offsetParent) ? e.offsetParent : null;
      }
      return y;
    }
    
    function xScrollTop(e) {
      var offset=0;
      if (!(e=xGetElementById(e))) {
        if(xDef(window.pageYOffset)) offset=window.pageYOffset;
        else 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 xGetElementById(e) {
      if(typeof(e)!='string') return e;
      if(document.getElementById) e=document.getElementById(e);
      else if(document.all) e=document.all[e];
      else if(document.layers) e=xLayer(e);
      else e=null;
      return e;
    }
    
    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';
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Maryland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mike!


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
  •