kaioe
10/4/2017 - 4:43 AM

javascript:set_same_height_by_class

Function that set the same height for all siblings individually for each container in a page.

function set_same_height_by_class(element_Class){

      // get all tiles on the page
      var tile = document.getElementsByClassName(element_Class),
          parent = []; // list of containers

      // If exists tiles
      if (tile.length > 0) {

        // Goes through all tiles to find the containers/parent
        for (var k = tile.length - 1; k >= 0; k--) {

          // If it is the parent isn't on the list, append to the list
          if (parent.indexOf(tile[k].parentNode) < 0) {
            parent.push(tile[k].parentNode);
          }

        }

        // Goes through all parents
        for (var i = parent.length - 1; i >= 0; i--) {
          // get all tiles on each parent
          var children = parent[i].getElementsByClassName(element_Class),
              max_height = "";

          // If there are more than one tile
          if (children.length > 1) {

            // Goes through all tiles to find the Max Height
            for (var j = children.length - 1; j >= 0; j--) {

              // Get the children details
              var children_details = children[j].getBoundingClientRect();

              if ((j === children.length - 1) || (max_height < children_details.height)) {
                max_height = children_details.height;
              }

            }

            // Goes through all tiles to define the Min Height
            for (var m = children.length - 1; m >= 0; m--) {

              children[m].style.minHeight = max_height+'px';

            }
          }
        }

      }

      return true;

}