Help with a popup box

how do I change the position?

[malasorte]

The code below is part of a JavaScript which when a user clicks on a link makes a box with information pop up directly on the page, partially hiding the page content. The box appears below the link, but I need it to be above the link.

This is the code which controls the box's position, but I'm too much of a noob to figure out how to change it myself, even though I've tried... So I need your help! Thanks!

// Moves the box object to be directly beneath an object.
function move_box(an, box)
{
var cleft = 0;
var ctop = 0;
var obj = an;

while (obj.offsetParent)
{
cleft += obj.offsetLeft;
ctop += obj.offsetTop;
obj = obj.offsetParent;
}

box.style.left = cleft + 'px';

ctop += an.offsetHeight + 8;

[daveVk]

ctop += an.offsetHeight + 8;

This line position of top of box 8 pixels below, for bottom of box 8 pixels above you need

ctop = ctop - boxObj.offsetHeight - 8;

where boxObj is object of the box

[malasorte]

Thanks a lot daveVk, ctop = ctop - box.offsetHeight - 8; does the trick!

However, a new problem has appeared. The box pops in the right position when I click on the link, but after I close it and click the link again the box doesn't appear where it should, its position is wrong. This happens in all browsers. If I refresh the browser the box pops OK, but after that at another click on the link its position is wrong again.

I really don't know what the problem could be and I've spent almost all my day trying to solve it. Here is the complete script; maybe someone can spot the problem. Thanks a lot!

// Moves the box object to be directly beneath an object.
function move_box(an, box)
{
var cleft = 0;
var ctop = 0;
var obj = an;

while (obj.offsetParent)
{
cleft += obj.offsetLeft;
ctop += obj.offsetTop;
obj = obj.offsetParent;
}

box.style.left = cleft + 'px';

ctop = ctop - box.offsetHeight - 8;

// Handle Internet Explorer body margins,
// which affect normal document, but not
// absolute-positioned stuff.
if (document.body.currentStyle &&
document.body.currentStyle['marginTop'])
{
ctop += parseInt(
document.body.currentStyle['marginTop']);
}

box.style.top = ctop + 'px';
}

// Shows a box if it wasn't shown yet or is hidden
// or hides it if it is currently shown
function show_hide_box(an, width, height, borderStyle)
{
var href = an.href;
var boxdiv = document.getElementById(href);

if (boxdiv!= null)
{
if (boxdiv.style.display=='none')
{
// Show existing box, move it
// if document changed layout
move_box(an, boxdiv);
boxdiv.style.display='block';
}
else
// Hide currently shown box.
boxdiv.style.display='none';
return false;
}

// Create box object through DOM
boxdiv = document.createElement('div');

// Assign id equalling to the document it will show
boxdiv.setAttribute('id', href);

boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.border = borderStyle;
boxdiv.style.textAlign = 'right';
boxdiv.style.padding = '4px';
boxdiv.style.background = '#FFFFFF';
document.body.appendChild(boxdiv);

var offset = 0;

// Remove the following code if 'Close' hyperlink
// is not needed.
var close_href = document.createElement('a');
close_href.href = 'javascript:void(0);';
close_href.onclick = function()
{ show_hide_box(an, width, height, borderStyle); }
close_href.appendChild(document.createTextNode('Close'));
boxdiv.appendChild(close_href);
offset = close_href.offsetHeight;
// End of 'Close' hyperlink code.

var contents = document.createElement('iframe');
//contents.scrolling = 'no';
contents.overflowX = 'hidden';
contents.overflowY = 'scroll';
contents.frameBorder = '0';
contents.style.width = width + 'px';
contents.style.height = (height - offset) + 'px';

boxdiv.appendChild(contents);

move_box(an, boxdiv);

if (contents.contentWindow)
contents.contentWindow.document.location.replace(
href);
else
contents.src = href;

// The script has successfully shown the box,
// prevent hyperlink navigation.
return false;
}

[daveVk]

move_box(an, boxdiv);
boxdiv.style.display='block';

Try changing order of these statements, offsetHeight may not be valid while display not 'block'

[malasorte]

daveVk it works perfectly now! Thank you very much!