DEBUG: testing stepchild expand measurements

Does the parent height include the scrollHeight of children? Not until after they are NOT hidden.

by Nate Armstrong

HTML

<button onclick="removeClass('.child','hidden')">Grow Child</button>
<button onclick="addClass('.child','hidden')">Shrink Child</button>
<button onclick="getTotalScrollHeightOfAllChildren('#parent')">Get Height of Children</button>
<div></div>

<div id="parent">
  <div id="top">
    <div class="child firstchild hidden">
      first child
    </div>
  </div>
  <div id=bottom>
    <div class="child stepchild hidden">child</div>
    <div class="child stepchild hidden">child</div>
    <div class="child stepchild hidden">child</div>
    <div class="child stepchild hidden">child</div>
    <div class="child stepchild hidden">child</div>
  </div>
</div>

CSS

div{ padding: 3px; margin:3px; transition: 2s; }
#parent{ background-color: yellow; border: 3px solid yellow; }
.firstchild{ background-color: lightgrey; }
#top{ background-color: blue; }
#bottom{ background-color: green; }
.stepchild{ background-color: grey; }
.hidden{ height: 0px; } /* dmf-program-hide */
.child, .parent{ overflow: hidden; }

JavaScript

const children = document.querySelectorAll('.child');
const stepchild = document.querySelectorAll('.child');

function removeClass(query, remove){
	elements = document.querySelectorAll(query);
  elements.forEach(function(e) {
		e.classList.remove(remove);
  });
}

function addClass(query, add){
	elements = document.querySelectorAll(query);
  elements.forEach(function(e) {
		e.classList.add(add);
  });
}

function getTotalScrollHeight(query){
	let elements = document.querySelectorAll(query);
  let height = 0;
  elements.forEach(function(e){
    height = height + e.scrollHeight;
  });
  return query + ".scrollHeight:" + height;
}

document.addEventListener('click', function (event) {
	console.log(getTotalScrollHeight('.stepchild'))
  console.log(getTotalScrollHeight('#parent'))
  console.log(seek_get_HeightofGrandKids('#parent','stepchild'));
});

function getTotalScrollHeightOfAllChildren(singleParent){
	let children = document.querySelector(singleParent).childNodes;
  children.forEach(function(e){
	  console.log(e);
  });
}

function seek_get_HeightofGrandKids(parentQuery,grandKidsClass){
	let children = document.querySelector(parentQuery).childNodes;
  let height = 0;
  children.forEach(function(e){
	  let grandKids = e.childNodes;
    grandKids.forEach(function(grandKid){
    //because I only want elemens and not #text crap
			if(grandKid.nodeType === 1){
      	if(grandKid.classList.contains(grandKidsClass)){
					height = height + grandKid.scrollHeight;
        }
      }
    });
  });
  return parentQuery + "'s grand kids known by class: " + grandKidsClass + " have height: "+ height;
}