Absolutely-positioned DIV tags can be used to make your web page more dynamic without too much effort. However since the browsers generally render html of the web page differently, it might be difficult to position the DIV adequately.

The sample presented here will allow you to place an absolutely-positioned DIV attached to other page element. Attach to this button; x, y shifts = 0 Attach to this button; x shift = 10, y shift = 50




To use the script perform the following steps:

• Have absolutely-positioned DIV on the page. If you want it to appear directly on the target place, have it with style display:none.
• Insert the following code somewhere on the page (or put in separate file and reference it):

<script type="text/javascript"><!--
/* Script by: www.jtricks.com
 * Version: 20081003
 * Latest version:
 * www.jtricks.com/javascript/blocks/moving.html
 */
function attachAbsoluteBox(an, box, shift_x, shift_y)
{
    var cleft = 0;
    var ctop = 0;
    var obj = typeof an == 'object' 
        ? an : document.getElementById(an);
    var att = typeof box == 'object'
        ? box : document.getElementById(box);

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

    att.style.left = (cleft + shift_x) + 'px';

    // 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']);
    }

    att.style.top = (ctop + shift_y) + 'px';
    att.style.display = 'block';
}

//--></script>

• Use attachAbsoluteBox()function with with the object or its id to attach to, DIV object or its id to move and shifts on the x and y axis from the object's top left corner. For example:

<button 
    id="button1"
    onclick="attachAbsoluteBox('button1', 'div1', 0, 0)">
        Attach to this button with x, y shifts = 0
</button>

or

<button
    id="button2"
    onclick="attachAbsoluteBox(document.getElementById('button2'),
                 document.getElementById('div1'), 10, 50)">
        Attach to this button with x shift = 10, y shift = 50
</button>

• Be sure to verify page design with the Javascript turned off.

The javascript snippet above was tested on the following user agents:

Mozilla	Firefox 3.0.x	Ok.
	Firefox 2.0.x	Ok.
	Firefox 1.5	Ok.
	Firefox 1.0.x	Ok.
Microsoft	Internet Explorer 7.0	Ok.
	Internet Explorer 6.0	Ok.
	Internet Explorer 5.0	Ok.
Opera	Opera 9.x	Ok.
	Opera 8.x	Ok.
KHTML	Safari 3.1.2 for Windows	Ok.
	Konqueror 3.5.5	Ok.
No Javascript or Javascript turned off	Any	Downgrades gracefully *.

*: Graceful degradation means the DIV will appear in it initial place if it was visible and will not be shown if it was initially invisible.