Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery Equal Height Rows

I am looking to create equal heights and rows with divs using JQuery. I'm stuck!

Any ideas on how to make the First row equal to the Second row? I found an example of what I want here when you unclick "By row" all the rows become equal. Just not sure how.

jQuery(document).ready(function($) {

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


$(window).load(function() {
  equalheight('.main article');
});

$(window).resize(function(){
  equalheight(' article');
});
	});
.landingpage .main article {
  float: left;
  width: 29.33%;
  background: #ccc;
  margin: 10px 1%;
  padding: 1%;
}

@media all and (max-width: 800px) {
.landingpage .main article {
    width: 100%
  }
<div class="landingpage">
<section class="main">
  <article>CPR & AED Classes <BR>1 </article>
  <article>CPR & First Aid Classes</article>
  <article>BLS Classes<BR>1</article>
  <article>EMSA Pediatric Classes</article>
  
    <article>Instructor Training  </article>
  <article>Water Safety<BR>1<BR>1</article>
  
</section>

</div>
like image 808
Alexis Avatar asked Apr 25 '26 06:04

Alexis


1 Answers

try this

$(document).ready(function(){
    maxheight=0;
    $('.main article').each(function(){
        maxheight = $(this).height() > maxheight ? $(this).height() : maxheight;
    })
    $('.main article').height(maxheight);
});

this will make all row height same the largest height of the row

working example

like image 194
Roy Sonasish Avatar answered Apr 26 '26 19:04

Roy Sonasish



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!