MozillaZine

HELP GETTING ELEMENT X,Y in FireFox

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Post a reply
Eric O
 
Posts: 16
Joined: April 12th, 2006, 6:14 pm
April 13th, 2006, 12:11 pm

Post Posted April 13th, 2006, 12:11 pm

Basically, I need to draw a <div> over an image. The top and left of the div should match that of the image. This code works in IE but not FireFox. Please help!


Below is the complete code. Just create a 400 X 350 bmp and save as test.bmp.

Thanks



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
function CreateDiv() {
var imgPosition;
var img = document.getElementById("image");
imgPosition = getElementPosition(img);

var _width=300;
var overLayer = createElement("div");
document.body.appendChild(overLayer);
overLayer.style.position = "absolute";
overLayer.style.background = "red";
overLayer.style.top = imgPosition.top;
overLayer.style.left = imgPosition.left;
overLayer.style.width = _width + "px";
overLayer.style.height = _width + "px";
overLayer.style.border = "1px solid red";
overLayer.style.cursor = "crosshair";
}

function getElementPosition(obj){
var position = new Object();
position.left = calcLeftPosition(obj);
position.top = calcTopPosition(obj);
return position;
}

function calcLeftPosition (obj){
var curleft = 0;
if (obj.offsetParent) {
while (1) {
curleft+=obj.offsetLeft;
if (!obj.offsetParent) {
break;
}
obj=obj.offsetParent;
}
} else if (obj.x) {
curleft+=obj.x;
}
return curleft
}

function calcTopPosition(obj){
var curtop = 0;
if (obj.offsetParent) {
while (1) {
curtop+=obj.offsetTop;
if (!obj.offsetParent) {
break;
}
obj=obj.offsetParent;
}
} else if (obj.y) {
curtop+=obj.y;
}
return curtop;
}

function createElement(element) {
if (typeof document.createElementNS != 'undefined') {
alert("Trying in FireFox");
return document.createElementNS('http://www.w3.org/1999/xhtml', element);
}
if (typeof document.createElement != 'undefined') {
return document.createElement(element);
}
return false;
}
</script>
</head>
<body >
<table cellspacing="0" cellpadding="0">
<tr valign="top">
<td style="width:800px; text-align:center">
<input type="button" value="Create Data" onclick="CreateDiv();" ID="CreateData" NAME="CreateData">
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0">
<tr valign="top">
<td style="width:200px; text-align:center">
</td>
<td style="width:600px; text-align:center">
<img style="cursor:crosshair;" id="image" src="test.bmp">
</td>
</tr>
</table>

</body>
</html>
texmex
 
Posts: 403
Joined: March 26th, 2006, 8:58 am
Location: NE Lincs
April 14th, 2006, 6:47 am

Post Posted April 14th, 2006, 6:47 am

Looking at this function
Code: Select all
function calcLeftPosition (obj){
var curleft = 0;
if (obj.offsetParent) {
while (1) {
curleft+=obj.offsetLeft;
if (!obj.offsetParent) {
break;
}
obj=obj.offsetParent;
}
} else if (obj.x) {
curleft+=obj.x;
}
return curleft
}

IF current object has a parentOffset object:
You add the current objects offsetLeft to itself.

Whereas:
It should actually retreive the offsetLeft of the offsetParent object and add that
It doesn't actually retrieve the offset of the parent object at all.


I have made two modifications to your specimen code:

1) Rewrote the function calcLeftPosition
2) Added the +"px" to lines 16 and 17

It now appears to work. (You may want to modify your function calcTopPosition(obj) in a similar fasion for consistency)

Here's the whole thing with my mods
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
function CreateDiv() {
var imgPosition;
var img = document.getElementById("image");
imgPosition = getElementPosition(img);

var _width=300;
var overLayer = createElement("div");
document.body.appendChild(overLayer);
overLayer.style.position = "absolute";
overLayer.style.background = "red";
overLayer.style.top = imgPosition.top + "px";
overLayer.style.left = imgPosition.left + "px";
overLayer.style.width = _width + "px";
overLayer.style.height = _width + "px";
overLayer.style.border = "1px solid red";
overLayer.style.cursor = "crosshair";
}

function getElementPosition(obj){
var position = new Object();
position.left = calcLeftPosition(obj);
position.top = calcTopPosition(obj);
return position;
}

