CODEWITHSUNDEEP
javascriptjquery
SOLDIER-OF-FORTUNE
SOLDIER-OF-FORTUNE

Reputation: 1654

jquery calculated list items not showing correctly

I have some Jquery which will calculate the width of the UL to then divide it by the number of list items, giving them a value so the menu fits full width.

The problem is i have menu items which dont show fully as the code is calculating the list item rather than the string length in the A.

Cartridges/Cylinders doesnt show correctly and Garden & DIY is wrapped to the next line.

HTML:

<div class="container">
 <div id="new-menu-lower">
  <ul class="menuul">
   <li class="menuli">
       <a href="/test.aspx">Barbecues</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Stoves</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Lanterns</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Cartridges/Cylinders</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Coolers</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Boats</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Airbeds</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Garden & DIY</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Toilets</a>
   </li>
  </ul>
 </div>
</div>

JQUERY:

//set the menu li sizes once everything has loaded.
$(document).ready(function() {
    $('div#new-menu-lower ul li').css('width', ($('div#new-menu-lower ul').width() / $('div#new-menu-lower ul li').length));
    $(function() {
        var menuWidth = $('div#new-menu-lower ul').width();
        var listItems = $('div#new-menu-lower > ul > li').length;
        alert('The UL is calculated at: ' + menuWidth + 'px');
        var itemWidth = Math.floor(menuWidth * (1 / listItems)) - 20;
        $('div#new-menu-lower ul li').css('width', itemWidth);
    });
});

CSS:

div.container
{
    clear: both;
    margin: 10px auto 0;
    width:960px;
    border:1px solid red;
    height:700px;
}

div#new-menu-lower {
    border-radius: 3px 3px 3px 3px;
    border-top: 0 solid lightgrey;
    margin: 0 8px 10px;
}

#new-menu-lower ul {
    border: 1px solid orange;
    display: block;
    height: 27px;
}

#new-menu-lower ul li:first-child {
    border-left: 0 solid lightgrey !important;
    border-radius: 7px 0 0 7px;
}

#new-menu-lower ul li {
    background-image: url("http://i45.tinypic.com/16if95z.png");
    background-repeat: repeat;
    border-right: 0 solid lightgrey !important;
    float: left;
    height: 27px;
    padding-left: ;
    padding-right:;
    text-align: center;
    width: 168px;
    margin-left:1px;
}

DEMO: http://jsfiddle.net/rM9MW/45/

Upvotes: 1

Views: 151

Answers (3)

avall
avall

Reputation: 2055

You substract 20 pixels from element width but your margin and padding of LI element is zero. If you erase this 20px you should consider substracting 1px from every element to include border width.

In other words, change this:

var itemWidth = Math.floor(menuWidth * (1 / listItems)) - 20;

to this:

var itemWidth = Math.floor(menuWidth * (1 / listItems)) - 1;

Upvotes: 1

Mihai Matei
Mihai Matei

Reputation: 24276

I think you can use a simpler solution. Take a look at this jsfiddle which i've created for you.

You don't need to use jquery, but only css.

Upvotes: 1

jaychapani
jaychapani

Reputation: 1509

Change 

var itemWidth = Math.floor(menuWidth * (1 / listItems)) - 20;

to

var itemWidth = Math.floor(menuWidth * (1 / listItems)) - 1;

And 

   </li>
      <li class="menuli">
       <a href="/test.aspx">Garden & DIY</a>
   </li>

To

   </li>
      <li class="menuli">
       <a href="/test.aspx">Garden&nbsp;&&nbsp;DIY</a>
   </li>

Update demo

Upvotes: 1

Related Questions