Serendipity Forums

by **yellowled** » Sun Oct 25, 2009 2:28 pm

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

by **garvinhicking** » Sun Oct 25, 2009 3:40 pm

Hi!

Is your content floating? Then it has no height.

Regards,
Garvin

by **sonichouse** » Sun Oct 25, 2009 4:08 pm

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.

by **yellowled** » Sun Oct 25, 2009 4:35 pm

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

by **garvinhicking** » Sun Oct 25, 2009 5:18 pm

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

by **yellowled** » Sun Oct 25, 2009 6:20 pm

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

by **yellowled** » Sun Oct 25, 2009 6:48 pm

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

by **garvinhicking** » Sun Oct 25, 2009 8:26 pm

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

by **onli** » Sun Oct 25, 2009 9:23 pm

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).

by **yellowled** » Sun Oct 25, 2009 9:59 pm

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 :wink:

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

by **yellowled** » Sun Oct 25, 2009 10:06 pm

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

by **yellowled** » Sun Oct 25, 2009 10:09 pm

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

Serendipity Forums

User and developer community

The Serendipity Handbook

Forum-Information

Board index ‹ Themes ‹ JS in preview_iframe.tpl

JS in preview_iframe.tpl

Re: JS in preview_iframe.tpl

Re: JS in preview_iframe.tpl

Re: JS in preview_iframe.tpl

Re: JS in preview_iframe.tpl

Re: JS in preview_iframe.tpl

Re: JS in preview_iframe.tpl

Re: JS in preview_iframe.tpl

Re: JS in preview_iframe.tpl

Re: JS in preview_iframe.tpl

Re: JS in preview_iframe.tpl

Re: JS in preview_iframe.tpl

Who is online