Preview post doesn't work

wagwag · Post by **wagwag** » Fri Jun 16, 2006 8:38 am

Hello,
I've been a serendipity user for a while and the preview entry feature has never worked correctly for me. The iframe with the my post preview shows up for a fraction of a second, but as soon as the page finishes loading, it dissapears.

I've just installed seredipity 1.0 (yea!) and I noticed this was still a problem so I thought I should finally do something about it. I believe I've located the source of the problem, and I don't think this is serendipity's fault, but I thought I would share my findings in case anyone else had this issue.

The height of the preview iframe is set here: serendipity/templates/default/preview_iframe.tpl

I found that the following code was setting the iframe height to 10px:

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';

This explains why the preview suddenly dissapears on me. It seems there is a bug in Firefox (perhaps Konqueror as well because it does the same) that prevents the offsetHeight property from returning the correct value in some situations. In this case it returns 0. Until Firefox gets fixed, I am working around the problem by commenting out the lines of code above and setting the subsequent line as follows, which gives me an iframe of the default height with a scrollbar... which is still better than no preview.

Code: Select all

parent.document.getElementById('serendipity_iframe').scrolling    = 'yes';

Anyway, thank you for serendipity 1.0, I like it very much!!

Post by **garvinhicking** » Fri Jun 16, 2006 9:37 am

Hi!

Actually it's not a bug of the JS or of s9y, but of your template.

Which one are you using? It might need a custom preview_iframe.tpl file that contains a "mainpane" element to work properly.

Best regards,
Garvin

wagwag · Post by **wagwag** » Fri Jun 16, 2006 9:55 am

I assumed it was a browser bug because it happens in Firefox and Konqueror but not in Opera-- the preview iframe works fine as is using Opera. Plus I found an open bug report for mozilla offsetHeight problems: https://bugzilla.mozilla.org/show_bug.cgi?id=306428

But anyway, I'm using the Plain Vanilla template.

Thanks!

Post by **garvinhicking** » Fri Jun 16, 2006 10:47 am

Hi!

Okay, I've added the right preview_iframe.tpl to the plain-vanilla theme.

It looks like this:

Code: Select all

    <head>
        <title>{$CONST.SERENDIPITY_ADMIN_SUITE}</title>
        <meta http-equiv="Content-Type" content="text/html; charset={$head_charset}" />
        <meta name="Powered-By" content="Serendipity v.{$head_version}" />
        <link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" />
        <script type="text/javascript">
           window.onload = function() {ldelim}
             parent.document.getElementById('serendipity_iframe').style.height = document.getElementById('container').offsetHeight
                                                                               + parseInt(document.getElementById('container').style.marginTop)
                                                                               + parseInt(document.getElementById('container').style.marginBottom)
                                                                               + 'px';
             parent.document.getElementById('serendipity_iframe').scrolling    = 'no';
             parent.document.getElementById('serendipity_iframe').style.border = 0;
           {rdelim}
        </script>
    </head>

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

So it was just required to change "mainpane" to "container".

Regards,
Garvin

wagwag · Post by **wagwag** » Fri Jun 16, 2006 7:49 pm

Thanks for you help, but I'm afraid that didn't work.

It throws a javascript error-- document.getElementById("container") has no properties.

I tried some other templates and I discovered that your Blue Streak/contest theme displays the preview correctly, while the default admin theme does not. I am trying to determine why that is, what the difference is, but so far I haven't been able to figure it out. I'll let you know what I find.

Thank you!

Post by **garvinhicking** » Fri Jun 16, 2006 8:25 pm

Hi!

But the plain-vanilla theme has a "container" id. Maybe you switched/changed templates? With plain-vanilla it works as expected here, as well as with the usual default theme.

Best regards,
Garvin

wagwag · Post by **wagwag** » Fri Jun 16, 2006 11:26 pm

Yes, I'm sure I am still using plain vanilla. To be absolutely certain, I just installed a fresh copy of serendipity-1.0 and downloaded the plain-vanilla theme from http://spartacus.s9y.org/cvs/additional ... anilla.zip and added the preview_iframe.tpl you posted here and then copied in only my serendipity_config_local.inc.php and .htaccess and, after clearing my cache/history/cookies and everything, I tried it again.

Same result: document.getElementById("container") has no properties.
The iframe is visible but retains its scrollbar and its default, initial height: 300px.

wagwag · Post by **wagwag** » Fri Jun 16, 2006 11:29 pm

Hi,
I just noticed that in the code you posted above, the div is still called "mainpane". That is the same div the code is checking the height of, no? If I change "mainpane" to "container" I no longer get the JS error, but then I get the same problem I had before -- the preview iframe is shrunk to 10px high because offsetHeight returns 0 and each of the margins is 5, so 0 + 5 + 5 = 10px.

wagwag · Post by **wagwag** » Sat Jun 17, 2006 9:03 am

After spending a long time comparing everything about your Blue Streak theme that works to the Plain Vanilla that doesn't, I think I've finally figured this out.

In serendipity/templates/plain-vanilla/style.css, line 37 makes the content div a float:

Code: Select all

#content {
    position:relative;
    float:left;

If I remove this line, and unfloat the content div, the problem dissapears and the preview displays correctly. I'm guessing Firefox and Konqueror incorrectly calculate offsetHeight when the contained content is in a float. Unfortunately, unfloating the content div does bad things to the blog display side of this theme... namely screwing up the position of the sidebar.

So after all that I'm again concluding that the root cause of the problem is a Firefox bug

OffsetHeight is actually an IE DOM property anyway, not something in w3 specs, and while Firefox sort of implements it, I think they didn't get it quite right for all cases.

For now my solution is to statically define the stylesheet link in serendipity/templates/plain-vanilla/preview_iframe.tpl to point to a modified stylesheet from which I've removed the float line from the content style for the preview iframe. It's not elegant, but it works well enough.

chessnut · Post by **chessnut** » Mon Aug 04, 2008 10:29 am

My tips:
1. comment out the javascript (it's not always needed)
2. change the javascript so instead of getElementById('container') use getElementById('mainpane')

So check out my preview_iframe.tpl these changes (javascript is commented out):

<head>
<title>{$CONST.SERENDIPITY_ADMIN_SUITE}</title>
<meta http-equiv="Content-Type" content="text/html; charset={$head_charset}" />
<meta name="Powered-By" content="Serendipity v.{$head_version}" />
<link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" />



</head>

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

3. Watch out for style:"clear: both" in your entries.tpl etc. There are a lot of "float:left" in the preview and the "clear:both" may destroy your preview-layout.

Preview post doesn't work

Preview post doesn't work

Re: Preview post doesn't work