By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,314 Members | 1,751 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,314 IT Pros & Developers. It's quick & easy.

SWFobject - is breaking the .PNG transparency script in IE!!

P: 5
Hi,

On one of the pages of my site i use two javascripts, one makes transparency of png's work in IE, and the other embeds a flash player.
Now use one of the scripts it works fine, use both and the transparency script stops working. So for example, use just the png transparency script and it displays the png's correctly in IE, as soon as i add the SWFobject (flash embedding) script the transparency script stops working!!?? :S

Any help would be hugly appreciated!!

Thanks,
Michael.


-PNG Transparency Script for IE-
Expand|Select|Wrap|Line Numbers
  1. /*
  2.  
  3. Correctly handle PNG transparency in Win IE 5.5 & 6.
  4. http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
  5.  
  6. Use in <HEAD> with DEFER keyword wrapped in conditional comments:
  7. <!--[if lt IE 7]>
  8. <script defer type="text/javascript" src="pngfix.js"></script>
  9. <![endif]-->
  10.  
  11. */
  12.  
  13. var arVersion = navigator.appVersion.split("MSIE")
  14. var version = parseFloat(arVersion[1])
  15.  
  16. if ((version >= 5.5) && (document.body.filters)) 
  17. {
  18.    for(var i=0; i<document.images.length; i++)
  19.    {
  20.       var img = document.images[i]
  21.       var imgName = img.src.toUpperCase()
  22.       if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
  23.       {
  24.          var imgID = (img.id) ? "id='" + img.id + "' " : ""
  25.          var imgClass = (img.className) ? "class='" + img.className + "' " : ""
  26.          var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
  27.          var imgStyle = "display:inline-block;" + img.style.cssText 
  28.          if (img.align == "left") imgStyle = "float:left;" + imgStyle
  29.          if (img.align == "right") imgStyle = "float:right;" + imgStyle
  30.          if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
  31.          var strNewHTML = "<span " + imgID + imgClass + imgTitle
  32.          + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
  33.          + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  34.          + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
  35.          img.outerHTML = strNewHTML
  36.          i = i-1
  37.       }
  38.    }
  39. }

