mirror of
https://github.com/silverstripe/silverstripe-cms
synced 2024-10-22 08:05:56 +02:00
53 lines
1.8 KiB
JavaScript
53 lines
1.8 KiB
JavaScript
|
/**
|
||
|
|
* 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);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|