Re: [jQuery] Another PNG transparency thingy for IE
Any chance of a URL with an example of this being used? Thanks :) Luke -- View this message in context: http://www.nabble.com/Another-PNG-transparency-thingy-for-IE-tf3295297.html#a9178908 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Another PNG transparency thingy for IE
i can second that - a sample page would be of great help.
thanks in advance!
s
On 26/02/07, Weaver, Scott [EMAIL PROTECTED] wrote:
I have seen a number requests and solutions for fixing PNG image
transparency in IE on the list. However, I have never seen one that
addresses transparency of PNGs when they are used as backgrounds. I
prefer using elements plus background images for my icons as opposed to
image tags so I can use style sheets to switch icon sets out. So,
needing to support PNG transparencies in backgrounds I came up with two
possible solutions.
Non-jQuery solution:
I build upon what Klaus already has for supporting transparent PNG
images
(http://www.stilbuero.de/2006/03/15/png-alpha-transparency-fast-and-easy
/)
div.png {
background-image: expression(
bg = this.runtimeStyle.backgroundImage.length 0 ?
this.runtimeStyle.backgroundImage : this.currentStyle.backgroundImage,
this.runtimeStyle.backgroundImage = none,
src = bg.substring(5,bg.length-2),
this.runtimeStyle.filter =
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + src + ',
sizingMethod='scale')
);
}
Problems with this approach (yeah, like you are surprised)
1. It can become inefficient. I my case, my icons appear in an icon bar
that is shown/hidden via a $.slideToggle() effect. It is initially
hidden, and is shown through a button event. The above code actually
executes twice the first time the icon bar is displayed. Then, once for
each time it displayed after the initial call to display. IMOHO, this
is less than efficient, then again I would expect nothing less from IE.
2. The repeated script calls of the CSS expression made the slide
animation choppy.
The jQuery solution:
The jQuery solution was actually my first solution but I wanted try to
follow Klaus' example using just CSS. Unfortunately, the pure CCS
solution wasn't working for me as well as I felt it should, so I
reverted back to using my plugin.
jQuery.fn.fixPngBackgrounds = function() {
if($.browser.msie)
{
this.each(function () {
var currentBkg = this.currentStyle.backgroundImage;
if(currentBkg currentBkg.length 0)
{
this.runtimeStyle.backgroundImage = none; // Remove
the existing background
var urlOnly = currentBkg.substring(5,
(currentBkg.length-2)); // Strip 'url( and ')'
this.runtimeStyle.filter =
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + urlOnly +
', sizingMethod='scale')
}
});
}
}
And it's easy to use, just $(.png).fixPngBackgrounds()
I just came up with this today and it appears to be working quite well.
However, any suggestion on improvements or possible gotchas regarding
either approach is more than welcome.
Regards,
-scott
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
dress up. leave a false name. be legendary.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Another PNG transparency thingy for IE
I am currently working on building a blog to house these kinds of code odds and ends. Will ping bing back when it is up. -scott -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [-Stash-] Sent: Tuesday, February 27, 2007 5:07 AM To: discuss@jquery.com Subject: Re: [jQuery] Another PNG transparency thingy for IE Any chance of a URL with an example of this being used? Thanks :) Luke -- View this message in context: http://www.nabble.com/Another-PNG- transparency-thingy-for-IE-tf3295297.html#a9178908 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Another PNG transparency thingy for IE
On 27/02/07, Weaver, Scott [EMAIL PROTECTED] wrote: I am currently working on building a blog to house these kinds of code odds and ends. Will ping bing back when it is up. -scott You'll ping the list when you have the PNG blog up then? There seem to be several solutions to PNG transparency (some for background image, some for img, CSS only, plugin activated etc), which can be hard to keep track of. It does seem like PNG Alpha Transparency in IE7 was just a hack job as it interferes with opacity filter effects (which it shouldn't) - i.e. ClearType issues with fadeIn/out. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [-Stash-] Sent: Tuesday, February 27, 2007 5:07 AM To: discuss@jquery.com Subject: Re: [jQuery] Another PNG transparency thingy for IE Any chance of a URL with an example of this being used? Thanks :) Luke -- View this message in context: http://www.nabble.com/Another-PNG- transparency-thingy-for-IE-tf3295297.html#a9178908 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Another PNG transparency thingy for IE
Yeah, that's what I meant ;) It was early when I wrote that. Sorry for the confusion/incoherency. -scott -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Sam Collett Sent: Tuesday, February 27, 2007 10:43 AM To: jQuery Discussion. Subject: Re: [jQuery] Another PNG transparency thingy for IE On 27/02/07, Weaver, Scott [EMAIL PROTECTED] wrote: I am currently working on building a blog to house these kinds of code odds and ends. Will ping bing back when it is up. -scott You'll ping the list when you have the PNG blog up then? There seem to be several solutions to PNG transparency (some for background image, some for img, CSS only, plugin activated etc), which can be hard to keep track of. It does seem like PNG Alpha Transparency in IE7 was just a hack job as it interferes with opacity filter effects (which it shouldn't) - i.e. ClearType issues with fadeIn/out. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [-Stash-] Sent: Tuesday, February 27, 2007 5:07 AM To: discuss@jquery.com Subject: Re: [jQuery] Another PNG transparency thingy for IE Any chance of a URL with an example of this being used? Thanks :) Luke -- View this message in context: http://www.nabble.com/Another-PNG- transparency-thingy-for-IE-tf3295297.html#a9178908 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
[jQuery] Another PNG transparency thingy for IE
I have seen a number requests and solutions for fixing PNG image
transparency in IE on the list. However, I have never seen one that
addresses transparency of PNGs when they are used as backgrounds. I
prefer using elements plus background images for my icons as opposed to
image tags so I can use style sheets to switch icon sets out. So,
needing to support PNG transparencies in backgrounds I came up with two
possible solutions.
Non-jQuery solution:
I build upon what Klaus already has for supporting transparent PNG
images
(http://www.stilbuero.de/2006/03/15/png-alpha-transparency-fast-and-easy
/)
div.png {
background-image: expression(
bg = this.runtimeStyle.backgroundImage.length 0 ?
this.runtimeStyle.backgroundImage : this.currentStyle.backgroundImage,
this.runtimeStyle.backgroundImage = none,
src = bg.substring(5,bg.length-2),
this.runtimeStyle.filter =
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + src + ',
sizingMethod='scale')
);
}
Problems with this approach (yeah, like you are surprised)
1. It can become inefficient. I my case, my icons appear in an icon bar
that is shown/hidden via a $.slideToggle() effect. It is initially
hidden, and is shown through a button event. The above code actually
executes twice the first time the icon bar is displayed. Then, once for
each time it displayed after the initial call to display. IMOHO, this
is less than efficient, then again I would expect nothing less from IE.
2. The repeated script calls of the CSS expression made the slide
animation choppy.
The jQuery solution:
The jQuery solution was actually my first solution but I wanted try to
follow Klaus' example using just CSS. Unfortunately, the pure CCS
solution wasn't working for me as well as I felt it should, so I
reverted back to using my plugin.
jQuery.fn.fixPngBackgrounds = function() {
if($.browser.msie)
{
this.each(function () {
var currentBkg = this.currentStyle.backgroundImage;
if(currentBkg currentBkg.length 0)
{
this.runtimeStyle.backgroundImage = none; // Remove
the existing background
var urlOnly = currentBkg.substring(5,
(currentBkg.length-2)); // Strip 'url( and ')'
this.runtimeStyle.filter =
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + urlOnly +
', sizingMethod='scale')
}
});
}
}
And it's easy to use, just $(.png).fixPngBackgrounds()
I just came up with this today and it appears to be working quite well.
However, any suggestion on improvements or possible gotchas regarding
either approach is more than welcome.
Regards,
-scott
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
