CODEWITHSUNDEEP
jquery
cherryaustin
cherryaustin

Reputation: 452

jquery - find bottom position of tallest column

Apologies for what I know should be a simple question! I've got complete brain-freeze and my search results are confusing me even more.

I'm trying to get the bottom edge of three columns, and want to calculate which is the lowest (furthest from the top). Why aren't I getting the correct values - and how do I put them into something that will return the required 'bottom'?

All advice welcome.

function colBottoms( bottom ) {
		bottom = 0;
		$( '.column' ).each( function() {
		  var lastP = $( this ).find( 'p' ).last();
    $( lastP ).css( 'color', 'green' );
			var off = $( lastP ).offset();
			var top = off.top;
    $( lastP ).append( top );
			var height = $(  lastP ).height();
    $( lastP ).append( " My 'height' is " + height );
			bottom = top + height;
		console.log( $(  this ).attr( 'id' ) + ' ends at ' + bottom + 'px' );
		});
	}
	colBottoms();
#first, #second, #third {
  width: 25%;
  display: block;
  float: left;
  padding: 10px;
}
#first {
  background: yellow;
}
#first p {
  padding: 15px 10px;
}
#second {
  background: lightblue;
}
#second p {
  padding: 0 10px;
}
#third {
  background: pink;
}
#third p {
  line-height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="first" class="column">
  <p>Some content here</p>
  <p>My 'top' is </p>
</div>

<div id="second" class="column">
  <p>Some more content here</p>
  <p>My 'top' is </p>
</div>

<div id="third" class="column">
  <p>My 'top' is </p>
</div>

Upvotes: 0

Views: 33

Answers (1)

Rafik Tighilt
Rafik Tighilt

Reputation: 2101

Here is a solution where you just create a variable with 0 as a value, then you loop through your .column, and you replace the value if the outerHeight of the colum + its top offset is greater than the variable (that means it will be replaced if a column is longer than the previous ones.

The use of the outerHeight here is because you want the full height including paddings.

var farFromTop = 0
$('.column').each(function() {
var bottomEnds = $(this).offset().top + $(this).outerHeight()
console.log($(this).attr('id') + " is at : " + bottomEnds)
  if(bottomEnds > farFromTop){
  	farFromTop = bottomEnds
  }
})

console.log("longest column ends at " + farFromTop);
#first, #second, #third {
  width: 25%;
  display: block;
  float: left;
  padding: 10px;
}
#first {
  background: yellow;
}
#first p {
  padding: 15px 10px;
}
#second {
  background: lightblue;
}
#second p {
  padding: 0 10px;
}
#third {
  background: pink;
}
#third p {
  line-height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first" class="column">
  <p>Some content here</p>
  <p>My 'top' is </p>
</div>

<div id="second" class="column">
  <p>Some more content here</p>
  <p>My 'top' is </p>
</div>

<div id="third" class="column">
  <p>My 'top' is </p>
</div>

Upvotes: 1

Related Questions