Skip to content

Instantly share code, notes, and snippets.

@uzielweb
Last active September 15, 2016 00:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save uzielweb/c32bc28c5ad6d416d63e14bbed2f09eb to your computer and use it in GitHub Desktop.
Save uzielweb/c32bc28c5ad6d416d63e14bbed2f09eb to your computer and use it in GitHub Desktop.
This is a Script to autoresize grouped child DIVS in each parent divs to set the same heights
<script type="text/javascript">
jQuery(document).ready(function($){
/* Thanks to CSS Tricks for pointing out this bit of jQuery
http://css-tricks.com/equal-height-blocks-in-rows/
It's been modified into a function called at page load and then each time the page is resized. One large modification was to remove the set height before each new calculation. */
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);
}
});
}
// set function on load page
$(window).load(function() {
// set each parent div
$('.newsitem_text,.categories-list,.row.vdivide,.row.vdividers').each(function(){
// set eachh child div to be resized to same size
equalheight('.col-lg-4.top-module,.col-md-4,.col-lg-4,.item,.top-module-x,.col-sm-4');
});
});
// set function on resize page
$(window).resize(function(){
// set each parent div
$('.newsitem_text,.categories-list,.row.vdivide,.row.vdividers').each(function(){
// set each child div to be resized to same size
equalheight('.col-lg-4.top-module,.col-md-4,.col-lg-4,.item,.top-module-x,.col-sm-4');
});
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment