A bit of a challenge

Retrieving absolute/relative positions from elements

[dnimrodx]

Hi there,

I have been asked to design & code some pull down menus in javascript but, as it happens, my site's pages were designed using only tables and not (positioned) layers.

My dilemma lies in how to know where a certain element -- in this case a table column, which typically acts as a button -- is in the page in order to know where to position the pull-down menu.

My questions are:
- does the DOM offer any way of knowing the rendered coordinates of non-position-fixed elements by using client-side javascript?

- in the case the answer to the above question fails to be positively productive, are there any tricks of the trade I could employ to make this happen?

Any suggestions will be greatly appreciated!

Thank you,

Dave

[ScottYardley]

I would like to introduce you to a wonderful tool. Its called the "DOM Inspector" and it comes packaged with the Mozilla browser (not firefox).

This cool tool will open any web page. In the bottom frame you'll see the web page. In the top two frames you see the full tree of Dom Nodes, Javascript Objects and Style sheets.

When you click on an item in the tree you can view all attributes, values, children, parents...etc.
If you want to reference something in a webpage this puppy will show you how to do it.

Just click Tools/Web Developement/DOM Inspector to launch

[BlobFisk]

How are your going to achieve your pulldown menu?

If it is by means of a layer, you can do this without knowing the coordinates of the element. Place the code the the menu next to the (say) text that acts as the trigger, then set the position to absolute but do not give a top and left value. Instead use margin values to move your menu to the desired location.

This will allow you to place the menu in the correct position without knowing exactly where it is on the page.

You could call relative absolute positioning (R) (Trademarks pending!)!

HTH

[dnimrodx]

Instead use margin values to move your menu to the desired location

Positioning the layer is not a problem. The problem lies in the fact that, because I am strictly using tables to display the content, I do not know where to position the layer relatively to the button -- which, in this case, lies in a variable-width table column.

Therefore a way must be found to firstly know the column's coordinates and width/height, in order to be able to position the layer apropriately.

Any thoughts on this?

Dave

PS: A similar example of what I am trying to accomplish can be found in Yahoo mail -- when you click on Mark as or Move to a pull-down menu is shown.