jQuery: hidden elements - general question

Question

hi,

when elements are hidden, you can't read eg. their dimensions, is this a general javascript problem or is there maybe a workaround in jQuery?

i'm having eg. some tabs which contain widgets, initializing them doesn't work properly since they're hidden.

thx

Answer 1

No workaround that I know of.

You could, however, use visibility:hidden instead of display:none in your CSS. Elements that are hidden using visibility:hidden maintain their position and size but are simply invisible.

Hope this helps.

Answer 2

This dimension plugin says it can get the dimensions of hidden elements.

Answer 3

If you set visibility:hidden the element still takes up space, so set position:absolute as well to move it out of the document flow. If necessary you can position the element off the screen so that it does not invisibly block events and such.

$("#el").css({
    visibility: "hidden",
    position: "absolute",
    left: "-9999px"
});

From there you can still read the element's width. For example:

$("#el").width();

Hope this helps!

Answer 4

This blog post highlights a way to get dimensions of an element that is hidden using display:none. The other answers here touch on the same ideas, but both don't offer a solution to reverting the CSS properties back to their original values.