March 23, 2007...5:45 pm

Problems with pngfix.js when using swfobject.js

Jump to Comments

This 2 popular javascript libraries are very useful, but today I found that pngfix.js just didn’t work when using swfobject.js on the page.

This the modified pngfix code that solves the problem:

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

/*
http://maxtoroq.wordpress.com

The code has been modified to ensure compatibility when using side by side with swfobject.js

- Main code moved inside an object to avoid global variables.
- Using window.onload event, you should remove the defer keyword from the script tag.

*/

window.addLoadEvent = function(func) {
   var oldonload = window.onload;
   if (typeof window.onload != 'function') {
      window.onload = func;
   } else {
      window.onload = function() {
         if (oldonload) {
            oldonload();
         }
         func();
      }
   }
}

var pngfix = {

   main : function() {

      if ((parseFloat(navigator.appVersion.split("MSIE")[1]) >= 5.5) && (document.body.filters)) {
         for(var i=0; i<document.images.length; i++) {
            var img = document.images[i]
            var imgName = img.src.toUpperCase()
            if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
               var imgID = (img.id) ? "id='" + img.id + "' " : ""
               var imgClass = (img.className) ? "class='" + img.className + "' " : ""
               var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
               var imgStyle = "display:inline-block;" + img.style.cssText
               if (img.align == "left") imgStyle = "float:left;" + imgStyle
               if (img.align == "right") imgStyle = "float:right;" + imgStyle
               if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
               var strNewHTML = "<span " + imgID + imgClass + imgTitle
               + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
               + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
               + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
               img.outerHTML = strNewHTML
               i = i-1
            }
         }
      }
   }
}

window.addLoadEvent(function() { pngfix.main(); });

21 Comments

Filed under javascript

21 Comments

  • Rafe
    April 17, 2007 at 6:11 pm

    I ran into this same problem today. Unfortunately I haven’t gotten your code to work. Can you give a direct link to the js file for the fix? When I copy&paste from your page I get all sorts of special publisher quotes… still i’m not sure if that’s the issue.

    btw, thanks for posting this…

    Reply
  • maxtoroq
    April 17, 2007 at 6:24 pm

    Rafe,
    Here is a link to the js file:
    http://www.santiagoautorepuestos.cl/master-ui/js/pngfix.mod.js

    I think you are right about the special quotes.

    Reply
  • Rafe
    April 18, 2007 at 9:55 am

    got it working! if you happen to have an ‘onload’ attribute in your body tag the pngfix function will be overwritten unless you put the include code AFTER the start of the body…

    Reply
  • Nilesh Thakkar
    May 23, 2007 at 3:25 am

    I just got the same problem today and applied your solution over it, and its working fine!!!

    Thanks a lot
    Nilesh

    Reply
  • Jacoor
    July 9, 2007 at 5:00 pm

    I could not download the file from the link which maxtoroq posted, so I corrected the file and posted it on a website:
    http://gawra.ovh.org/
    enjoy!!

    Reply
  • maxtoroq
    July 9, 2007 at 5:11 pm

    Thanks Jacoor. I’ve updated the link too.

    Reply
  • tom d
    August 2, 2007 at 7:44 am

    Awesome, thank you for that!

    Reply
  • Temesta
    September 27, 2007 at 10:10 am

    This fix is great! :) Finally …. Took me a while to find out that swfobject and pngfix were conflicting

    Reply
  • Rick Pickett
    November 11, 2007 at 4:25 am

    Badass, dude. I give you many-a-high-five!!!

    Weird thing for me was I had SlideShowPro running with swfobject and the pngfix and they were snug in a rug. Then, I embedded a YouTube clip with swfobject and the dealyo went wack. I’ve been racking my brain, really appreciate it dude.

    ::bows::

    Peace

    Rick

    Reply
  • Kat
    November 30, 2007 at 7:52 am

    Thank you lots. We’ve been having a bit of a nightmare with this and great to find your solution and get it all working.

    Reply
  • Mike
    January 7, 2008 at 8:17 pm

    Thanks a lot for this – you just ended a few hours of head-bashing for me :)

    Reply
  • Jerome
    February 12, 2008 at 5:38 am

    Hi there,

    I got a prob with pngfix.js that works well and takes out all the errors of pngs when rendering in IE6 but the prob is that my links now do not work in my main content. http://www.gbackup.co.za.

    Tried everything and cant find a sol..
    Please can anyone help???

    Reply
  • Smumdax
    March 14, 2008 at 12:32 am

    I was working on a 10 pages website designed with a couple PNGs here and there. The fix wasn’t a new thing for me and I used regularly.
    However, the site had 2 pages with some Flash and some friends hinted me that the PNGs weren’t showing correctly on these pages… So I assumed it had something to do with Flash… I quickly narrowed it to some conflicts between the two popular fixes…

    Since I’m no prg-genius, Google was my only help… and I found this post. And I thank you very very much! I still don’t understand what is the conflict, but rest assure that I will use this fix from now on… In 2008, it’s kinda normal to have Flash AND PNGs in our designs…

    Thanks again!

    Reply
  • Smumdax
    March 14, 2008 at 3:25 am

    Just tested the fix… copy-pasting the mentionned code did not work, so I used the .js link instead. Works “almost” perfectly… Here are to problems I saw..

    The PNGs seem to be replaced after everything loads, so depending on speed and weight of the page, we see for a second or two the PNGs “un-transparent”… I can deal with that..

    The second issue however… I know it might not be the place, but still I want to mention it here: this fix doesn’t seem to work on images that are put in element’s attribute background=”", like TDs, TABLEs…

    In that situation, I suggest the supersleight.js workaround insteand.

    Reply
  • Kalle
    March 20, 2008 at 9:18 am

    Thank you very much!
    When including Youtube movies in a web page the regular PngFix didn’t work. Your script solved the problem!

    Thanks again!

    /Kalle

    Reply
  • Solution for onLoad + PNG fix defer problem in IE at Dellanave
    May 20, 2008 at 3:41 am

    [...] I figured out the problem it was easy to fix. Even more convenient, I found this modified version of the pngfix that solved the onload hanging [...]

    Reply
  • De PNGs transparentes, navegadores y onLoads va la cosa | 2flash2furious, un blog de [Q] interactiva :: diseño gráfico, web & multimedia
    May 29, 2008 at 4:09 am

    [...] a la mala compatibilidad del pngfix con métodos invocados en el onLoad. La solución pasa por usar una variante del pngfix (que ha salido a la luz porque también da problemas con el swfobject) y que permite mezclar estas [...]

    Reply
  • Vincent
    July 8, 2008 at 4:34 pm

    Good job, I could never get the original script to work. As soon as I replaced the old script with your script it worked. Used it in an ASP.NET 2.0 Application on the master page if that helps anyone. Thank you so much.

    Reply
  • pall
    January 13, 2009 at 6:34 am

    thanks a lot, – that’s what i was looking for. – Just a note (maybe already said in one of above comments):

    there’s a smiling emoticon in the code, – just replace
    “filter:progid :D XImageTransform.Microsoft.AlphaImageLoader”

    with

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

    Reply
  • pall
    January 13, 2009 at 6:35 am

    sh*it..

    let’s try again,

    just replace :D with “: D”, without space

    Reply
  • sgenius
    April 16, 2009 at 3:24 pm

    Works wonders. Thank you so much!

    Reply

Leave a Reply