Page 1 of 1
JS in preview_iframe.tpl
Posted: Sun Oct 25, 2009 1:28 pm
by yellowled
preview_iframe.tpl is the file responsible for rendering an entries' preview in the backend. It uses this Javascript code
Code: Select all
parent.document.getElementById('serendipity_iframe').style.height = document.getElementById('mainpane').offsetHeight + parseInt(document.getElementById('mainpane').style.marginTop) + parseInt(document.getElementById('mainpane').style.marginBottom) + 'px';
to determine the height of the iframe it is displayed in by (as far as I can tell) adding the height of a container element, which has to have an id, to it's top and bottom margin.
The usual code (i.e. the one in /templates/default/preview_iframe.tpl) assigned to this is
Code: Select all
<body style="padding: 0px; margin: 0px;">
<div id="mainpane" style="padding: 0px; margin: 5px auto 5px auto; width: 98%;">
<div id="content" style="padding: 5px; margin: 0px;">
{$preview}
</div>
</div>
</body>
If I change this -- according to my new blog template -- to
Code: Select all
<body>
<div id="content">
{$preview}
</div>
</body>
and change the JS accordingly (i.e. to use content instead of mainpane which doesn't exist here), it doesn't work correctly. The iframe's height is too low and doesn't have a scroll bar. Why is that?
YL
Re: JS in preview_iframe.tpl
Posted: Sun Oct 25, 2009 2:40 pm
by garvinhicking
Hi!
Is your content floating? Then it has no height.
Regards,
Garvin
Re: JS in preview_iframe.tpl
Posted: Sun Oct 25, 2009 3:08 pm
by sonichouse
To get around the zero height I do this
Code: Select all
<script type="text/javascript">
window.onload = function() {ldelim}
parent.document.getElementById('serendipity_iframe').style.width = '640px';
parent.document.getElementById('serendipity_iframe').style.height = Math.max(document.getElementById('posttotal').offsetHeight + parseInt(document.getElementById('posttotal').style.marginTop) + parseInt(document.getElementById('posttotal').style.marginBottom), 400) + 'px';
parent.document.getElementById('serendipity_iframe').scrolling = 'vertical';
parent.document.getElementById('serendipity_iframe').style.border = 0;
{rdelim}
</script>
YMMV - but it kind of works for me.
Re: JS in preview_iframe.tpl
Posted: Sun Oct 25, 2009 3:35 pm
by yellowled
garvinhicking wrote:Is your content floating? Then it has no height.
Nope. It does contain floated elements, but that shouldn't be a problem, right?
YL
Re: JS in preview_iframe.tpl
Posted: Sun Oct 25, 2009 4:18 pm
by garvinhicking
Hi!
When elements inside a containre float, the container will be the size of the smallest non-floating element. If you have no non-floating element, this means zero size.
You can easily see this if you assign a 1px border to your #content.
HTH,
Garvin
Re: JS in preview_iframe.tpl
Posted: Sun Oct 25, 2009 5:20 pm
by yellowled
garvinhicking wrote:When elements inside a containre float, the container will be the size of the smallest non-floating element. If you have no non-floating element, this means zero size.
I most definitely have non-floating elements in that container
Also, I think this is only true unless you contain the floats, i.e. make the container expand to contain all floated elements. I think I used the easyclearing method, so maybe that's something to consider here. I'll have to do some testing. Thanks for (hopefully) pointing me in the right direction
YL
Re: JS in preview_iframe.tpl
Posted: Sun Oct 25, 2009 5:48 pm
by yellowled
Okay, first of all, I did use the easy clearing method here, but it doesn't make any difference to not use it here according to my tests.
Second, if I set a border around #content, it clearly shows that #content contains the full entry. I do get scrollbars if I use the non-existent #mainpane to calculate the height, and in that case, the border is round the whole #content container. Only the height of the iframe isn't set to that height.
Hmpf. More testing.
YL
Re: JS in preview_iframe.tpl
Posted: Sun Oct 25, 2009 7:26 pm
by garvinhicking
Hi!
Change the JS to alert() the value of .style.height and see if the value is proper. Also check if you mget JS errors?
Regards,
Garvin
Re: JS in preview_iframe.tpl
Posted: Sun Oct 25, 2009 8:23 pm
by onli
Is a height of #content specified? Maybe height: 100% would help (ran into this too, not sure how I solved it, think it was something like that).
Re: JS in preview_iframe.tpl
Posted: Sun Oct 25, 2009 8:59 pm
by yellowled
garvinhicking wrote:Change the JS to alert() the value of .style.height and see if the value is proper.
I'm one of these people who don't actually know JS although they use jQuery
Code: Select all
alert(document.getElementById('content').offsetHeight);
gives me "496" which Firebug confirms for that particular entry.
garvinhicking wrote:Also check if you mget JS errors?
I should see those in the firebug console tab, right? Only one thing which is related to a lightbox replacement included in the template. As far as I remember, I got the height error before I added this, but I can test it without that.
YL
Re: JS in preview_iframe.tpl
Posted: Sun Oct 25, 2009 9:06 pm
by yellowled
onli wrote:Is a height of #content specified? Maybe height: 100% would help
No, it isn't, and no, it doesn't
height, especially a 100% height, is a difficult concept in CSS which also can cause problems, especially because height is always related to containing elements, float, and stuff.
YL
Re: JS in preview_iframe.tpl
Posted: Sun Oct 25, 2009 9:09 pm
by yellowled
Whoa.
I just now -- more or less out of curiosity -- changed the JS to:
Code: Select all
parent.document.getElementById('serendipity_iframe').style.height = document.getElementById('content').offsetHeight + 'px';
... and believe it or not, this actually works! (Although I have no idea why
)
YL