silverstripe-cms/javascript/jquery-fitheighttoparent/jquery.fitheighttoparent.js

53 lines
1.8 KiB
JavaScript
Raw Normal View History

/**
* Fits an element's height to its parent by substracting
* all (visible) siblings heights from the element.
* Caution: This will set overflow: hidden on the parent
*
* Copyright 2009 Ingo Schommer, SilverStripe Ltd.
* Licensed under MIT License: http://www.opensource.org/licenses/mit-license.php
*
* @todo Implement selectors to ignore certain elements
*
* @author Ingo Schommer, SilverStripe Ltd.
* @version 0.1
*/
jQuery.fn.extend({
fitHeightToParent: function() {
return jQuery(this).each(function() {
var $this = jQuery(this);
var boxmodel = ['marginTop','marginBottom','paddingTop','paddingBottom','borderBottomWidth','borderTopWidth'];
// don't bother if element or parent arent visible,
// we won't get height readings
if($this.is(':visible') && $this.parent().is(':visible')) {
// we set overflow = hidden so that large children don't muck things up in IE6 box model
$this.parent().css('overflow', 'hidden');
// get height from parent without any margins as a starting point,
// and reduce any top/bottom paddings
var height = $this.parent().innerHeight()
- parseFloat($this.parent().css('paddingTop'))
- parseFloat($this.parent().css('paddingBottom'));
// substract height of any siblings of the current element
// including their margins/paddings/borders
$this.siblings(':visible').filter(function() {
// remove all absolutely positioned elements
return (jQuery(this).css('position') != 'absolute');
}).each(function() {
height -= jQuery(this).outerHeight(true);
});
// remove margins/paddings/borders on inner element
jQuery.each(boxmodel, function(i, name) {
height -= parseFloat($this.css(name)) || 0;
});
// set new height
$this.height(height);
}
});
}
});