Skip to content

Instantly share code, notes, and snippets.

@Gix075
Last active December 20, 2015 01:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Gix075/1e21c4f124df635ee0d1 to your computer and use it in GitHub Desktop.
Save Gix075/1e21c4f124df635ee0d1 to your computer and use it in GitHub Desktop.
Get the most highest element height and assigns it to the other elements
/* Version 1.1.0 */
/* ============================== */
function sameHeight(element,assign) {
element = (element === undefined || element === "") ? ".HEqualizer" : element;
assign = (element === false || element === true) ? element : assign;
assign = (assign === undefined || assign === "") ? true : assign;
var maxHeight = 0,
elementHeight = 0;
$(element).each(function(){
elementHeight = $(this).height();
if (elementHeight > maxHeight) { maxHeight = elementHeight }
});
if (assign === true) {
$(element).height(maxHeight);
}else{
return maxHeight;
}
}
/* Version 1.0.0
function sameHeight(element,assign) {
var maxHeight = 0,
elementHeight = 0;
$(element).each(function(){
elementHeight = $(this).height();
if (elementHeight > maxHeight) { maxHeight = elementHeight }
});
if (assign === true) {
$(element).height(maxHeight);
}else{
return maxHeight;
}
}
*/
body {
width: 90%;
margin: 0 auto;
font-family: sans-serif;
}
.exampleWrapper:before,
.exampleWrapper:after {
content:"";
display: table;
clear: both;
}
.exampleItem {
float: left;
width: 33.3333%;
}
.exampleItem p {
padding: 10px;
border: 1px solid #ccc;
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery Same Height</title>
<link rel="stylesheet" href="usageExample.css">
</head>
<body>
<div class="exampleWrapper">
<div class="exampleItem">
<p>Lorem ipsum dolor si amet, lorem ipsum dolor si amet, lorem ipsum dolor si amet, lorem ipsum dolor si amet, lorem ipsum dolor si amet.</p>
</div>
<div class="exampleItem">
<p>Lorem ipsum dolor si amet</p>
</div>
<div class="exampleItem">
<p>Lorem ipsum dolor si amet, lorem ipsum dolor si amet, lorem ipsum dolor si amet.</p>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="sameHeight.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment