Last active
September 15, 2016 00:45
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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