Equal Height Columns using Javascript

Question

I'm trying to do some sort of tryptic where the first item in a list takes a bit more prominence over the second and third.

I've got it to the point where I'm adding the height of second and third and applying said height to the first item. But in trying to fool-proof the design, I need it to play nice in reverse.

For example, if the height of the first item is of greater value than the second+third item combined then apply the difference somewhere (second or third)...sorry if this all seems confusing.

Here is the code: http://codepen.io/randydaniel/pen/uKkfb

var equalHeights = function(cols) {

$(cols).each(function() {
  var colTwo = parseInt($('#blog-listing li:nth-child(2)').css('height').replace("px", "")),
    colThree = parseInt($('#blog-listing li:nth-child(3)').css('height').replace("px", ""));

    var extra = colTwo + colThree;
    $(cols).css('height',extra);
  });
};

$(document).ready(function() {
  equalHeights($("#blog-listing li:first-child"));
});

Disclaimer: I'm not too knowledgeable with javascript as I am re-purposing some code from a prior example and flexbox (if possible) isn't an option at the moment.

You don't need the replace, parseInt will find the number in the string either way. — SeinopSys
– SeinopSys, Commented Jan 15, 2014 at 21:30
What kind of browser support are you aiming for? If you can use Flexbox, this is super easy. — Diode Dan
– Diode Dan, Commented Jan 15, 2014 at 21:32

BenDavidJamin · Accepted Answer · 2014-01-15 21:44:08Z

2

Since you're already using jquery you could do this

    var equalHeights = function(cols) {

    $(cols).each(function() {
      var colTwo = $('#blog-listing li:nth-child(2)').height();
      var colThree = $('#blog-listing li:nth-child(3)').height();
      var colOne = $('#blog-listing li:nth-child(1)').height();

      var extra = colTwo + colThree;
      if(extra > colOne){
        $(cols).height(extra);
      }else{
        // split the difference between nodes height
        var split = (colOne - extra)/2;
        $('#blog-listing li:nth-child(2)').height(colTwo+split)
        $('#blog-listing li:nth-child(3)').height(colThree+split)
      }
  });
  };

  $(document).ready(function() {
    equalHeights($("#blog-listing li:first-child"));
  });

edited Jan 15, 2014 at 21:44

answered Jan 15, 2014 at 21:37

BenDavidJamin

1691 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Randy Daniel Over a year ago

Thanks BenjaminDavid! This seems to work flawlessly. Much appreciated!

BenDavidJamin Over a year ago

Glad to help. Jquery height() method should help with cross browser differences as well.

Collectives™ on Stack Overflow

Equal Height Columns using Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related