Equal Height Elements

How To

banno-functions.js

This piece can go pretty much anywhere as long as it’s not in the middle of anything else.

BS5

equalHeight: function(container) {
  var currentTallest = 0,
      currentRowStart = 0,
      rowDivs = [],
      topPosition = 0;
  document.querySelectorAll(container).forEach(function(el) {
    el.style.height = 'auto';
    topPosition = el.getBoundingClientRect().top;

    if (currentRowStart != topPosition) {
      rowDivs.forEach(function(div) {
        div.style.height = currentTallest + 'px';
      })
      rowDivs = [];
      currentRowStart = topPosition;
      currentTallest = el.clientHeight;
      rowDivs.push(el);
    } else {
      rowDivs.push(el);
      currentTallest = (currentTallest < el.clientHeight) ? el.clientHeight : currentTallest;
    }

    rowDivs.forEach(function(div) {
      div.style.height = currentTallest + 'px';
    })
  });
}

BS4

//function to allow items to be equal height
banno.site.equalheight = function(container){
  var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
  $(container).each(function() {
   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;
   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

script.js

This piece needs to go inside the “else” function so that it runs outside the CMS, and make sure to also place it in the resize function since items can change in height when the window size changes.

Make sure to replace the element being targeted with the one(s) you want–you can do multiple comma-separated elements if needed.

BS5

banno.methods.equalHeight('.slider-news .slide .slide-inner .multicolor-inner-text .content');

BS4

banno.site.equalheight('.slider-news .slide .slide-inner .multicolor-inner-text .content');

Equal Height Elements using Bootstrap

This can also be done using a few different ways using Bootstrap utility classes: https://codepen.io/rhgoddard/pen/poYGxgd

Tags: script, bs2, bs3, bs4, bs5, js, javascript, jquery