IE6 jQuery PNG fix

JavaScript
1

http://allinthehead.com/retro/338/supersleight-jquery-plugin

I AM GOING CRAZY OVER THIS.

Can someone explain to me what i’m doing wrong? PLEASE?

I’ve tried many different solutions to allow IE6 to reconize my images as transperent but none of them have worked.

This is what is placed in between my <head></head> tags.
How do I call to the script


<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.min.js"></script>

<script type="text/javascript">
jQuery.fn.supersleight = function(settings) {
    settings = jQuery.extend({
        imgs: true,
        backgrounds: true,
        shim: 'x.gif',
        apply_positioning: true
    }, settings);
    
    return this.each(function(){
        if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7 && parseInt(jQuery.browser.version, 10) > 4) {
            jQuery(this).find('*').andSelf().each(function(i,obj) {
                var self = jQuery(obj);
                // background pngs
                if (settings.backgrounds && self.css('background-image').match(/\\.png/i) !== null) {
                    var bg = self.css('background-image');
                    var src = bg.substring(5,bg.length-2);
                    var mode = (self.css('background-repeat') == 'no-repeat' ? 'crop' : 'scale');
                    var styles = {
                        'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')",
                        'background-image': 'url('+settings.shim+')'
                    };
                    self.css(styles);
                };
                // image elements
                if (settings.imgs && self.is('img[src$=png]')){
                    var styles = {
                        'width': self.width() + 'px',
                        'height': self.height() + 'px',
                        'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + self.attr('src') + "', sizingMethod='scale')"
                    };
                    self.css(styles).attr('src', settings.shim);
                };
                // apply position to 'active' elements
                if (settings.apply_positioning && self.is('a, input') && (self.css('position') === '' || self.css('position') == 'static')){
                    self.css('position', 'relative');
                };
            });
        };
    });
};
$('body').supersleight();




</script>

Do I call the script anywhere on the page by including this into my document?

$('#content').supersleight();

Im confused. :frowning:

2

You know what? Forget it… I’m not going to support a browser thats over 9 years old. I’m now only support IE7 and up! So, long IE6!

3

That is really what we all should dare to avoid IE6 now. But sometimes clients don’t want ignore it since most of the users still using XP with default browser which is IE6 :frowning:

4

$(‘body’).supersleight();

If you call that before the <body> element exists(and the content in it), it’s not gonna work. Web browsers process html and javascript starting at the top of the file, and move progressively towards the bottom of the file.

Either call it at the end of the document, or make use of jquerys ready() method.