Solved

FireFox sets 0 to offsetLeft and offsetTop of dynamically created DIV

Posted on 2007-03-22
4
2,048 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 200 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 300 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

776 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