Thursday, April 24, 2014

Wrote a simple 3-equal-column responsive layout. codepen.io/TroyThib/pen/GpfKt

I was working on a much larger project for work that had multiple modules with varying amounts of content. The modules just didn't look very good with their uneven heights, so I wrote a small jQuery script to loop through the DIVs and get the height of the tallest DIV, then make all the DIVs that height. It worked pretty good, and then added a call to the function on resize

The boxes also needed to stack for mobile, which just required changing the float to "none" in the media query. 

  $(document).ready(function() {
    function set_height()
      {
  $('.col').height('inherit'); // reset the height
  var max_h = 0; // variable to hold the max height
  $('.col').each(function(i, obj) { // loop through column DIVs
var h = $(obj).height(); // get the height of the col
    if(h >= max_h) 
{max_h = h;}  
    });
  $('.col').height(max_h);
}
    set_height();
$(window).resize(function(){
 set_height();
});
  });

No comments:

Post a Comment