-SWFobject (Flash Embedding) Script-
Expand|Select|Wrap|Line Numbers
  1. /**
  2. /**
  3.  * SWFObject v1.5: Flash Player detection and embed - http://blog.deconcept.com/swfobject/
  4.  *
  5.  * SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License:
  6.  * http://www.opensource.org/licenses/mit-license.php
  7.  *
  8.  */
  9. if(typeof deconcept == "undefined") var deconcept = new Object();
  10. if(typeof deconcept.util == "undefined") deconcept.util = new Object();
  11. if(typeof deconcept.SWFObjectUtil == "undefined") deconcept.SWFObjectUtil = new Object();
  12. deconcept.SWFObject = function(swf, id, w, h, ver, c, quality, xiRedirectUrl, redirectUrl, detectKey) {
  13.     if (!document.getElementById) { return; }
  14.     this.DETECT_KEY = detectKey ? detectKey : 'detectflash';
  15.     this.skipDetect = deconcept.util.getRequestParameter(this.DETECT_KEY);
  16.     this.params = new Object();
  17.     this.variables = new Object();
  18.     this.attributes = new Array();
  19.     if(swf) { this.setAttribute('swf', swf); }
  20.     if(id) { this.setAttribute('id', id); }
  21.     if(w) { this.setAttribute('width', w); }
  22.     if(h) { this.setAttribute('height', h); }
  23.     if(ver) { this.setAttribute('version', new deconcept.PlayerVersion(ver.toString().split("."))); }
  24.     this.installedVer = deconcept.SWFObjectUtil.getPlayerVersion();
  25.     if (!window.opera && document.all && this.installedVer.major > 7) {
  26.         // only add the onunload cleanup if the Flash Player version supports External Interface and we are in IE
  27.         deconcept.SWFObject.doPrepUnload = true;
  28.     }
  29.     if(c) { this.addParam('bgcolor', c); }
  30.     var q = quality ? quality : 'high';
  31.     this.addParam('quality', q);
  32.     this.setAttribute('useExpressInstall', false);
  33.     this.setAttribute('doExpressInstall', false);
  34.     var xir = (xiRedirectUrl) ? xiRedirectUrl : window.location;
  35.     this.setAttribute('xiRedirectUrl', xir);
  36.     this.setAttribute('redirectUrl', '');
  37.     if(redirectUrl) { this.setAttribute('redirectUrl', redirectUrl); }
  38. }
  39. deconcept.SWFObject.prototype = {
  40.     useExpressInstall: function(path) {
  41.         this.xiSWFPath = !path ? "expressinstall.swf" : path;
  42.         this.setAttribute('useExpressInstall', true);
  43.     },
  44.     setAttribute: function(name, value){
  45.         this.attributes[name] = value;
  46.     },
  47.     getAttribute: function(name){
  48.         return this.attributes[name];
  49.     },
  50.     addParam: function(name, value){
  51.         this.params[name] = value;
  52.     },
  53.     getParams: function(){
  54.         return this.params;
  55.     },
  56.     addVariable: function(name, value){
  57.         this.variables[name] = value;
  58.     },
  59.     getVariable: function(name){
  60.         return this.variables[name];
  61.     },
  62.     getVariables: function(){
  63.         return this.variables;
  64.     },
  65.     getVariablePairs: function(){
  66.         var variablePairs = new Array();
  67.         var key;
  68.         var variables = this.getVariables();
  69.         for(key in variables){
  70.             variablePairs[variablePairs.length] = key +"="+ variables[key];
  71.         }
  72.         return variablePairs;
  73.     },
  74.     getSWFHTML: function() {
  75.         var swfNode = "";
  76.         if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) { // netscape plugin architecture
  77.             if (this.getAttribute("doExpressInstall")) {
  78.                 this.addVariable("MMplayerType", "PlugIn");
  79.                 this.setAttribute('swf', this.xiSWFPath);
  80.             }
  81.             swfNode = '<embed type="application/x-shockwave-flash" src="'+ this.getAttribute('swf') +'" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'" style="'+ this.getAttribute('style') +'"';
  82.             swfNode += ' id="'+ this.getAttribute('id') +'" name="'+ this.getAttribute('id') +'" ';
  83.             var params = this.getParams();
  84.              for(var key in params){ swfNode += [key] +'="'+ params[key] +'" '; }
  85.             var pairs = this.getVariablePairs().join("&");
  86.              if (pairs.length > 0){ swfNode += 'flashvars="'+ pairs +'"'; }
  87.             swfNode += '/>';
  88.         } else { // PC IE
  89.             if (this.getAttribute("doExpressInstall")) {
  90.                 this.addVariable("MMplayerType", "ActiveX");
  91.                 this.setAttribute('swf', this.xiSWFPath);
  92.             }
  93.             swfNode = '<object id="'+ this.getAttribute('id') +'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'" style="'+ this.getAttribute('style') +'">';
  94.             swfNode += '<param name="movie" value="'+ this.getAttribute('swf') +'" />';
  95.             var params = this.getParams();
  96.             for(var key in params) {
  97.              swfNode += '<param name="'+ key +'" value="'+ params[key] +'" />';
  98.             }
  99.             var pairs = this.getVariablePairs().join("&");
  100.             if(pairs.length > 0) {swfNode += '<param name="flashvars" value="'+ pairs +'" />';}
  101.             swfNode += "</object>";
  102.         }
  103.         return swfNode;
  104.     },
  105.     write: function(elementId){
  106.         if(this.getAttribute('useExpressInstall')) {
  107.             // check to see if we need to do an express install
  108.             var expressInstallReqVer = new deconcept.PlayerVersion([6,0,65]);
  109.             if (this.installedVer.versionIsValid(expressInstallReqVer) && !this.installedVer.versionIsValid(this.getAttribute('version'))) {
  110.                 this.setAttribute('doExpressInstall', true);
  111.                 this.addVariable("MMredirectURL", escape(this.getAttribute('xiRedirectUrl')));
  112.                 document.title = document.title.slice(0, 47) + " - Flash Player Installation";
  113.                 this.addVariable("MMdoctitle", document.title);
  114.             }
  115.         }
  116.         if(this.skipDetect || this.getAttribute('doExpressInstall') || this.installedVer.versionIsValid(this.getAttribute('version'))){
  117.             var n = (typeof elementId == 'string') ? document.getElementById(elementId) : elementId;
  118.             n.innerHTML = this.getSWFHTML();
  119.             return true;
  120.         }else{
  121.             if(this.getAttribute('redirectUrl') != "") {
  122.                 document.location.replace(this.getAttribute('redirectUrl'));
  123.             }
  124.         }
  125.         return false;
  126.     }
  127. }
  128.  
  129. /* ---- detection functions ---- */
  130. deconcept.SWFObjectUtil.getPlayerVersion = function(){
  131.     var PlayerVersion = new deconcept.PlayerVersion([0,0,0]);
  132.     if(navigator.plugins && navigator.mimeTypes.length){
  133.         var x = navigator.plugins["Shockwave Flash"];
  134.         if(x && x.description) {
  135.             PlayerVersion = new deconcept.PlayerVersion(x.description.replace(/([a-zA-Z]|\s)+/, "").replace(/(\s+r|\s+b[0-9]+)/, ".").split("."));
  136.         }
  137.     }else if (navigator.userAgent && navigator.userAgent.indexOf("Windows CE") >= 0){ // if Windows CE
  138.         var axo = 1;
  139.         var counter = 3;
  140.         while(axo) {
  141.             try {
  142.                 counter++;
  143.                 axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+ counter);
  144. //                document.write("player v: "+ counter);
  145.                 PlayerVersion = new deconcept.PlayerVersion([counter,0,0]);
  146.             } catch (e) {
  147.                 axo = null;
  148.             }
  149.         }
  150.     } else { // Win IE (non mobile)
  151.         // do minor version lookup in IE, but avoid fp6 crashing issues
  152.         // see http://blog.deconcept.com/2006/01/11/getvariable-setvariable-crash-internet-explorer-flash-6/
  153.         try{
  154.             var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
  155.         }catch(e){
  156.             try {
  157.                 var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
  158.                 PlayerVersion = new deconcept.PlayerVersion([6,0,21]);
  159.                 axo.AllowScriptAccess = "always"; // error if player version < 6.0.47 (thanks to Michael Williams @ Adobe for this code)
  160.             } catch(e) {
  161.                 if (PlayerVersion.major == 6) {
  162.                     return PlayerVersion;
  163.                 }
  164.             }
  165.             try {
  166.                 axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
  167.             } catch(e) {}
  168.         }
  169.         if (axo != null) {
  170.             PlayerVersion = new deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));
  171.         }
  172.     }
  173.     return PlayerVersion;
  174. }
  175. deconcept.PlayerVersion = function(arrVersion){
  176.     this.major = arrVersion[0] != null ? parseInt(arrVersion[0]) : 0;
  177.     this.minor = arrVersion[1] != null ? parseInt(arrVersion[1]) : 0;
  178.     this.rev = arrVersion[2] != null ? parseInt(arrVersion[2]) : 0;
  179. }
  180. deconcept.PlayerVersion.prototype.versionIsValid = function(fv){
  181.     if(this.major < fv.major) return false;
  182.     if(this.major > fv.major) return true;
  183.     if(this.minor < fv.minor) return false;
  184.     if(this.minor > fv.minor) return true;
  185.     if(this.rev < fv.rev) return false;
  186.     return true;
  187. }
  188. /* ---- get value of query string param ---- */
  189. deconcept.util = {
  190.     getRequestParameter: function(param) {
  191.         var q = document.location.search || document.location.hash;
  192.         if (param == null) { return q; }
  193.         if(q) {
  194.             var pairs = q.substring(1).split("&");
  195.             for (var i=0; i < pairs.length; i++) {
  196.                 if (pairs[i].substring(0, pairs[i].indexOf("=")) == param) {
  197.                     return pairs[i].substring((pairs[i].indexOf("=")+1));
  198.                 }
  199.             }
  200.         }
  201.         return "";
  202.     }
  203. }
  204. /* fix for video streaming bug */
  205. deconcept.SWFObjectUtil.cleanupSWFs = function() {
  206.     var objects = document.getElementsByTagName("OBJECT");
  207.     for (var i = objects.length - 1; i >= 0; i--) {
  208.         objects[i].style.display = 'none';
  209.         for (var x in objects[i]) {
  210.             if (typeof objects[i][x] == 'function') {
  211.                 objects[i][x] = function(){};
  212.             }
  213.         }
  214.     }
  215. }
  216. // fixes bug in some fp9 versions see http://blog.deconcept.com/2006/07/28/swfobject-143-released/
  217. if (deconcept.SWFObject.doPrepUnload) {
  218.     if (!deconcept.unloadSet) {
  219.         deconcept.SWFObjectUtil.prepUnload = function() {
  220.             __flash_unloadHandler = function(){};
  221.             __flash_savedUnloadHandler = function(){};
  222.             window.attachEvent("onunload", deconcept.SWFObjectUtil.cleanupSWFs);
  223.         }
  224.         window.attachEvent("onbeforeunload", deconcept.SWFObjectUtil.prepUnload);
  225.         deconcept.unloadSet = true;
  226.     }
  227. }
  228. /* add document.getElementById if needed (mobile IE < 5) */
  229. if (!document.getElementById && document.all) { document.getElementById = function(id) { return document.all[id]; }}
  230.  
  231. /* add some aliases for ease of use/backwards compatibility */
  232. var getQueryParamValue = deconcept.util.getRequestParameter;
  233. var FlashObject = deconcept.SWFObject; // for legacy support
  234. var SWFObject = deconcept.SWFObject;
  235.  

-HTML javascript linking-
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="../scripts/swfobject.js"
  2. <!--[if lt IE 7]>
  3. <script defer type="text/javascript" src="../scripts/pngfix.js"></script>
  4. <![endif]-->
May 25 '07 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
The problem is because the script tags weren't closed properly:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="../scripts/swfobject.js"
  2. <!--[if lt IE 7]>
  3. <script defer type="text/javascript" src="../scripts/pngfix.js"></script>
  4. <![endif]-->
should be:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="../scripts/swfobject.js"></script>
  2. <!--[if lt IE 7]>
  3. <script defer type="text/javascript" src="../scripts/pngfix.js"></script>
  4. <![endif]-->
Jan 29 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.