JS in preview_iframe.tpl

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:
Contact yellowled

JS in preview_iframe.tpl

Post 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
Top
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:
Contact garvinhicking

Re: JS in preview_iframe.tpl

Post by garvinhicking »

Hi!

Is your content floating? Then it has no height.

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
Top
sonichouse
Regular
Posts: 196
Joined: Sun May 11, 2008 2:53 am
Contact:
Contact sonichouse

Re: JS in preview_iframe.tpl

Post 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.
Steve is occasionally blogging here
Top
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:
Contact yellowled

Re: JS in preview_iframe.tpl

Post 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
Top
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:
Contact garvinhicking

Re: JS in preview_iframe.tpl

Post 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
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
Top
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:
Contact yellowled

Re: JS in preview_iframe.tpl

Post 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
Top
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:
Contact yellowled

Re: JS in preview_iframe.tpl

Post 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
Top
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:
Contact garvinhicking

Re: JS in preview_iframe.tpl

Post 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
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
Top
onli
Regular
Posts: 2830
Joined: Tue Sep 09, 2008 10:04 pm
Contact:
Contact onli

Re: JS in preview_iframe.tpl

Post 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).
Top
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:
Contact yellowled

Re: JS in preview_iframe.tpl

Post 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 :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
Top
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:
Contact yellowled

Re: JS in preview_iframe.tpl

Post 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
Top
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:
Contact yellowled

Re: JS in preview_iframe.tpl

Post 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
Top
Post Reply

Return to “Themes”