Problems with pngfix.js when using swfobject.js
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(); });
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…
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.
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…
I just got the same problem today and applied your solution over it, and its working fine!!!
Thanks a lot
Nilesh
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!!
Thanks Jacoor. I’ve updated the link too.
Awesome, thank you for that!
This fix is great!
Finally …. Took me a while to find out that swfobject and pngfix were conflicting
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
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.
Thanks a lot for this - you just ended a few hours of head-bashing for me
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???
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!
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.
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