Solved

FireFox sets 0 to offsetLeft and offsetTop of dynamically created DIV

Posted on 2007-03-22
4
2,038 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
You are welcome.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

771 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

10 Experts available now in Live!

Get 1:1 Help Now