jQuery width, outerWidth(), innerWidth() returning incorrect data

Question

For some reason, I cannot get jQuery to give me reliable width data for various elements. Here is a link to a fiddle that demonstrates the problem: http://jsfiddle.net/snoopydaniels/ZDbaa/1/

I am attempting to create a multidimensional drop down menu. As you can see in the jsfiddle, the second nested menu is not positioned correctly. The jQuery that I employ to position it queries the sibling anchor element using outerWidth() to discover its width, then sest the left position of the nested list according to the returned width. When I give the sibling anchor element a set width in CSS then I get something near the correct value, but without that static width, outerWidth() returns "2."

But even when I give anchor elements a set width, outerWidth(true) still does not correctly incorporate the border of the element.

I'm about to pull my hair out. Why can't crap like this just work as advertised?

Answer 1

The various width commands don't work for hidden elements (display: none).

If you use css to set a width, jquery will return that. Otherwise you'll get no, or meaningless, results.

The classic solution is to position the element off the screen, check the width, then hide it and put it back. (You can probably find a jquery plugin that will do that in one command.)

Sometimes there are ways of restructuring the html and/or css so you avoid this.

Sometimes you can fix the size right after showing the element.

You can also try setting the visibility to hidden, so the element gets a size, but is invisible. Depending on the your design this might work.

Answer 2

I had a similar issue in receiving what appeared to be random results when calling jQuery width functions. When the browser was refreshed, I would get the correct answer about 50 percent of the time.

I made the mistake of immediately checking the width of the div within the $(document).ready() function. When I changed to calling outerWidth() within $(window).load(), the correct answer was always returned.

Answer 3

You need to call $(window).trigger('resize') which will trigger a fake window resize event. Afterwards, the outerWidth should have the proper value.

Make sure that you are triggering the fake window resize event once your data is populated.

In other words, if you are checking the width of a <td> inside a <th> for example, make sure the table is populated and all the resizing is done before triggering the fake resize event and checking the outerWidth.

This is a workaround due to the limitations mentioned by Ariel in https://stackoverflow.com/a/12085210/774630