Positioning a DIV relative to another

[laredotornado]

Hi,

I have a 16x16 image that will be dragged around the screen as part
of a larger DIV. When someone clicks on the image, I'd like another
DIV (id="newDiv") to appear directly beneath the image. The DIV with
id="newDiv" is initially hidden. How do I do this?

One thing to note, "newDiv" is not in the same DIV as the image, so it
does not get moved around while the image does.

Thanks, - Dave

 

[Pete]

Hi,

I have a 16x16 image that will be dragged around the screen as part
of a larger DIV. When someone clicks on the image, I'd like another
DIV (id="newDiv") to appear directly beneath the image. The DIV with
id="newDiv" is initially hidden. How do I do this?

One thing to note, "newDiv" is not in the same DIV as the image, so it
does not get moved around while the image does.

I'm not exactly a javascript veteran myself [and I've been encountering
oddities of my own, as you might see from another post], so don't place
too much faith in this, but I have a feature on one of my pages that's
a little bit similar.

I have a large group photo, and a rectangle can be placed around any
of the people by clicking on their name (below the image). I just use
a div -- transparent with a border -- for this.

To get the div to be able to be placed *over* the image, rather than
relative to it, I give its class a style that includes 'position=absolute'.
Then I can just do a moveTo(<appropriate coordinates>).

To determine those coords, I need to know the position of the object
it is to be associated with (an imagemap area in this case). This
doesn't seem to be directly available for most objects, so I have
a function [found on the Web] like:

function findPosn(elem) {
var x=0, y=0;
if (typeof(elem.offsetParent) == 'undefined') return [elem.x, elem.y];
var currobj = elem;
while(currobj) {
x += currobj.offsetLeft;
y += currobj.offsetTop;
currobj = currobj.offsetParent;
}
return [x, y];
}

This 'walks up' the DOM adding up the relative offsets at each level of
the tree to get the actual true position in the window.

Hope that's meaningful.

-- Pete --

 

[laredotornado]

Hi,

I have a 16x16 image that will be dragged around the screen as part
of a larger DIV. When someone clicks on the image, I'd like another
DIV (id="newDiv") to appear directly beneath the image. The DIV with
id="newDiv" is initially hidden. How do I do this?

One thing to note, "newDiv" is not in the same DIV as the image, so it
does not get moved around while the image does.

I'm not exactly a javascript veteran myself [and I've been encountering
oddities of my own, as you might see from another post], so don't place
too much faith in this, but I have a feature on one of my pages that's
a little bit similar.

I have a large group photo, and a rectangle can be placed around any
of the people by clicking on their name (below the image). I just use
a div -- transparent with a border -- for this.

To get the div to be able to be placed *over* the image, rather than
relative to it, I give its class a style that includes 'position=absolute'.
Then I can just do a moveTo(<appropriate coordinates>).

To determine those coords, I need to know the position of the object
it is to be associated with (an imagemap area in this case). This
doesn't seem to be directly available for most objects, so I have
a function [found on the Web] like:

function findPosn(elem) {
var x=0, y=0;
if (typeof(elem.offsetParent) == 'undefined') return [elem.x,elem.y];
var currobj = elem;
while(currobj) {
x += currobj.offsetLeft;
y += currobj.offsetTop;
currobj = currobj.offsetParent;
}
return [x, y];

}

This 'walks up' the DOM adding up the relative offsets at each level of
the tree to get the actual true position in the window.

Hope that's meaningful.

-- Pete --

Hey Pete, This function works great! 5 stars. - Dave