Width ul Testing

by Susan Delgado

HTML

description: define ul width to the total width of li's
<ul id="list">
    <li>
        <p>List eachsdfd rdgdfg sdfdsf sd Item</p>
    </li>
    <li>
        <p>List Item</p>
    </li>
    <li>
        <p>List Item</p>
    </li>
    <li>
        <p>List Item</p>
    </li>
    <li>
        <p>List Item</p>
    </li>
</ul>

CSS

ul {
    padding:0;
    position: relative;
    height:auto;
    border:1px solid #000;
    font-size:0;
}
li {
    padding:10px;
    margin:0;
    background:red;
    display:inline-block;
    border:1px solid blue;
    font-size:0px;
    width:20px;
}
li p {
    font-size:14px;
}

JavaScript

var SETUP = (function (self) {

      function __init(id) {
          _setup(id);
      };
      var _globals = {
          name: " ",
          count: 0,
          width: 0,
          iwidth: 0
      };

      function _setup(id) {
          _globals.name = '#' + id;

          _globals.count = $(_globals.name + " > li").size();

          _setWidth();
      };


      function _setWidth() {
           var w = parseInt($(_globals.name + " > li").width());
          var ww = parseInt($(_globals.name + " > li").outerWidth(true));
          console.log(w);
          _globals.width = (ww * _globals.count);
          _globals.iwidth = (w);
          
           console.log('window width / 2 = ' + $(_globals.name + " > li").width()/2);
     

        console.log('width = ' + $(_globals.name + " > li").boxWidth);
        console.log('width = ' + $(_globals.name + " > li").css('width'));
        console.log('width = ' + $(_globals.name + " > li").width());
        console.log('width = ' + $(_globals.name + " > li").outerWidth(false));
        console.log('width = ' + $(_globals.name + " > li " ).outerWidth(true));
      };

      function _getCount() {
          return _globals.count;
      };

      function _getItemWidth() {
          return _globals.iwidth;
      }

      function _getWidth() {
          return _globals.width;
      };

      //  __init();

      /*Reveal module API methods*/
      return {
          init: __init,
          getWidth: _getWidth,
          getIWidth: _getItemWidth
      };
  }(SETUP || {}));


  var obj = {
      nameid: "list"
  }

      function init(obj) {

          SETUP.init(obj.nameid);


          $('#' + obj.nameid).css('width', SETUP.getWidth() + 'px').find('li').css('width', SETUP.getIWidth() + 'px');

      };
  init(obj);