Get the offset of a hidden element

Question

How can I get the coordinates of a hidden element? offset() doesn't support the use for hidden elements. Any hints?

Headrick

try using .position().X and Y – Sundin

position desnt work. i use a local variable to storage .offset() before it was set invisible. – Headrick

No way. Use workarounds below. According to your goals, you may just use visibility:hidden instead of display:none and you'll able to get the position. – Lempres

I'm laughing because I 'invested' last hour... (now it seems obvious) – Fullblooded

Answer 1

If your element has had .hide() called on it, or if it's got display:none in css, the browser doesn't bother rendering it at all. In this case, the answer is not directly. In recent jQueries, you can't even get its width or height.

On the other hand, if you .show() an element, then .hide() it before an execution loop (an event firing through to when there's no more code to run for that event), the browser will be forced to relayout the page and you'll be able to get its offset between when it's shown and hidden, but it won't be forced to repaint, so your users won't see a blip, and you won't lose as much performance as you might think.

Caldwell

If this element is containing more info like images and other stuff, I think: YES, the user could see an annoying 'blitz' in several browsers. – Kktp

Nope. Maybe in older browsers, but modern browsers will relayout but not repaint until they absolutely must. Here's a test I ran: pastie.org/1892044 and the timeline that Chrome Inspector yielded: skitch.com/cxlt/r67h3/developer-tools-file-tmp-test.html As you can see, has to layout and recalculate styles, but it does not repaint the screen until after it's already done the show(), the measure, and the hide(). – Caldwell

This is great except you used : <div class="display:none"> Hm, 'CLASS'... a typo? ;) – Kktp

Answer 2

You can get coordinates of visibility:hidden element but display:none element is excluded from rendering tree. So its position is undefined.

Stylolite

This is actually the correct answer. Also, since visibility:hidden takes up space, you can also add position:absolute to the CSS for your DIV, this would make it truly invisible (since it would no longer take up any layout space). Cheers. – Chiquita

Answer 3

Other than quick show & do-stuff & hide -procedure, it might be possible to simply use loading mask to pretend that screen (or part of it) is invisible.

This occurred when I was working on map which had hidden elements. I needed to get css-positions / offsets read without displaying those elements. I came up with three possible methods to use:

• load mask over map for the time being, so that map doesn't display hidden elements, and read offsets (problem: overlay hides parent element (map) too). This works best if there is no parent-element which requires displaying.

• change z-index of elements which are hidden, so that they go behind parent element, show & and read values, hide 'em and change z-index to original.

• use separate data-variables for CSS-styles, so that they are part of element. This works nice if elements have fixed/absolute positions against window or certain element, since css-positions / offsets won't change according to size of window/element. This worked well in my case, since I was working with elements absolute against window (fullscreen/-window application).

Other methods suggested by users work too, but it all depends on what you are working on.

Mawson

Answer 4

I recently stumbled upon Element.getClientRects(), which returns a DOMRectList with DOMRect elements inside. I tested it on a hidden element on my website and it returned plausible coordinates on

document.querySelector('#someHiddenElement').getClientRects()[0]

This will though return several DOMRects if you apply it to a multiline <span> for example, so there you should take several/all of the contained DOMRects, not only the first into account.

Bannockburn