maxtoroq.dev

Problems with pngfix.js when using swfobject.js

Posted in javascript by maxtoroq on March 23rd, 2007

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(); });

15 Responses to 'Problems with pngfix.js when using swfobject.js'

Subscribe to comments with RSS or TrackBack to 'Problems with pngfix.js when using swfobject.js'.

  1. Rafe said, on April 17th, 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…

  2. maxtoroq said, on April 17th, 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.

  3. Rafe said, on April 18th, 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…

  4. Nilesh Thakkar said, on May 23rd, 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

  5. Jacoor said, on July 9th, 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!!

  6. maxtoroq said, on July 9th, 2007 at 5:11 pm

    Thanks Jacoor. I’ve updated the link too.

  7. tom d said, on August 2nd, 2007 at 7:44 am

    Awesome, thank you for that!

  8. Temesta said, on September 27th, 2007 at 10:10 am

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

  9. Rick Pickett said, on November 11th, 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

  10. Kat said, on November 30th, 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.

  11. Mike said, on January 7th, 2008 at 8:17 pm

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

  12. Jerome said, on February 12th, 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???

  13. Smumdax said, on March 14th, 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!

  14. Smumdax said, on March 14th, 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.

  15. Kalle said, on March 20th, 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

Leave a Reply