coordinates of a DIV

[Stimp]

I know this is not really an ASP.NET question, but I usually
get a quick reply in this group and it's a fairly broad web dev enquiry:

How could I get the coordinates of a DIV relative to the page, in
javascript (or even asp.net if that's possible)?

Thanks,
Peter

 

[Ken Dopierala Jr.]

Hi Peter,

I think you can use:

intY = document.getElementById('divName').style.top;
intX = document.getElementById('divName').style.left;

Good luck! Ken.

 

[Kevin Spencer]

Hi Peter,

This is a difficult question, and a good one!

Positioning in HTML can be done through any of 3 (that I can think of) ways:

1. "Flow Layout" positioning: HTML elements are positioned using the default
HTML rules. When using "Flow Layout" positioning, tables are generally used
to position elements, if the rules of HTML won't allow it straight out of
the box. For example, a table with 2 cells might be used to position 2
images next to each other horizontally.

2. Using Attributes: Certain HTML elements have positioning attributes. More
of them have sizing attributes, such as width and height. Positioning
attributes include things like alignment, and so on.

3. CSS: CSS styles are applied which can position an element absolutely
relative to the page, relative to its immediate container. CSS positioning
is generally used with Pixels as the sizing unit.

Depending upon which of these methods you use to do your positioning, you
have several alternatives to calculate relative positions with Divs. You can
use the offsetParent, offsetTop,. and offsetLeft properties of the Div in
JavaScript to calculate how much the Div is offset from its parent
container. Again, note that this would have to be applied to each successive
parent container in order to work for the document itself. If using CSS with
absolute positioning, the top and left styles indicate the relative position
to the document itself. With relative positioning, you get the same results,
but only for the immediate container.

You may or may not have to factor in margins, etc. as well. The following
URL will take you to an MSDN article that goes into more detail. Note that
the article is IE-specific, but for the most part, applies to other browsers
as well:

http://msdn.microsoft.com/workshop/author/om/measuring.asp?frame=true

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
I get paid good money to
solve puzzles for a living

 

[Ken Dopierala Jr.]

Hi Peter,

Forgot you wanted it relative to the page. These are the lines I use to
make sure my div is viewable no matter where the user has scrolled to on the
page:

intOffsetY = document.body.scrollTop;
intOffsetX = document.body.scrollLeft;

Good luck! Ken.

Hi Peter,

I think you can use:

intY = document.getElementById('divName').style.top;
intX = document.getElementById('divName').style.left;

Good luck! Ken.

 

[David Jessee]

checking the style only return something if you've explicitly set it. Look
up the
offsetLeft, offsetTop, offsetHeight and offsetWidth properties on msdn at:
http://msdn.microsoft.com/library/d...uthor/dhtml/reference/properties/position.asp