positioning object with

[AaronCampbell]

Well, I'm going to be making a pop-up (well, not pop-up, it'll be in a hidden div that disappears and re-appears), but I'm having problems positioning it. I want to position the calendar in relation to the image that is clicked to call it up. I gave the image an ID, and I pass that as an argument in the function. The code below works fine in IE, but not in mozilla. In mozilla the div appears at top:200 left:200 no matter what. What do I need to do to make it cross-browser?

document.write("<div style=\"position:absolute; visibility:hidden; top:200px; left:200px;\"
id=\"calendar_container\">THIS IS A TEST!!!</div>");
function show_calendar(target,parent,adjLeft,adjRight)
{
var calendar_container = document.getElementById('calendar_container');
var parentID = document.getElementById(parent);
var offsetLeft = getWindowOffsetLeft(parentID);
var offsetTop = getWindowOffsetTop(parentID);
calendar_container.style.left = offsetLeft+adjLeft;
calendar_container.style.top = offsetTop+adjRight;
calendar_container.style.visibility = 'visible';
var date='2004-01-04';
write_date(target,date);
}

function write_date(target,date)
{
target = eval('document.'+target);
target.value=date;
}

function getWindowOffsetLeft(item)
{
var offset = item.offsetLeft;
var parent = item.offsetParent;

while(parent.tagName.toLowerCase()!="body")
{
offset += parent.offsetLeft;
parent = parent.offsetParent;
}
return offset;
}

function getWindowOffsetTop(item)
{
var offset = item.offsetTop;
var parent = item.offsetParent;

while(parent.tagName.toLowerCase()!="body")
{
offset += parent.offsetTop;
parent = parent.offsetParent;
}
return offset;
}

[agent002]

Can't you use document.body.offsetLeft and .offsetTop? I've always thought you can, maybe you should try that instead of those weird functions? The left and top CSS attributes should also have px units, so use
calendar_container.style.left = offsetLeft+adjLeft+'px';
calendar_container.style.top = offsetTop+adjRight+'px';

[AaronCampbell]

well, I tried this:

calendar_container.style.left = document.body.offsetLeft+adjLeft+'px';
calendar_container.style.top = document.body.offsetTop+adjTop+'px';

but if the adj variables are 0, it appears in the top left corner of the body. So I tried this:

calendar_container.style.left = document.body.offsetLeft+calendar_container.offsetLeft+adjLeft+'px';
calendar_container.style.top = document.body.offsetTop+calendar_container.offsetTop+adjTop+'px';

and it gets sloser (in BOTH browsers!), but it's not quite right. The thing is, the img that I need to get the offsets for is in a table, and the table is nested in a table, which is 100% wide, and at the top of the body (should be no offset between the outter table and the body), but the calendar_container.offset* only gets the offset to the parent (the inner table), and so I'm missing the offset that is between the inner table, and the outer table.

What the (weird?) functions are trying to do (and somehow successfully do in IE), is loop through all the parent objects, and increment offset by the offset of that object.
IE: check the offset of the image (in relation to the inner table)
Then check the offset of the inner table (in relation to it's parent, the outter table)
Then check the offset of the outter table (in relation to it's parent, the body)
I want it to stop when it hits the body though.

[AaronCampbell]

Ok, I found this: http://www.oreillynet.com/pub/a/javascript/excerpt/JSDHTMLCkbk_chap13/index6.html

I tried that function, and it works perfectly.

The code now looks like this:
document.write("<div style=\"position:absolute; visibility:hidden; top:200px; left:200px;\"
id=\"calendar_container\">THIS IS A TEST!!!</div>");
function show_calendar(target,parent,adjLeft,adjTop)
{
var calendar_container = document.getElementById('calendar_container');
var parentID = document.getElementById(parent);
var offsetLeft = getWindowOffsetLeft(parentID);
var offsetTop = getWindowOffsetTop(parentID);
var position = getElementPosition(parent);
calendar_container.style.left = position.left+'px';
calendar_container.style.top = position.top+'px';
calendar_container.style.visibility = 'visible';
var date='2004-01-04';
write_date(target,date);
}

function write_date(target,date)
{
target = eval('document.'+target);
target.value=date;
}

function getElementPosition(elemID) {
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof document.body.leftMargin != "undefined") {
offsetLeft += document.body.leftMargin;
offsetTop += document.body.topMargin;
}
return {left:offsetLeft, top:offsetTop};
}