Home ›
ASP.NET Forums » General ASP.NET » HTML, CSS and JavaScript » how to determine the absolute position of an element in mozilla

how to determine the absolute position of an element in mozilla

Last post 06-29-2007 9:16 AM by lacustris. 5 replies.

Sort Posts:

  • how to determine the absolute position of an element in mozilla

    06-28-2007, 6:48 PM
    • Member
      21 point Member
    • lacustris
    • Member since 02-13-2007, 4:29 PM
    • Posts 19
    It seems that there is no way to determine the absolute position of an element in mozilla-firefox.  I have tried getComputedStyle, it returns 'auto' for left and top properties.  I tried to use document.getBoxObjectFor.  It returns a box object but the calculation is incorrect.  It doesnot include border width of the containing control.  I tried to add up offsetHeight and offsetWidth of offsetParent myself.  That doesn't work, because I don't have clientTop and clientLeft(top border size and left border size).
     
    Also the offsetparent for most element in Firefox is BODY, event through the element is within a DIV.  It makes it hard to compensate DIV's scrollWidth and scrollHeight.


    So have anyone made it work?  I am looking for an accurate calculation that includes border width and scrolling compensation.

     

    thanks

     Rushui 


     
    Filed under: ,

  • Re: how to determine the absolute position of an element in mozilla

    06-28-2007, 9:18 PM
    • Member
      608 point Member
    • dwlovell
    • Member since 01-19-2006, 7:49 AM
    • Posts 123

    First, the "parent" element for offset purposes is always the most recent ancestor that is relative or absolute. If there are none, it is always body. So:

     <body>

    <div id="a">

    <div id="b"></div>

    </div>

    </body>

    If you check the offset on, b, it will be calculated from <body> UNLESS "a" is marked with position:absolute or position:relative.

     Check this refernce for definitions of clientHeight/clientWidth/clientTop/clientLeft and then offsetTop/Left/Height/Width, you may be able to calculate what you are looking for:

    http://developer.mozilla.org/en/docs/DOM:element

    -David

  • Re: how to determine the absolute position of an element in mozilla

    06-28-2007, 9:36 PM
    • Member
      21 point Member
    • lacustris
    • Member since 02-13-2007, 4:29 PM
    • Posts 19

    Thanks for you reply.  It is good to know where offsetParent comes from.

    I forgot to mention that the reason I couldn't calculate the correct position for mozilla is because clientTop and clientLeft property is to be implemented in FF3.0.  I was wondering why it kept returning me undefined, until I read the doc more carefully.

     I am not sure if there is an easy way to do it for now.  But I am very unfamiliar with FF.  Hoping someone has a trick =)

     -Rushui

  • Re: how to determine the absolute position of an element in mozilla

    06-29-2007, 12:35 AM
    • All-Star
      25,356 point All-Star
    • A1ien51
    • Member since 05-06-2005, 2:46 PM
    • MD USA
    • Posts 4,816
    		 
    function getElementPosition(theElement){

      var posX = 0;
      var posY = 0;
                  
      while(theElement != null){
        posX += theElement.offsetLeft;
        posY += theElement.offsetTop;
        theElement = theElement.offsetParent;
      }
                            		      
       return {x:posX,y: posY};

    }

     basic use:

    var elem = document.getElementById("myDivId");
    var pos = getElementPosition(elem);
    alert(pos.x + "|" +pos.y);
    elem = null;
     

     Eric

    Pascarello.com | Twitter epascarello | LinkedIn

  • Re: how to determine the absolute position of an element in mozilla

    06-29-2007, 4:15 AM
    • Participant
      1,012 point Participant
    • jaloplo
    • Member since 06-23-2005, 10:58 AM
    • Alcala de Henares, Spain
    • Posts 254

    Use Firebug plugin to know all attributes and properties values of the page your viewing. It's a very recommended software to plug to Firefox. In addition, you can use its debugger to discover mistakes in your javascript code (like ie, but I think Firebug is better).

    https://addons.mozilla.org/en-US/firefox/addon/1843 

    Please mark the most helpful reply/replies as "Answer".

    My Blog

  • Re: how to determine the absolute position of an element in mozilla

    06-29-2007, 9:16 AM
    Answer
    • Member
      21 point Member
    • lacustris
    • Member since 02-13-2007, 4:29 PM
    • Posts 19

    I know this is an commonly asked question, but most answers are close but not 100% correct.

    The correct way to calculate absolute position of an dom element in IE is:

     

    1    function getCoord(obj, offsetLeft, offsetTop){
2    	var orig = obj;
3    	var left = 0;
4    	var top = 0;
5    	if(offsetLeft) left = offsetLeft;
6    	if(offsetTop) top = offsetTop;
7    	if(obj.offsetParent){
8    		left += obj.offsetLeft;
9    		top += obj.offsetTop;
10   		while (obj = obj.offsetParent) {
11   			left += (obj.offsetLeft-obj.scrollLeft+obj.clientLeft);
12   			top += (obj.offsetTop-obj.scrollTop+obj.clientTop);
13   		}
14   	}
15   	return {left:left, top:top, width: orig.offsetWidth, height: orig.offsetHeight};
16   }

     You will have to use scrollLeft and scrollTop to compensate DIV's scrolling.  clientLeft and clientTop are needed to compensate any border width.  But that's IE, in firefox clientLeft and clientTop are not available yet, I am having a hard time to adjust scrolling because DIV is never an offsetParent.  I guess nothing is perfect.., if my pop up is a few pixels off, so be it =)

    - Rushui 


     
Page 1 of 1 (6 items)
RSS Available

Contact | Advertise
Terms of Use | Trademarks | Privacy Statement
© 2010 Microsoft Corporation. All Rights Reserved.