Show form source
<div id="topBox" style="width: 600px; height: 200px; display: none; background: red;">
<div id="middleBox" style="width: 80%; padding-top: 5em; margin: auto; height: 5em; background: green;">
<div id="innerDiv" style="margin-left: 10px; margin-right: 3ex; background: blue;">
#innerDiv without "display:none" but hidden cause "#topBox" has display:none set;
</div>
</div>
</div>
Show script source
Element.addMethods({
getDimensionsRe: function (element) { //remove 'Re' to replace original getDimensions and use only this function
element = $(element);
var dimensions = {width: element.clientWidth, height: element.clientHeight};
if ((dimensions.width || dimensions.height) == 0) {
// All *Width and *Height properties give 0 on elements with display none,
// or when ancestors have display none, so enable those temporarily
var restore = element.ancestors(function(element) { return !element.visible() }),
styles = [];
restore.push(element);
restore.each(function(r) {
styles.push({
display: r.getStyle('display'),
position: r.getStyle('position'),
visibility: r.getStyle('visibility')
});
r.setStyle({display: 'block', position: 'absolute', visibility: 'visible'});
});
dimensions = {width: element.clientWidth, height: element.clientHeight};
restore.each(function(r, index) {
r.setStyle(styles[index]);
});
}
return dimensions;
}//getDimensions
});