I'm currently extending the lavalamp plugin to work on dropdown menus but I've encountered a small problem. I need to know the offsetWidth
of an element that is hidden. Now clearly this question makes no sense, rather what I'm looking for is the offsetWidth
of the element were it not hidden.
Is the solution to show it, grab the width, then hide again? There must be a better way...
To find the width and height of an element, width() and height() methods are used. The width() method is used to check the width of an element. It does not check the padding, border and margin of the element.
You can reference the height/width of a div whether its display is "none" or not: var hiddenDiv = document. getElementById('hiddenDiv'); var hiddenDivHeight = hiddenDiv. style.
jQuery width() Method The width() method sets or returns the width of the selected elements. When this method is used to return width, it returns the width of the FIRST matched element. When this method is used to set width, it sets the width of ALL matched elements.
The width of an element that has CSS visibility: hidden
is measurable. It's only when it's display: none
that it's not rendered at all. So if it's certain the elements are going to be absolutely-positioned (so they don't cause a layout change when displayed), simply use css('visibility', 'hidden')
to hide your element instead of hide()
and you should be OK measuring the width.
Otherwise, yes, show-measure-hide does work.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With