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;
}