Getting Co-ordinates of the Focused Element

[webfoo]

Hello.

What is the best way to get the (x,y) co-ordinates of the currently focused (active) element?

When the user starts typing into any textbox, I want a certain <div> to move just below that textbox. If they switch to another textbox, the <div> needs to move below that one. So on and so forth.

So after obtaining the (x,y) co-ordiantes of the focused element, I would just add about 15 to X, and that would place my box about right where it needs to be.

[webfoo]

Bump.

[rainborick]

This isn't something I've done, but I've sometimes wanted to. I did a little digging, and most of the solutions involve checking the offsetParent property and consecutively crawling back up the DOM tree until you hit the top. You'll probably have better results if the parent block-level element's position property has been explicitly set. There's a quick snippet on quirksmode [quirksmode.org] that might be helpful in getting you started.

[johnblack]

How about

var currObj = document.activeElement;

using

currObj.style.top
currObj.style.left

I've not tried that, but it's what I have found by doing a quick search. Hope it helps.

[rainborick]

That won't always work. JavaScript won't be able to retrieve the values of style.top or style.left unless they're explicitly set in a style attribute in the HTML, or if they were set elsewhere previously by JavaScript. And the top/left style settings will only give you the position relative to the parent positioned element, which may not be adequate. By crawling back up through the DOM from the element in question, you get its position relative to the top of the page. You could certainly stop at the first parent element if that's all you need, of course.

[webfoo]

Rainborick, you said exactly what I found out when I tried it. currObj.style.left|top only works when the position is set by CSS.

The point is to find the co-ordinates of the text input relative to the entire page, so that another div will move just below that text input.

[rainborick]

Did you try the code from quirksmode? It seems to be the way to go. I've sometimes wanted to offer pop-up captions like tooltips, but always put it off until I'd developed a general solution that I could drop in on pages. So I've been looking into this off and on for, well, a few years.

[Fotiman]

Many of the JavaScript frameworks have this sort of functionality (like YUI [developer.yahoo.com]). It can get somewhat complicated to try an calculate this yourself, as there are other things to take into account, like whether the page is scrolled, etc. YUI does a good job of this, and is pretty lightweight, so I would recommend that approach.