CODEWITHSUNDEEP
jqueryhiddenelement
Fuxi
Fuxi

Reputation: 7599

jQuery: hidden elements - general question

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

Upvotes: 0

Views: 731

Answers (4)

Tim Banks
Tim Banks

Reputation: 7179

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.

Upvotes: 0

devongovett
devongovett

Reputation: 4880

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!

Upvotes: 0

Hooray Im Helping
Hooray Im Helping

Reputation: 5264

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

Upvotes: 0

Lior Cohen
Lior Cohen

Reputation: 9055

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.

Upvotes: 2

Related Questions