I came up with this yesterday while debugging a miscalculated height in Next's preview_iframe.tpl. I think it greatly simplifies the iframe height calculation, and I'm almost sure it does not have any side effects. I would not backport this to older themes, but use it in new ones. Still interested in thoughts and inputs, though.
So here's how we usually calculate the height for the iframe which displays the backend preview in inline JS:
Code: Select all
parent.document.getElementById('serendipity_iframe').style.height = document.getElementById('main').offsetHeight
+ parseInt(document.getElementById('main').style.marginTop)
+ parseInt(document.getElementById('main').style.marginBottom)
+ 'px';
which translates to “get the height of the element with the id main including vertical padding + its top margin + its bottom margin + in pixels”. A lot of themes use markup similar to this in the body to make this more or less easy to calculate:
Code: Select all
<body style="padding: 0; margin: 0;">
<div id="main" style="padding: 0; margin: 5px auto; width: 98%;">
[…]
</div>
<body>
which of course is kind of nuts because it may completely distort the way that #main is supposed to be displayed, just in order to get the preview right.
So here's the easier JS for that:
Code: Select all
parent.document.getElementById('serendipity_iframe').style.height = document.getElementById('preview_iframe').offsetHeight + 'px';
which requires us to – only in the preview_iframe.tpl! – use this
Code: Select all
<html id="preview" lang="{$lang}">
That way, our piece of JS will only have to calculate the height of the <html> element (yes, it is valid to assign an id to that element; no, it is not “dirty”). <html>
usually does not have any margins, in many cases it won't have padding either. And here's the great thing (for those of use who hate inline styles with a passion):
Code: Select all
<body>
<div id="main">
[…]
</div>
<body>
That is basically what Next uses now, and it works like a charm with a lot less code and a lot less to think about. The only potential issue I see is if a theme's <html> already has an id for whatever reason, and that just means we'd have to use that id in the calculation JS.
Does anyone see any possible side effects? Because I don't.
YL