Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by mikes02
mikes02
Courses Plus Student 16,968 Points

Equal Height Columns with JavaScript

Trying a code challenge online for creating equal height columns with JavaScript and I have hit a mental block, not sure if I am on the right track, hoping to have some discussion to see if I am heading in the right direction.

The challenge was: Build a javascript function that takes a class name, finds all divs that contain that class name, and sets their height to equal the height of the tallest div.

<h1>Build a javascript function that takes a class name, finds all divs that contain that class name, and sets their height to equal the height of the tallest div</h1>

<h2>Before</h2>

<div class="group">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

<h2>After</h2>

<div class="group">
  <div class="a equal"></div>
  <div class="b equal"></div>
  <div class="c equal"></div>
</div>

.group:after {
  content: "";
  display: table;
  clear: both;
}

.a, .b, .c {
  background-color: red;
  float: left;
  margin-left: 20px;
  width: 100px;
}
.a {
  height: 200px
}
.b {
  height: 300px;
}
.c {
  height: 150px;
}

function equalHeights(className) {
    var findClass = document.getElementsByClassName(className);

  // Loop over matching divs
  for(i = 0; i < findClass.length; i++)
  {
    var ele = findClass[i];
    var eleHeight = ele.offsetHeight;
  }
}

3 Answers

Matthew Greenberg
Matthew Greenberg
8,173 Points

Here is a vanilla javascript way

function equalHeights(className) {
    var findClass = document.getElementsByClassName(className);
    var tallest = 0; 
  // Loop over matching divs
  for(i = 0; i < findClass.length; i++)
  {
    var ele = findClass[i];
    var eleHeight = ele.offsetHeight;
    tallest = (eleHeight>tallest ? eleHeight : tallest); /* look up ternary operator if you dont know what this is */
  }
  for(i = 0; i < findClass.length; i++)
  {
    findClass[i].style.height = tallest + "px";
  }
}

We set a placeholder variable(tallest) then loop through each div with the matched class name. If the div has a larger height then the placeholder height, overwrite it with the new height.

Once we have looped through and stored the tallest value, we could then use the variable to set the height in another for loop.

Hope this helps.

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

There is no iteration over all divs to find a max height - instead, this code is trying to find the max height among divs with the passed in class name. It's like saying find the max height of all divs with a class name of 'a', instead of find the max height among divs with classes 'a', 'b', and 'c'.

While your answer has already been selected, here is vanilla JavaScript that corrects this - (unless I really misunderstood the question).

function equalHeights(className) {
    var div = document.getElementsByTagName("div");
    var tallest = 0;
    // Loop over matching divs
    for(i = 0; i < div.length; i++)
    {
        var ele = div[i];
        var eleHeight = ele.offsetHeight;
        tallest = (eleHeight>tallest ? eleHeight : tallest); /* look up ternary operator if you dont know what this is */
    }
    var findClass = document.getElementsByClassName(className);
    for(i = 1; i < findClass.length; i++)
    {
        findClass[i].style.height = tallest + "px";
    }
}
mikes02
mikes02
Courses Plus Student 16,968 Points

Robert, based on the challenge I believe it was to create a function that took in a passed in class name with the assumption that the divs would share that class name, i.e. "equal"

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Requires jQuery

function equalHeights(className) {
    var $div = $("div:not(.group)");
    var heights = [];
    $.each($div, function(index, value) {
        heights.push(value.offsetHeight);
    });
    var maxHeight = Math.max.apply(null, heights);
    $("."+className+".equal").height(maxHeight);
}
mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

Matthew,

Thank you, that does seem to work, although I am a bit confused as to why the for loop has to be repeated twice. When I try eliminating the second for loop and moving what's in it into the first for loop it stops working, but when I keep both for loops as is it works as expected. Why is that?

Matthew Greenberg
Matthew Greenberg
8,173 Points
  1. The first loop is getting the maximum value by checking each element's height and storing the largest height into a variable i called "tallest" 2 The second loop is taking the "tallest" variable value and applying it to each of the elements that match our class name.

You can not merge them because you need to test all the values first to get the maximum height. Once you have the tallest height you loop thought and set the maximum height.