Get width of ul in jQuery

Question

I need to get the width of a <ul> which has a dynamic width, in order to set the width for its enclosing <li>s to the width of the <ul> for IE7.

The <ul> is styled display:block. Currently jQuery's .width() returns 0. I tried to get the widest <li>'s width, because it sets the width for the <ul>'s but here, I get 0, too?

Is there any way (or workaround) to get the width of the <ul> or its <li>s?

Laura

Sharing some of your markup, css and javascript would be helpful. — davin, Jul 04 '11 at 00:38
@domanokz Yes, I Used jQuery and its width() function, which returned a 0. — Laura, Jul 04 '11 at 00:44
@Laura - I mean not jQuery, try this `document.getElementById("YourElement").offsetWidth` instead of `$('#YourElement').width()` — kazinix, Jul 04 '11 at 00:47

kazinix · Answer 1 · 2011-07-04T01:21:29.930

Try to use the method "offsetWidth":

<ul id="MyElement" style="display:block;visibility:hidden;">
    <li>Hello World!</li>
    <li>Hellow Web!</li>
</ul>
<script type="text/javascript">
    alert(document.getElementById('MyElement').offsetWidth);
</script>

It should return an element's dynamic width.

Or if you want jQuery try to add this to your jQuery file (jquery.js)

jQuery.fn.offsetWidth = function () {
    return this.offsetWidth;
}

If it's set to hidden (seems to be the problem) and still returns 0 as width, try to clone the element (the element you want to get the width from). Set css position:absolute; left:-200; top -200;visibility:visible; of your element copy. Get the width of the element copy either jQuery or just JavaScript. Remove the element copy. You should now get the width. The top and left is set negative so the element copy won't appear on your screen.

Note that this can make your execution a little bit slower.

Like this: 'jQuery(document).ready(function($){ $('div.level-0').children('ul').children('li').each(function(){ var width = $(this).offsetWidth(); alert(width); }); }); jQuery.fn.offsetWidth = function () { return this.offsetWidth; }' ? — Laura, Jul 04 '11 at 01:02
Hm, no put it on your jquery.js file... Or are you referencing your jQuery from other website? If so, try my suggestions above, I've edited my post. — kazinix, Jul 04 '11 at 01:06

score 1 · Answer 2 · edited May 23 '17 at 12:19

1

jQuery doesn't like hidden elements: jQuery - Get Width of Element when Not Visible (Display: None)

edited May 23 '17 at 12:19

Community

1
1

answered Jul 04 '11 at 00:44

jerluc

4,186
2
25
44

hmmmm...good idea, but there is a div wrapped around the ul's. it is hidden, too, but I get its width, also when it is hidden. – Laura Jul 04 '11 at 00:49
1

Do you have any code you can post to further illustrate your situation? – jerluc Jul 04 '11 at 00:54
@laura is it `display:none` or `visibility: hidden` ? – James Khoury Jul 04 '11 at 00:58
2

@James, good point, as jQuery is fine with `visibility: hidden`, just not `display: none` on the parent div – jerluc Jul 04 '11 at 00:59
http://jsfiddle.net/Nrf5V/ Shows the difference between `visibility` and `display` in terms of jQuery and `.width()` – James Khoury Jul 04 '11 at 01:10
1

this should be a vote to close as duplicate instead of an answer – Pablo Fernandez Jul 04 '11 at 01:58

score 0 · Answer 3 · answered Jul 04 '11 at 00:44

0

Are you writing your script as a part of $(document).ready() handler? Like:

$(document).ready(function() {
// Here.
});

Or is it run when the page is loading? Maybe your script is executed before the width of the <ul> is set.

answered Jul 04 '11 at 00:44

Maciek

3,174
1
22
26

score 0 · Answer 4 · answered Jul 04 '11 at 01:45

0

Do you need the list items to have bullets? If you don't, this can be solved with CSS only, by applying display:block to the <li>s.

answered Jul 04 '11 at 01:45

bfavaretto

71,580
16
111
150

score 0 · Answer 5 · answered Jul 04 '11 at 02:14

The way I do dropdowns is to set them to be position: absolute and left: -5000px (instead of display: none). That way you can just set/remove the "left" property when you want to hide/show them, and the dimensions of the element are always available. Since you haven't posted any code/markup, I'm not sure if this suggestion would work in your situation, but I thought I'd throw it out there.

As for answering your question, you should use offsetWidth, and remember to add the padding, border width, and margin values of the element to the offsetWidth too.

Get width of ul in jQuery

5 Answers5