How to create same height HTML block using jQuery?


Hi Friends,

If you are facing HTML block height related responsive issue then you can use given below HTML to make all boxes in a same height

CSS

<style type="text/stylesheet">
div.box {
float: left;
width: 23%;
background: #ccc;
margin: 10px 1%;
padding: 1%;
}

@media all and (max-width: 900px) {
div.box {
width: 48%
}
</style>

JS

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

$(document).ready(function() {
// here #mainsec is the main parent div and box it's child div
equalheight('#mainsec .box');
});

$(window).on('resize',function(){
// here #mainsec is the main parent div and box it's child div
equalheight('#mainsec .box');
});

HTML

You can also watch my video for live demo and share with your friends.

Enjoy Code!!

Advertisements

Sr. Software Engineer

Tagged with: , , ,
Posted in HTML, JQuery, Wordpress

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: