Jump to content
Stef's Coding Community
newseed

PNG fix and Tab Pages Javascript

Recommended Posts

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 by newseed

Share this post


Link to post
Share on other sites

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 by BeeDev

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 by BeeDev

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Expression - like...

 

* html #controls #first {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/first.gif',sizingMethod='scale');
}

Edited by Eric

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 :P

 

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. :D

Share this post


Link to post
Share on other sites

 

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 ?

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...