Re: [jQuery] IE PNG hack
Kush Murod schrieb:
Hi guys,
I've wrote very simple JQuery IE PNG hack plugin.
Would like to know your professional opinion, to make it better
http://nemoweb.com.au/jquery/IEPNGHack/
Cheers,
Kush
Instead of creating a $(this) object 9 (!) times think about creating it
once and store it in a variable.
In addition, you're using jquery.fn.foo. This pattern is usually
considered to have the function chainable.
$('img').chainable().foo().bar();
Thus instead of this.each... you would have to use return this each
In this line:
hack += jq.attr('id') ? id=\ + jq.attr('id') + \ : ;
you're duplicating an id, which is supposed to be unique in a document
and if you need valid HTML.
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] IE PNG hack
Hi,
I've wrote very simple JQuery IE PNG hack plugin.
Would like to know your professional opinion, to make it better
Great idea.
Generally you can set the filter for the img tag as well, you just need a
fully transparent gif (or png) for the src.
jQuery.fn.IEPNGHack = function() {
if (!$.browser.msie) return false;
this.each(function() {
var t = $(this);
var url = t.attr('src');
t.css({
'filter':
'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+url+',sizingMethod='scale')'
}).attr({src:jQuery.IEPNGHack.emptygif});
});
};
jQuery.IEPNGHack = {
emptygif = 'empty.gif';
}
$(document).ready(function(){
jQuery.IEPNGHack.emptygif =
'http://example.com/design/images/empty.gif';
$('[EMAIL PROTECTED]').IEPNGHack();
});
You might also whant to fix IE for background-images:
jQuery.fn.IEPNGHack = function() {
if (!$.browser.msie) return false;
this.filter('[EMAIL PROTECTED]').each(function() {
var t = $(this);
var url = t.attr('src');
var w = t.width(); // width and height might be implicit
var h = t.height();
t.css({ // have not tested if this works theoretically it
should
filter:
'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+url+',sizingMethod='scale')'
}).attr({src:jQuery.IEPNGHack.emptygif}).width(w).height(h);
}).end().not('[EMAIL PROTECTED]')
.filter('img')
.not('[EMAIL
PROTECTED]'+jQuery.IEPNGHack.emptygif+']').css({filter:none})
.end()
.end().not('img').each(function() {
var t = $(this);
var url = t.css('background-image');
if( url.search(/[.]png$/) = 0 ) t.css({
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+url+',sizingMethod='scale'),
'background-image': 'none'
}); else t.css({filter: 'none'});
});
};
$(document).ready(function(){
$('.hasSomePngSomewhere').IEPNGHack();
});
Note, that this background-image hack only works for 1x1 pixel PNGs. In most
other cases, you won't be able to use the content of the Element you have set
a transparent PNG for.
It could be fixed by inserting an element with position set to absolute,
resize it to the size of the whole element and set the filter for it. But if
you try to use that for structured semitransparent background you also have
the problem, that AFAIK there is no sizingMethod that behaves like the css
background-feature. Setting it to scale is OK for a homogenous background.
BTW: This function can be called again and again for all images - at least
theoretically, I have not tested it.
Christof
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] IE PNG hack
Hi,
Sorry, I forgot something:
Without background:
jQuery.fn.IEPNGHack = function() {
if (!$.browser.msie) return this;
return this.each(function() {
[...]
});
};
With background:
jQuery.fn.IEPNGHack = function() {
if (!$.browser.msie) return this;
return this.filter('[EMAIL PROTECTED]').each(function() {
[...]
}).end().not('[EMAIL PROTECTED]')
.filter('img')
.not('[EMAIL
PROTECTED]'+jQuery.IEPNGHack.emptygif+']').css({filter:none})
.end()
.end().not('img').each(function() {
[...]
}).end();
};
Of course it should be chainable. I just read Klaus comment which reminded
me ;-)
Christof
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] IE PNG hack
Wow Christof,
that heaps for such a detailed reply and explanation.
It will take me some time fully understand whole thing.
for now though, to get my project moving I've used part of your code to
come up with this, tested
http://www.nemoweb.com.au/jquery/IEPNGHack/take3.html
Feedback is appreciated
--Kush
Christof Donat wrote:
Hi,
I've wrote very simple JQuery IE PNG hack plugin.
Would like to know your professional opinion, to make it better
Great idea.
Generally you can set the filter for the img tag as well, you just need a
fully transparent gif (or png) for the src.
jQuery.fn.IEPNGHack = function() {
if (!$.browser.msie) return false;
this.each(function() {
var t = $(this);
var url = t.attr('src');
t.css({
'filter':
'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+url+',sizingMethod='scale')'
}).attr({src:jQuery.IEPNGHack.emptygif});
});
};
jQuery.IEPNGHack = {
emptygif = 'empty.gif';
}
$(document).ready(function(){
jQuery.IEPNGHack.emptygif =
'http://example.com/design/images/empty.gif';
$('[EMAIL PROTECTED]').IEPNGHack();
});
You might also whant to fix IE for background-images:
jQuery.fn.IEPNGHack = function() {
if (!$.browser.msie) return false;
this.filter('[EMAIL PROTECTED]').each(function() {
var t = $(this);
var url = t.attr('src');
var w = t.width(); // width and height might be implicit
var h = t.height();
t.css({ // have not tested if this works theoretically it
should
filter:
'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+url+',sizingMethod='scale')'
}).attr({src:jQuery.IEPNGHack.emptygif}).width(w).height(h);
}).end().not('[EMAIL PROTECTED]')
.filter('img')
.not('[EMAIL
PROTECTED]'+jQuery.IEPNGHack.emptygif+']').css({filter:none})
.end()
.end().not('img').each(function() {
var t = $(this);
var url = t.css('background-image');
if( url.search(/[.]png$/) = 0 ) t.css({
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+url+',sizingMethod='scale'),
'background-image': 'none'
}); else t.css({filter: 'none'});
});
};
$(document).ready(function(){
$('.hasSomePngSomewhere').IEPNGHack();
});
Note, that this background-image hack only works for 1x1 pixel PNGs. In most
other cases, you won't be able to use the content of the Element you have set
a transparent PNG for.
It could be fixed by inserting an element with position set to absolute,
resize it to the size of the whole element and set the filter for it. But if
you try to use that for structured semitransparent background you also have
the problem, that AFAIK there is no sizingMethod that behaves like the css
background-feature. Setting it to scale is OK for a homogenous background.
BTW: This function can be called again and again for all images - at least
theoretically, I have not tested it.
Christof
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
Cheers,
Kush
Sensory Networks
Web Applications Developer
Direct: + 61 2 8302 2745
Phone: + 61 2 8302 2700
Fax: + 61 2 9475 0316
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] IE PNG hack
thanks for million dollar feedback Klaus :)
I've used Christof's code to come up with cleaner solution
http://www.nemoweb.com.au/jquery/IEPNGHack/take3.html
Klaus Hartl wrote:
Kush Murod schrieb:
Hi guys,
I've wrote very simple JQuery IE PNG hack plugin.
Would like to know your professional opinion, to make it better
http://nemoweb.com.au/jquery/IEPNGHack/
Cheers,
Kush
Instead of creating a $(this) object 9 (!) times think about creating it
once and store it in a variable.
In addition, you're using jquery.fn.foo. This pattern is usually
considered to have the function chainable.
$('img').chainable().foo().bar();
Thus instead of this.each... you would have to use return this each
In this line:
hack += jq.attr('id') ? id=\ + jq.attr('id') + \ : ;
you're duplicating an id, which is supposed to be unique in a document
and if you need valid HTML.
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
Cheers,
Kush
Sensory Networks
Web Applications Developer
Direct: + 61 2 8302 2745
Phone: + 61 2 8302 2700
Fax: + 61 2 9475 0316
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] IE PNG hack
Thanks for the reply Rey I'd rather keep code simpler, by some help from Christof, here is current solution http://www.nemoweb.com.au/jquery/IEPNGHack/take3.html Rey Bango wrote: Hi Kush, This is very cool if you're working with a large number of pngs. I can definitely see the advantage to using it. Since IE7 already fixes this, you might consider refactoring your plugin to bypass IE7. Certainly not to diminish your effort, which I think is really great, but if you're only working with a limited number of pngs, you can also consider Klaus Hartl's fix: http://www.stilbuero.de/2006/03/15/png-alpha-transparency-fast-and-easy/ Rey... Kush Murod wrote: Hi guys, I've wrote very simple JQuery IE PNG hack plugin. Would like to know your professional opinion, to make it better http://nemoweb.com.au/jquery/IEPNGHack/ Cheers, Kush ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ -- Cheers, Kush Sensory Networks Web Applications Developer Direct: + 61 2 8302 2745 Phone: + 61 2 8302 2700 Fax: + 61 2 9475 0316 ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] IE PNG hack
Hi Kush, This is very cool if you're working with a large number of pngs. I can definitely see the advantage to using it. Since IE7 already fixes this, you might consider refactoring your plugin to bypass IE7. Certainly not to diminish your effort, which I think is really great, but if you're only working with a limited number of pngs, you can also consider Klaus Hartl's fix: http://www.stilbuero.de/2006/03/15/png-alpha-transparency-fast-and-easy/ Rey... Kush Murod wrote: Hi guys, I've wrote very simple JQuery IE PNG hack plugin. Would like to know your professional opinion, to make it better http://nemoweb.com.au/jquery/IEPNGHack/ Cheers, Kush ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
