?
Solved

FireFox sets 0 to offsetLeft and offsetTop of dynamically created DIV

Posted on 2007-03-22
4
Medium Priority
?
2,084 Views
Last Modified: 2010-05-19
Hi
I create a <div> object dynamically:
             
              var divHolder = document.createElement('div');
               anotherDiv.appendChild(divHolder);

Now I  want to calculate its absolute coords Left and Top
and use the well known code:

function getElementAbsoluteCoords (aElement, aLeft, aTop)
{
      aLeft = 0;
      aTop  = 0;
      if (aElement.offsetParent)
      {
            aLeft = aElement.offsetLeft
            aTop  = aElement.offsetTop
            while (aElement = aElement.offsetParent)
            {
                  aLeft += aElement.offsetLeft
                  aTop  += aElement.offsetTop
            }
      }
}

In IE and Opera this works ok, but in FireFox offsetLeft and offsetTop are always 0.

What can I do?
0
Comment
Question by:mak730
  • 2
4 Comments
 
LVL 28

Assisted Solution

by:TName
TName earned 800 total points
ID: 18778043
It works ok for me, try this example.
BTW, why do you pass aLeft and aTop as parameters, if you set them to 0 anyway?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>

function createTheDiv()
{
   var divHolder = document.createElement('div');
   divHolder.id='newDiv';
   divHolder.style.border='1px solid #f00';
   divHolder.style.width=150+'px';
   divHolder.style.height=100+'px';
   divHolder.innerHTML='test';
   //divHolder.style.position='relative';
   //divHolder.style.left=50+'px';
   document.getElementById('parent').appendChild(divHolder);
     }

function getElementAbsoluteCoords(aElement)
{
      aLeft = 0;
      aTop  = 0;
      if (aElement.offsetParent)
      {
            aLeft = aElement.offsetLeft
            aTop  = aElement.offsetTop
            while (aElement = aElement.offsetParent)
            {
                  aLeft += aElement.offsetLeft
                  aTop  += aElement.offsetTop
            }
      }
alert('Left: '+aLeft+'     Top: '+aTop);
}

</script>
<body>
<div id="parent" style="position:relative; left:300px; width:200px; height:200px; border:1px solid #ccc">
  <input type="button" value="Create" onClick="createTheDiv();">  
  <input type="button" value="Test" onClick="getElementAbsoluteCoords(document.getElementById('newDiv'))">
  <br><br><br>
</div>
</body>
</html>
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 1200 total points
ID: 18778105
Is the anotherDiv element already attached anywhere on the page in the original question? Is it visible? Does it have position style set to absolute?




0
 

Author Comment

by:mak730
ID: 18780467
ja, you are right, TName's code works fine. The params aLeft and aTop are sent to the function to calc their values and returns (as ref parameters).

The problem was that I was calc the position BEFORE set divHolder.style.display = "inline", divHolder was invisible when I ran getElementAbsoluteCoords. Opera and IE doesn't care that it was invisible, but FireFox does.

Thanks, guys.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 18780914
You are welcome.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question