Solved

FireFox sets 0 to offsetLeft and offsetTop of dynamically created DIV

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

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…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now