Jquery Resize Li Based On A String Size

I have some query which will calculate the pixel width for each li. problem is it doesnt take into consideration the amount of characters in an A href. You might get 'Cartouches/R�

Solution 1:

I can see what you are trying to do, but there are ways far easier to do what you need, without even the need for javascript/jquery.

Consider this:

http://jsfiddle.net/zwqYf/4/

• removed inline width styling.
• changed position:relative and top:3 to line-height
• changed li's padding for "unbunching"

If you need to make them more apart, change the padding on the li's.

If you need to change the button's height, don't forget to change the a's line-height too.

EDIT:

http://jsfiddle.net/zwqYf/5/ - updated, removed some redundant css, made padding between li's larger.

Solution 2:

See http://jsfiddle.net/zwqYf/10/:

We get li elements.

var els=$('div#new-menu-lower ul li');

We store each li's width (including borders, paddings and margins).

elsWidth=newArray();
for(var i=0;i<els.length;i++){
 elsWidth[i]=$(els[i]).outerWidth(true);  
}

We sum them into total

var total=0;
for(var i=0;i<elsWidth.length;i++){
 total+=elsWidth[i];  
}

Then we have an ul of 960px which must contain at least total px.

Then, the available space is $('div#new-menu-lower ul').width()-total.

So each li can have an extra width of ($('div#new-menu-lower ul').width()-total)/(els.length).

var availWidthForEl=($('div#new-menu-lower ul').width()-total)/(els.length);

We round it to 2 decimals

availWidthForEl=Math.floor(availWidthForEl*100)/100;

Finally we assign to each li its current with (without borders, paddings and margins) plus its extra width:

for(var i=0;i<els.length;i++){
 $(els[i]).css('width', $(els[i]).width()+availWidthForEl);
}