element javascript position code not working....

[sarmiena]

The following code is supposed to get the bottom right position of a textbox and set the top left position of a span to those coordinates. It works great with ie7, but not with firefox... any clues?



window.onload = function(){
computeBottomRight();
}

window.onresize = function(){
computeBottomRight();
}

function computeBottomRight(){
//Get the "anchor" element and store it in variable
var element = document.getElementById("TextBox1");

//get element that moves with the anchor
var movableElement = document.getElementById("span1")

//get the length and width of anchor element and store them
var elementWidth = element["offsetWidth"];
var elementHeight = element["offsetHeight"];

//Compute top right of anchor element and add width & height
//to get bottom right position
var x = getAbsPos(element,"Left") + elementWidth;
var y = getAbsPos(element,"Top") + elementHeight;

//Display coords of bottom right in textbox
document.getElementById("TextBox1").innerText = "(" + x + "," + y + ")";

//move the movable element
movableElement.style.pixelLeft = x;
movableElement.style.pixelTop = y;
}

function getAbsPos(element, side){
var position = 0;
while (element != null) {
position += element["offset" + side];
element = element.offsetParent;
}
return position;
}

[premium_coder]

edit doble posting

[premium_coder]

try it in firefox and tell us what kind of errors it says

[sarmiena]

There are no errors or warnings. Not even in the FireFox error console.... any clues????

[sarmiena]

OK! Found the fix.... setting the left needs a unit in firefox, not to mention that pixelLeft and pixelTop are IE proprietary.


//move the movable element
movableElement.style.pixelLeft = x;
movableElement.style.pixelTop = y;

//becomes...

//move the movable element
movableElement.style.left = x + "px";
movableElement.style.top = y + "px";


However, one more thing to note... when using IE, when you resize, the window.onResize is fired during the whole time you are resizing the window. This makes the movable element to constantly move in order to keep its relative distance to the "anchor."

In FireFox, the position of the movable object only re-renders when you finish with resizing the browser window... anyone know how IE differs from FireFox on this????