Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product

Ready to contribute?

Amazing! Sign our contributors' agreement and then join us on GitHub.

Vanilla 2.3 fully supports PHP 7. Get it now!
Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.

Preview Post

This discussion is related to the Preview Post addon.
NickENickE New
edited November 2007 in Vanilla 1.0 Help


  • works like a charm on my board. thanks a bunch.
  • Yes my only problem with it is the preview.png looking ugly in Exploder so I changed it to a .gif and it looks much better.

    Posted: Thursday, 5 April 2007 at 7:34AM

  • Cause alls the PNG Files (such as the Smileys from the Smiley ext.) such ugly borders? I also recognized it, but instructed my users, to use firefox :P

    so simply converting all PNG to GIFs? (and changing the according links)
  • GIFs need to be made with the background color they will sit on in mind, so if it's white all the time or pale blue all the time that's fine.

    If you make a GIF with a white mask and place it over a pale blue background it will have a white halo around it - ugly.

    If there are many background colors to take into account, PNGs are better because they have true transparency, except for Exploder of course.

    Posted: Thursday, 5 April 2007 at 7:42AM

  • meens, I have to make them, when I have definitely found my style and know, which transperancy color I need, or neglect the pooor IEx users
  • If you want to persist with PNGs, try putting the code below into a text file called pngfix.js and place it on your server.

    Then put this into the head section of each page...
    <script type="text/javascript" src="http://www.yourdomain/forum/pngfix.js"></script>

    // Correctly handle PNG transparency in Win IE 5.5 or higher.<br />//<br /><br />function correctPNG() <br /> {<br /> for(var i=0; i<document.images.length; i++)<br /> {<br /> var img = document.images[i]<br /> var imgName = img.src.toUpperCase()<br /> if (imgName.substring(imgName.length-3, imgName.length) == "PNG")<br /> {<br /> var imgID = ( ? "id='" + + "' " : ""<br /> var imgClass = (img.className) ? "class='" + img.className + "' " : ""<br /> var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "<br /> var imgStyle = "display:inline-block;" + <br /> if (img.align == "left") imgStyle = "float:left;" + imgStyle<br /> if (img.align == "right") imgStyle = "float:right;" + imgStyle<br /> if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle <br /> var strNewHTML = "<span " + imgID + imgClass + imgTitle<br /> + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"<br /> + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"<br /> + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" <br /> img.outerHTML = strNewHTML<br /> i = i-1<br /> }<br /> }<br /> }<br />window.attachEvent("onload", correctPNG);

    It works well but may take a few seconds on each page depending on how many PNGs it has to fix and how big they are.

    Posted: Thursday, 5 April 2007 at 7:58AM

  • ok ok, I'll try it... I'll post, wheter it works...

    Thanks so long
  • now you can do this through Nuggets, I guess.
  • Yes, Nugget would be ideal for this, add it to a "head tag" pan and cook it!

    Posted: Thursday, 5 April 2007 at 6:54PM

  • don't escape single quotes. Nuggets will do it by itself
    try this. provided this code actually works.??
    <br /><script type="text/javascript">function correctPNG()<br />{<br />for(var i=0; i<document.images.length; i++)<br />{<br />var img = document.images[i]<br />var imgName = img.src.toUpperCase()<br />if (imgName.substring(imgName.length-3, imgName.length) == "PNG")<br />{<br />var imgID = ( ? "id='" + + "' " : ""<br />var imgClass = (img.className) ? "class='" + img.className + "' " : ""<br />var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "<br />var imgStyle = "display:inline-block;" +<br />if (img.align == "left") imgStyle = "float:left;" + imgStyle<br />if (img.align == "right") imgStyle = "float:right;" + imgStyle<br />if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle<br />var strNewHTML = "<span " + imgID + imgClass + imgTitle<br />+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"<br />+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"<br />+ "(src='" + img.src + "', sizingMethod='scale');\"></span>"<br />img.outerHTML = strNewHTML<br />i = i-1<br />}<br />}<br />}<br />if (window.attachEvent)<br />window.attachEvent("onload", correctPNG);<br />else<br />window.onload=correctPNG;<br /><br /></script><br />
  • well, this doesn't work for me. This way the script-nugget kills off an image one also located in the Head tag. Whereas that wasn't the case with Wanderer's option.
  • whats ur website
    and where is the png image
  • I didn't mean put the entire JavaScript in the Head Nugget, simply the link to it....

    <script type="text/javascript" src="/"></script>

    Posted: Thursday, 5 April 2007 at 10:15PM

  • @Wanderer - I know that :)
    @MySchizoBuddy - the png image is also in the Head tag (1) with the script there as (0) (now it is with the Wanderer's option):


    PS: Ooops.. just found out that it doesn't work in Opera (mac)
  • yes, I haven't tested it with some other browsers, but Wanderer's script (no matter how activated) does kill pngs in (mac) Opera
  • u shouldn't need png fix for opera. so just wrap the script around
    <!--[if IE]><script type="text/javascript" src="/"></script><![endif]-->
  • Uploaded version 2.5 of Preview Post.
  • hmm, recently moved to a new server - along with spellchecker - preview post is not working - I tried version 2.5 - then i reverted to version 2.1. No luck, the message I'm getting is:
    Line: 55
    Char: 4
    Error: Unknown runtime error
    Code: 0
  • I'm using the tabled theme
  • I'm getting extra lines in the preview, compared to the submitted message. Maybe AutoP interferes with this extension?
  • Is it possible to use this extension with the delbat theme?
  • Conflict between FCKeditor and Preview Post 2.1? # 16

    Any chance of getting this patch into preview post? It seemed to work just fine for me with and without FCK enabled.

    mattucf, yes, I think it does. If you have any ideas on stopping it conflicting, please let me know in the AutoP discussion.
  • Uploaded version 2.5.1 of Preview Post.
  • Lovely job SirNot, thanks :)

    Just a random thought related to IE6, now that IE7 is out and gaining ground, would it be worth changing the preview graphic back to being an alpha blended PNG and adding the GIF one just for IE6 and lower via a conditional style sheet? It's just that the preview graphic looks a little rough now when it was smooth before (I understand the reasons for changing it at the time).
  • I started trying to hack the preview.js file to output code that would work with the tabled theme, but I'm absolute rubbish with Javascript. Anyone else willing to help out and take a stab at it?
  • any ideas on the fix for FCK conflict?
  • 2.5.1 includes the fix, just read the 5 or so posts directly before yours...

    It's working in my Vanilla test forums. You will need to be signed up and logged in to try it out.
Sign In or Register to comment.