Button Alignment Test

This test demonstrates button wrapping techniques to control button layout and positioning using a variety of methods through css

by hyperthalamus

HTML

<div id="buttonBar">
  <div class="buttonWrapper" style="left:0;">
    <div class="innerWrapper"><button>clickme</button></div>
  </div>
  <div class="buttonWrapper" style="left:33.333%;">
    <div class="innerWrapper"><button>clickme</button></div>
  </div>
  <div class="buttonWrapper" style="left:66.666%;">
      <div class="innerWrapper"><button>clickme</button></div>
  </div>

</div>

<div id="centerAlignTestArea">
   <div class="buttonWrapper"><div class="innerWrapper"><button>clickme</button></div></div>
</div>

<div id="autoScaleTestArea">
    <div class="buttonWrapper"><button>clickme</button></div>
</div>

CSS

*{
  position : absolute;
}

div#buttonBar{
  width: 500px;
  height: 35px;
  background: #900;
}

div#buttonBar div.buttonWrapper{
  width: 33.333%;
  height: 35px;
}

button{
  display: block;
  width: 100%;
  height: 100%;
  border: 6px solid #333;
  background: #eee;
}

div.innerWrapper{
    bottom:0;
    top:0;
    left:0;
    right:0;
    border-right: 5px solid transparent;
}

div#buttonBar div.buttonWrapper:last-child div.innerWrapper{
    border-right: 0px solid transparent;
}

div#centerAlignTestArea{
  width: 500px;
  height: 200px;
  background: #400;
  top: 50px;
}

div#centerAlignTestArea div.buttonWrapper{
  width: 100px;
  height: 35px;
  left: 50%;
  right: 50%;
  top: 50%;
  bottom: 50%;
}


div#centerAlignTestArea div.innerWrapper{
  width: 100%;
  height: 100%;
  left: -50px;
  top: -17.5px;
}


div#autoScaleTestArea{
    width: 500px;
    height: 100px;
    background: #900;
    top: 275px;
}

div#autoScaleTestArea div.buttonWrapper{
  top: 0; height: 35px; left: 0; right: 0;
}

JavaScript

$('#buttonBar button').click(function() {
    var width = $("#buttonBar").width();
    width = (width == 500) ? 300 : 500;
  $('#buttonBar').animate({
    width: width
  }, 350);
});

$('#centerAlignTestArea button').click(function() {
    var width  = $("#centerAlignTestArea").width(),
        height = $("#centerAlignTestArea").height();
    width = (width == 500) ? 300 : 500;
    height = (height == 200) ? 100 : 200;
  $('#centerAlignTestArea').animate({
      width: width,
      height: height
  }, 350);
});


$('#autoScaleTestArea button').click(function() {
    var width  = $("#autoScaleTestArea ").width(),
        height = $("#autoScaleTestArea ").height();
    width = (width == 500) ? 300 : 500;
    height = (height == 100) ? 50 : 100;
  $('#autoScaleTestArea ').animate({
      width: width,
      height: height
  }, 350);
});