GrowShrinkNestedDivs-3Level-v6

by furnas

HTML

<div class='controls'>
  <button type='button' onclick='shrink(true)'>shrink reds in nsec </button>
  <br>
  <button type='button' onclick='shrink(false)'>unshrink reds in nsec </button>
  <br>
  <select id='selAll'>
    <option value="0">nsec: 0</option>
    <option value="1">nsec: 1</option>
    <option value="2">nsec: 2</option>
    <option value="3">nsec: 3</option>
  </select>
  <br>
  <br>
  <button type='button' onclick='shrinkWTimings(true)'>shrink w separate timings </button>
  <br>
  <button type='button' onclick='shrinkWTimings(false)'>
  unshrink w separate timings </button>
  <br>
  <select id='selEach'>
    <option value="0 0 0">timings: gp0 rw0 sq0</option>
    <option value="1 1 1">timings: gp1 rw1 sq1</option>
    <option value="1 2 3">timings: gp1 rw2 sq3</option>
    <option value="3 2 1">timings: gp3 rw2 sq1</option>
  </select>
</div>
<div class='collection'>
  <div class='group'>
    <div class='row '>
      <div class='sq'></div>
      <div class='sq shrinkMe'></div>
    </div>
    <div class='row shrinkMe'>
      <div class='sq lg shrinkMe'></div>
      <div class='sq shrinkMe'></div>
      <div class='sq lg shrinkMe'></div>
    </div>
  </div>
  <div class='group shrinkMe' id='group2'>
    <div class='row shrinkMe' id='group2container2'>
      <div class='sq shrinkMe'></div>
      <div class='sq shrinkMe'></div>
    </div>
    <div class='row shrinkMe'>
      <div class='sq shrinkMe'></div>
      <div class='sq lg shrinkMe'></div>
      <div class='sq shrinkMe'></div>
    </div>
  </div>
</div>

CSS

.controls {
  display: inline-block;
  vertical-align: top;
}

.collection {
  display: inline;
  text-align: center;
  border: 2px solid black;
  padding: 3px;
  display: inline-block;
}

.group {
  display: block;
  margin: 2px;
  border: 2px solid black;
  padding: 3px;
}

.row {
  display: block;
  vertical-align: middle;
  background: #0cc;
  margin: 1px;
  border: 2px solid black;
}

.sq {
  display: inline-block;
  background: white;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 2px solid black;
}
.lg{
  width: 25px;
  height: 25px;
}
.shrinkMe {
  border-color: red;
}

.shrunk {
  height: 0px;
  width: 0px;
  border-width: 0px;
  padding: 0px;
  margin: 0px;
}

JavaScript

// want: 
//    nested centered divs
//    containers vertically scaled to fit contents
//    smooth nested shrink/expand animation at every level
shrink = function(bool) {
  var e = document.getElementById('selAll');
  var t = e.options[e.selectedIndex].value;
  $('.shrinkMe').css("transition", anim(t));
  if (bool) $('.shrinkMe').addClass('shrunk')
  else $('.shrinkMe').removeClass('shrunk');
}
shrinkWTimings = function(bool) {
  var e = document.getElementById('selEach');
  var v = e.options[e.selectedIndex].value;
  var times = v.split(' ');
  $('.shrinkMe.group').css("transition", anim(times[0]));
  $('.shrinkMe.row').css("transition", anim(times[1]));
  $('.shrinkMe.sq').css("transition", anim(times[2]));
  if (bool) $('.shrinkMe').addClass('shrunk')
  else $('.shrinkMe').removeClass('shrunk');
}
anim = function(secs) {
  return 'all ' + secs + 's'
}