function calcLeftPosition (obj)
{
var curleft = obj.offsetLeft;

while(obj.offsetParent)
  {curleft=curleft + (obj.offsetParent.offsetLeft);
   obj=obj.offsetParent;
  }
   
return curleft;
}

function calcTopPosition(obj){
var curtop = 0;
if (obj.offsetParent) {
while (1) {
curtop+=obj.offsetTop;
if (!obj.offsetParent) {
break;
}
obj=obj.offsetParent;
}
} else if (obj.y) {
curtop+=obj.y;
}
return curtop;
}

function createElement(element) {
if (typeof document.createElementNS != 'undefined') {
alert("Trying in FireFox");
return document.createElementNS('http://www.w3.org/1999/xhtml', element);
}
if (typeof document.createElement != 'undefined') {
return document.createElement(element);
}
return false;
}
</script>
</head>
<body >
<table cellspacing="0" cellpadding="0">
<tr valign="top">
<td style="width:800px; text-align:center">
<input type="button" value="Create Data" onclick="CreateDiv();" ID="CreateData" NAME="CreateData">
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0">
<tr valign="top">
<td style="width:200px; text-align:center">
</td>
<td style="width:600px; text-align:center">
<img style="cursor:crosshair;" id="image" src="test.bmp">
</td>
</tr>
</table>

</body>
</html>
amarcruz
 
Posts: 2
Joined: April 21st, 2006, 8:23 am
April 21st, 2006, 1:39 pm

Post Posted April 21st, 2006, 1:39 pm

Try this please:

Mozilla:
Don't use relative/absolute tables in divs with position:relative/static
IE:
Use relative tables in relatives divs
Don't use margin for body

Use position:relative for tables in divs with overflow:auto or scroll
Enclose the entire page in div (avoid problems in IE for relative tables in relative divs)

Fragment example:
Code: Select all
...
<style type="text/css">
body     { margin:0; }
/* If you need tables in divs: */
div,table{ position:relative; }
html:not([dummy]) table{ position:static; }   /* For Mozilla/ OSX Safari?/ MSN OSX? */
#Body    { margin:0; padding:0; position:static; zoom:1; }
</style>
</head>
<body>
<div id="Body">
...
</body>
</html>


javascript code for get object's position (relative to document)

Code: Select all
function getTopLeft(sID){
   var o=document.getElementById(sID);
   if(o==null){return [0,0];}
   var top=o.offsetTop,left=o.offsetLeft;
   o=o.offsetParent;
   while(o){
      if(!document.all){
         if(o.scrollTop)top-=o.scrollTop;
         if(o.scrollLeft)left-=o.scrollLeft;
         // Mozilla bug
         if((o.tagName=='DIV')||(o.tagName=='TABLE'&&navigator.vendor=='Netscape'))
            top+=getAttrPixValue(o,'border-top-width')|0,left+=getAttrPixValue(o,'border-left-width')|0;
      }
      top+=o.offsetTop;
      left+=o.offsetLeft;
      o=o.offsetParent;
   }
   if(navigator.userAgent.indexOf('Mac')!=-1 && typeof(document.body.leftMargin)!='undefined'){
      left+=document.body.leftMargin,top+=document.body.topMargin;   // working?
   }
   return [top,left];
}
function getAttrPixValue(e,a){
   var px=0;
    if(window.getComputedStyle){
        var css,sty=window.getComputedStyle(e,'');
      if(sty&&sty.getPropertyCSSValue){
         css=sty.getPropertyCSSValue(a);
         if((css)&&css.primitiveType<=18){try{px=css.getFloatValue(5)|0;}catch(e){};}
      }
    }
    return px;
}
amarcruz
 
Posts: 2
Joined: April 21st, 2006, 8:23 am
April 24th, 2006, 11:27 am

Post Posted April 24th, 2006, 11:27 am

Sorry,
replace line# 5 of getTopLeft()
Code: Select all
      if(!document.all){

for
Code: Select all
      if(document.all){
         if(o.offsetParent){
            if(o.scrollTop)top-=o.scrollTop;
            if(o.scrollLeft)left-=o.scrollLeft;
         }
      }else{

Return to Web Development / Standards Evangelism

Post a reply

Who is online

Users browsing this forum: No registered users and 6 guests