newseed Posted June 11, 2009 Report Share Posted June 11, 2009 (edited) I have an issue with the IE6 png fix not working with the tab js. Here's the test page: doo rshox.com/tab-p ages.html (remove spaces) I think it has something to do with the onload function but then I don't know js well enough to troubleshoot issues like these. Here's the pngfix script code: var supersleight = function() { var root = false; var applyPositioning = true; // Path to a transparent GIF image var shim = 'door-protector/pc/scripts/pngfix/x.gif'; // RegExp to match above GIF image name var shim_pattern = /x\.gif$/i; var fnLoadPngs = function() { if (root) { root = document.getElementById(root); }else{ root = document; } for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) { // background pngs if (obj.currentStyle.backgroundImage.match(/\.png/i) !== null) { bg_fnFixPng(obj); } // image elements if (obj.tagName=='IMG' && obj.src.match(/\.png$/i) !== null){ el_fnFixPng(obj); } // apply position to 'active' elements if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){ obj.style.position = 'relative'; } } }; var bg_fnFixPng = function(obj) { var mode = 'scale'; var bg = obj.currentStyle.backgroundImage; var src = bg.substring(5,bg.length-2); if (obj.currentStyle.backgroundRepeat == 'no-repeat') { mode = 'crop'; } obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')"; obj.style.backgroundImage = 'url('+shim+')'; }; var el_fnFixPng = function(img) { var src = img.src; img.style.width = img.width + "px"; img.style.height = img.height + "px"; img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"; img.src = shim; }; var addLoadEvent = function(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); }; } }; return { init: function() { addLoadEvent(fnLoadPngs); }, limitTo: function(el) { root = el; }, run: function() { fnLoadPngs(); } }; }(); // limit to part of the page ... pass an ID to limitTo: // supersleight.limitTo('header'); supersleight.init(); Here's the tab script code: onload = function() { var e, i = 0; while (e = document.getElementById('tab-1').getElementsByTagName ('DIV') [i++]) { if (e.className == 'on' || e.className == 'off') { e.onclick = function () { var getEls = document.getElementsByTagName('DIV'); for (var z=0; z getEls[z].className=getEls[z].className.replace('show', 'hide'); getEls[z].className=getEls[z].className.replace('on', 'off'); } this.className = 'on'; var max = this.getAttribute('title'); document.getElementById(max).className = "show"; } } } } I can't recall where I got the pngfix but the other script is from stu nicholls. Edited June 11, 2009 by newseed Quote Link to comment Share on other sites More sharing options...
BeeDev Posted June 12, 2009 Report Share Posted June 12, 2009 (edited) There's a typo where you're calling the PNGFix script: notice supersleight.j instead of supersleight.js I'm not familiar with this PNGFix script. If you can't get it working after fixing the typo then try the following one: For this script to work, all you need to do is name your PNG images in a certain way: myImageName-trans.png with -trans.png at end This script also fixes some CSS & Javascript issues related to IE6 & IE5.5, but it may behave unpredictably so be careful & test it on all browsers Edited June 12, 2009 by BeeDev Quote Link to comment Share on other sites More sharing options...
newseed Posted June 12, 2009 Author Report Share Posted June 12, 2009 Thanks for your response. I did indeed fixed the typo but the pngfix still breaks in IE6. I am not really thrilled to attempt to use your suggestion because it is indeed unpredictable. Any other suggestions? Quote Link to comment Share on other sites More sharing options...
BeeDev Posted June 12, 2009 Report Share Posted June 12, 2009 (edited) how do you know that it's "indeed unpredictable" when you haven't even tried it? You should at least give it a go if your current one isn't working. I just suggested that you test your website on different browsers to see if any issues arise. There's another PNG fix script too: http://www.'>http://www. twinhelix .com/css/iepngfix/ See the online demo. There's 2 versions there, v1 is stable, but doesn't support background-position elements and elements with tiled PNG backgrounds. v2 is beta, but it does support background-position and background-repeated elements. I tried and tested TwinHelix pngfix, it's on one of the websites i built: http://www. JuiceEventProduction .com Edited June 12, 2009 by BeeDev Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted June 12, 2009 Report Share Posted June 12, 2009 Can you use an expression instead? That's all I use... Quote Link to comment Share on other sites More sharing options...
newseed Posted June 12, 2009 Author Report Share Posted June 12, 2009 how do you know that it's "indeed unpredictable" when you haven't even tried it? I never had good results with IE7.js but I did notice the IE8.js beta 3 version which seems to behave better which fixed my pngfix issue conflicting with another script. Thanks for encouraging me to give it another try. There's another PNG fix script too: http://www. twinhelix .com/css/iepngfix/ See the online demo. There's 2 versions there, v1 is stable, but doesn't support background-position elements and elements with tiled PNG backgrounds. v2 is beta, but it does support background-position and background-repeated elements. I have tried this on several occassion but it never worked flawlessly for me which is why I ended up using the other pngfix. Nevertheless, I have now resolved the issue. As a matter of fact, I was able to remove one of my conditional comment for IE6. Thanks. @Eric, I am not sure what you mean. I don't really do js. Even though I have fixed my issue, I still like your input in what you are talking about. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted June 12, 2009 Report Share Posted June 12, 2009 (edited) Expression - like... * html #controls #first { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/first.gif',sizingMethod='scale'); } Edited June 12, 2009 by Eric Quote Link to comment Share on other sites More sharing options...
newseed Posted June 12, 2009 Author Report Share Posted June 12, 2009 Thanks Eric. I will keep that in mind the next chance I get. Meanwhile, I have another small issue that I have seen before but do not recall how I fixed it. I will post this in another topic. Quote Link to comment Share on other sites More sharing options...
newseed Posted June 12, 2009 Author Report Share Posted June 12, 2009 Ok, per same link in my original post, I notice that the big tabs are not working in IE6 like the other browsers. Only 'OVERVIEW' and 'SHOCK ABSORBING FOAM' can be tested here. I can mouseover them but it doesn't change to hover state even though I can click on the link. Also note that when you click on either of those tabs, the small white text disappears. When they do appear, I get a greyish underline. Update: Not sure if this IE8.js is behaving erractically or what but I now see the small white text even if I click on it but the greyish underline still persist. If anyone has a stand alone IE6 (without IE7 or IE8 on same machine), maybe these issues do not occur. Quote Link to comment Share on other sites More sharing options...
newseed Posted June 12, 2009 Author Report Share Posted June 12, 2009 Ok, I still have an issue. The tabs script using a show/hide css in which the first tab will show by default but the other tabs are set to display:none until you click on them thus they content for the tab appears. When viewing this in IE6, it will not load any of the png images for any of the tabs that were set to hide. In this case, if you click on SHOCI ABSORBING FOAM, it will load the content. However, you will not see the 'Car Dings Happen' png image as well as the 'Click Details' image. It seems that the pngfix would have to run again when you click on any of the hidden tab contents in order for it to work? Quote Link to comment Share on other sites More sharing options...
BeeDev Posted June 15, 2009 Report Share Posted June 15, 2009 If you have IE8 and IE6, IE5.5, IE5, IE4 installed on your machine using the "Multiple IE's" installer, then I noticed that the conditional IE statements don't really work for those versions of IE I just checked your page on both Stand-alone IE6 and with Multiple IE's IE6. The stand-alone one surely shows transparent PNGs and the tabs etc work perfectly. So you're all good mate, if you want to confirm it yourself, try the following website http://ipinfo. info/netrenderer/index.php to render your website in Internet Explorer 6. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted June 15, 2009 Report Share Posted June 15, 2009 Ok, I still have an issue. The tabs script using a show/hide css in which the first tab will show by default but the other tabs are set to display:none until you click on them thus they content for the tab appears. When viewing this in IE6, it will not load any of the png images for any of the tabs that were set to hide. In this case, if you click on SHOCI ABSORBING FOAM, it will load the content. However, you will not see the 'Car Dings Happen' png image as well as the 'Click Details' image. It seems that the pngfix would have to run again when you click on any of the hidden tab contents in order for it to work? Yes I see this now, when you tab over to another tab, the hidden PNG images don't show up. Perhaps this is what I meant by "behaving unexpectedly" :/ Anyone can shed any light or a solution to this problem with hidden PNG's ? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.