Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Find the "potential" width of a hidden element

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...

like image 754
Gausie Avatar asked Dec 03 '09 16:12

Gausie


People also ask

How do you find the width of an element?

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.

How do you find the width of a display none 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.

How do I set the width of an element in jQuery?

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.


1 Answers

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.

like image 120
bobince Avatar answered Nov 04 '22 18:11

bobince