47

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

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Simon
  • 1,463
  • 6
  • 34
  • 46

4 Answers4

52

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.

issa marie tseng
  • 3,194
  • 22
  • 20
  • 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. – Roko C. Buljan May 12 '11 at 06:59
  • 4
    Nope. Maybe in older browsers, but modern browsers will relayout but not repaint until they absolutely must. Here's a test I ran: http://pastie.org/1892044 and the timeline that Chrome Inspector yielded: https://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()`. – issa marie tseng May 12 '11 at 07:08
  • This is great except you used :
    Hm, 'CLASS'... a typo? ;)
     – Roko C. Buljan May 12 '11 at 20:43
39

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

c-smile
  • 26,734
  • 7
  • 59
  • 86
  • 5
    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. – ObiHill Jun 02 '11 at 15:12
0

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.

Janne
  • 1,111
  • 3
  • 12
  • 17
0

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.

Lampe2020
  • 115
  • 1
  • 12