[jQuery] Re: jQuery PNG Fix
Im using this one right now.
http://www.stilbuero.de/2006/03/15/png-alpha-transparency-fast-and-easy/
Glen
On 5/18/07, Devin <[EMAIL PROTECTED]> wrote:
This is a jQuery plugin I created to adapt pngfix.js from Bob Osola to
use the jQuery framework.
If anybody has any further recommendations or improvements, don't
hesitate to let me know. :-)
$(document).ready(function(){
if ($.browser.msie && (document.body.filters)) {
$("img").each(function(i){
var imgName = $.trim(this.src.toLowerCase());
if (imgName.substring(imgName.length-3, imgName.length) ==
"png") {
var imgID = (this.id) ? "id='" + this.id + "' " :
"";
var imgClass = (this.className) ? "class='" +
this.className + "'
" : "";
var imgTitle = (this.title) ? "title='" +
this.title + "' " :
"title='" + this.alt + "' ";
var imgStyle = "display:inline-block;" +
this.style.cssText;
if (this.align == "left") {
imgStyle = "float:left;" + imgStyle;
}
if (this.align == "right") {
imgStyle = "float:right;" + imgStyle;
}
if (this.parentElement.href) {
imgStyle = "cursor:hand;" + imgStyle;
}
this.outerHTML = "";
}
});
}
});
[jQuery] Re: jQuery PNG Fix
Ah, yes, that seems like a really elegant solution. My problem was the
massive amount of transparent PNGs my site was already using. Going
back and applying a class to each image would be less
counter-productive. I can see his implementation breaking in more ways
than just traversing the DOM for img tags and applying it within. I
love the insight though, maybe there's something I can use from Klaus'
solution.
-Devin
On 5/18/07, Glen Lipka <[EMAIL PROTECTED]> wrote:
Im using this one right now.
http://www.stilbuero.de/2006/03/15/png-alpha-transparency-fast-and-easy/
Glen
On 5/18/07, Devin <[EMAIL PROTECTED]> wrote:
>
> This is a jQuery plugin I created to adapt pngfix.js from Bob Osola to
> use the jQuery framework.
>
> If anybody has any further recommendations or improvements, don't
> hesitate to let me know. :-)
>
> $(document).ready(function(){
>
> if ($.browser.msie && (document.body.filters)) {
> $("img").each(function(i){
>var imgName = $.trim(this.src.toLowerCase());
>
>if (imgName.substring(imgName.length-3, imgName.length) ==
"png") {
>var imgID = ( this.id) ? "id='" + this.id + "' " :
"";
>var imgClass = (this.className) ? "class='" +
this.className + "'
> " : "";
>var imgTitle = (this.title) ? "title='" +
this.title + "' " :
> "title='" + this.alt + "' ";
>var imgStyle = "display:inline-block;" +
this.style.cssText;
>
>if (this.align == "left") {
>imgStyle = "float:left;" + imgStyle;
>}
>
>if ( this.align == "right") {
>imgStyle = "float:right;" + imgStyle;
>}
>
>if (this.parentElement.href) {
>imgStyle = "cursor:hand;" + imgStyle;
>}
>
>this.outerHTML = "+ " style=\"" + "width:" + this.width +
"px; height:" +
> this.height + "px;" + imgStyle + ";"
>+
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
> \'" + this.src + "\', sizingMethod='scale');\">";
>}
>});
> }
>
> });
>
>
[jQuery] Re: jQuery PNG Fix
Devin Torres wrote:
Ah, yes, that seems like a really elegant solution. My problem was the
massive amount of transparent PNGs my site was already using. Going
back and applying a class to each image would be less
counter-productive. I can see his implementation breaking in more ways
than just traversing the DOM for img tags and applying it within. I
love the insight though, maybe there's something I can use from Klaus'
solution.
-Devin
The class is not required at all and just an example. You could use
whatever selector suits your needs:
body img {
...
}
-- Klaus
[jQuery] Re: jQuery PNG Fix
Devin wrote: This is a jQuery plugin I created to adapt pngfix.js from Bob Osola to use the jQuery framework. I guess you haven't seen this yet: http://khurshid.com/jquery/iepnghack/ While I still don't like the method-names, I like that it is able to fix both img-elements and background-images. I think its time to get one-and-for-all png fix solution out the door, put it in the jQuery repository and on the plugin list. -- Jörn Zaefferer http://bassistance.de
[jQuery] Re: jQuery PNG Fix
> I think its time to get one-and-for-all png fix solution out the door, > put it in the jQuery repository and on the plugin list. This would be a really useful asset to a lot of people I am sure and would help relieve developers/designers suffering due to IE6. I have had success with the following; 1. For IMG tags; http://homepage.ntlworld.com/bobosola/ There are quite a few ways to get around the 'using PNG images as links' issue if you run into it (jQuery), lastly of which is setting the BG of the PNG to 1%. 2. For CSS; http://www.themaninblue.com/writing/perspective/2004/06/18/ I generally make a separate CSS doc for IE6 which normally has a few of these in them :¬) 3. Gamma settings seem to get added automatically to PNG files from applications like Photoshop resulting in them displaying differently in each browser - whilst I dont know the precise details this guy seems too; http://hsivonen.iki.fi/png-gamma/ - at first I wept inside, but was relived to find using this free little app http://entropymine.com/jason/tweakpng/ which allows you to remove the gamma line added and appears to fix problems with colour. HTH! -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Jörn Zaefferer Sent: 19 May 2007 12:25 To: jquery-en@googlegroups.com Subject: [jQuery] Re: jQuery PNG Fix Devin wrote: > This is a jQuery plugin I created to adapt pngfix.js from Bob Osola to > use the jQuery framework. > I guess you haven't seen this yet: http://khurshid.com/jquery/iepnghack/ While I still don't like the method-names, I like that it is able to fix both img-elements and background-images. I think its time to get one-and-for-all png fix solution out the door, put it in the jQuery repository and on the plugin list. -- Jörn Zaefferer http://bassistance.de
[jQuery] Re: jQuery PNG Fix
> This is a jQuery plugin I created to adapt pngfix.js from Bob Osola to
> use the jQuery framework.
Sorry forgot to mention nice1 adapting Bobs code, you noticed any
performance increases? I've found using PNG techniques on more than a few
IMG tags results in pages loading, then, images being updated to display
correctly and doesn't look too hot for those poor IE6 users.
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Devin
Sent: 19 May 2007 02:21
To: jQuery (English)
Subject: [jQuery] jQuery PNG Fix
This is a jQuery plugin I created to adapt pngfix.js from Bob Osola to
use the jQuery framework.
If anybody has any further recommendations or improvements, don't
hesitate to let me know. :-)
$(document).ready(function(){
if ($.browser.msie && (document.body.filters)) {
$("img").each(function(i){
var imgName = $.trim(this.src.toLowerCase());
if (imgName.substring(imgName.length-3, imgName.length) ==
"png") {
var imgID = (this.id) ? "id='" + this.id + "' " :
"";
var imgClass = (this.className) ? "class='" +
this.className + "'
" : "";
var imgTitle = (this.title) ? "title='" + this.title
+ "' " :
"title='" + this.alt + "' ";
var imgStyle = "display:inline-block;" +
this.style.cssText;
if (this.align == "left") {
imgStyle = "float:left;" + imgStyle;
}
if (this.align == "right") {
imgStyle = "float:right;" + imgStyle;
}
if (this.parentElement.href) {
imgStyle = "cursor:hand;" + imgStyle;
}
this.outerHTML = "";
}
});
}
});
[jQuery] Re: jQuery PNG Fix
On 5/19/07, Toby <[EMAIL PROTECTED]> wrote: > I think its time to get one-and-for-all png fix solution out the door, > put it in the jQuery repository and on the plugin list. This would be a really useful asset to a lot of people I am sure and would help relieve developers/designers suffering due to IE6. I have had success with the following; 1. For IMG tags; http://homepage.ntlworld.com/bobosola/ There are quite a few ways to get around the 'using PNG images as links' issue if you run into it (jQuery), lastly of which is setting the BG of the PNG to 1%. 2. For CSS; http://www.themaninblue.com/writing/perspective/2004/06/18/ I generally make a separate CSS doc for IE6 which normally has a few of these in them :¬) 3. Gamma settings seem to get added automatically to PNG files from applications like Photoshop resulting in them displaying differently in each browser - whilst I don't know the precise details this guy seems too; http://hsivonen.iki.fi/png-gamma/ - at first I wept inside, but was relived to find using this free little app http://entropymine.com/jason/tweakpng/ which allows you to remove the gamma line added and appears to fix problems with colour. HTH! -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Jörn Zaefferer Sent: 19 May 2007 12:25 To: jquery-en@googlegroups.com Subject: [jQuery] Re: jQuery PNG Fix Devin wrote: > This is a jQuery plugin I created to adapt pngfix.js from Bob Osola to > use the jQuery framework. > I guess you haven't seen this yet: http://khurshid.com/jquery/iepnghack/ While I still don't like the method-names, I like that it is able to fix both img-elements and background-images. I think its time to get one-and-for-all png fix solution out the door, put it in the jQuery repository and on the plugin list. -- Jörn Zaefferer http://bassistance.de Ok, so is there a single jQuery plugin to include? Im starting to get confused. :) Do these fixes fix the problem in IE using FadeIn() where it becomes black? Glen
[jQuery] Re: jQuery PNG Fix
I suppose a selector such as this is faster than injecting HTML, right?
On 5/19/07, Klaus Hartl <[EMAIL PROTECTED]> wrote:
Devin Torres wrote:
>
> Ah, yes, that seems like a really elegant solution. My problem was the
> massive amount of transparent PNGs my site was already using. Going
> back and applying a class to each image would be less
> counter-productive. I can see his implementation breaking in more ways
> than just traversing the DOM for img tags and applying it within. I
> love the insight though, maybe there's something I can use from Klaus'
> solution.
>
> -Devin
The class is not required at all and just an example. You could use
whatever selector suits your needs:
body img {
...
}
-- Klaus
[jQuery] Re: jQuery PNG Fix
On 5/19/07, Glen Lipka <[EMAIL PROTECTED]> wrote: Ok, so is there a single jQuery plugin to include? Im starting to get confused. :) Do these fixes fix the problem in IE using FadeIn() where it becomes black? Glen No single best-of plugin yet and no these do not fix the IE7 issues. :/ There isn't a fix for that, yet... at least not that I've come across. -- Brandon Aaron
[jQuery] Re: jQuery PNG Fix
what exactly are the 'IE7' issues ? weepy On May 20, 12:32 am, "Brandon Aaron" <[EMAIL PROTECTED]> wrote: > On 5/19/07, Glen Lipka <[EMAIL PROTECTED]> wrote: > > > Ok, so is there a single jQuery plugin to include? > > Im starting to get confused. :) > > Do these fixes fix the problem in IE using FadeIn() where it becomes black? > > > Glen > > No single best-of plugin yet and no these do not fix the IE7 issues. > :/ There isn't a fix for that, yet... at least not that I've come > across. > > -- > Brandon Aaron
[jQuery] Re: jQuery PNG Fix
If you have a PNG-24 with some transparency on it.
Then use $("img.png").fadeIn("slow")
It will get this horrible black outline where the transparency in the PNG
should be.
I can try and create an example later today.
Glen
On 5/20/07, weepy <[EMAIL PROTECTED]> wrote:
what exactly are the 'IE7' issues ?
weepy
On May 20, 12:32 am, "Brandon Aaron" <[EMAIL PROTECTED]> wrote:
> On 5/19/07, Glen Lipka <[EMAIL PROTECTED]> wrote:
>
> > Ok, so is there a single jQuery plugin to include?
> > Im starting to get confused. :)
> > Do these fixes fix the problem in IE using FadeIn() where it becomes
black?
>
> > Glen
>
> No single best-of plugin yet and no these do not fix the IE7 issues.
> :/ There isn't a fix for that, yet... at least not that I've come
> across.
>
> --
> Brandon Aaron
[jQuery] Re: jQuery PNG Fix
In addition to that with some PNGs, if you use the zoom feature in IE7
the same black outline will show up.
--
Brandon Aaron
On 5/20/07, Glen Lipka <[EMAIL PROTECTED]> wrote:
If you have a PNG-24 with some transparency on it.
Then use $("img.png").fadeIn("slow")
It will get this horrible black outline where the transparency in the PNG
should be.
I can try and create an example later today.
Glen
On 5/20/07, weepy <[EMAIL PROTECTED]> wrote:
>
> what exactly are the 'IE7' issues ?
>
> weepy
>
>
> On May 20, 12:32 am, "Brandon Aaron" < [EMAIL PROTECTED]> wrote:
> > On 5/19/07, Glen Lipka <[EMAIL PROTECTED]> wrote:
> >
> > > Ok, so is there a single jQuery plugin to include?
> > > Im starting to get confused. :)
> > > Do these fixes fix the problem in IE using FadeIn() where it becomes
black?
> >
> > > Glen
> >
> > No single best-of plugin yet and no these do not fix the IE7 issues.
> > :/ There isn't a fix for that, yet... at least not that I've come
> > across.
> >
> > --
> > Brandon Aaron
>
>
[jQuery] Re: jQuery PNG Fix
Hi guys, I've updated the plugin: * renamed it to pngfix(); * added new function to reset applied hack pngunfix(); http://khurshid.com/jquery/iepnghack/ Your feedback is appreciated --Kush Jörn Zaefferer wrote, On 5/19/2007 9:24 PM: Devin wrote: This is a jQuery plugin I created to adapt pngfix.js from Bob Osola to use the jQuery framework. I guess you haven't seen this yet: http://khurshid.com/jquery/iepnghack/ While I still don't like the method-names, I like that it is able to fix both img-elements and background-images. I think its time to get one-and-for-all png fix solution out the door, put it in the jQuery repository and on the plugin list.
[jQuery] Re: jQuery PNG Fix
Kush Murod wrote: Hi guys, I've updated the plugin: * renamed it to pngfix(); * added new function to reset applied hack pngunfix(); http://khurshid.com/jquery/iepnghack/ Your feedback is appreciated Ah, great, thanks for the update and renaming. Now I can replace tooltip's internal pngfix stuff with your plugin and make it optional. -- Jörn Zaefferer http://bassistance.de
[jQuery] Re: jQuery PNG Fix
Kush Murod wrote: http://khurshid.com/jquery/iepnghack/ Your feedback is appreciated I've added your plugin to the list: http://docs.jquery.com/Plugins#jQuery_Extensions Feel free to change title and description, I'm sure you can come up with something better. I've added "(pngfix/pnghack)" to improve the results a textsearch yields on that page. -- Jörn Zaefferer http://bassistance.de
[jQuery] Re: jQuery PNG Fix
Ah yes it seems to assume that the transparency is either 0 or 1if
the element opacity is not 1
Not sure how to fix this.
On May 20, 3:28 pm, "Glen Lipka" <[EMAIL PROTECTED]> wrote:
> If you have a PNG-24 with some transparency on it.
> Then use $("img.png").fadeIn("slow")
> It will get this horrible black outline where the transparency in the PNG
> should be.
> I can try and create an example later today.
>
> Glen
>
> On 5/20/07, weepy <[EMAIL PROTECTED]> wrote:
>
>
>
> > what exactly are the 'IE7' issues ?
>
> > weepy
>
> > On May 20, 12:32 am, "Brandon Aaron" <[EMAIL PROTECTED]> wrote:
> > > On 5/19/07, Glen Lipka <[EMAIL PROTECTED]> wrote:
>
> > > > Ok, so is there a single jQuery plugin to include?
> > > > Im starting to get confused. :)
> > > > Do these fixes fix the problem in IE using FadeIn() where it becomes
> > black?
>
> > > > Glen
>
> > > No single best-of plugin yet and no these do not fix the IE7 issues.
> > > :/ There isn't a fix for that, yet... at least not that I've come
> > > across.
>
> > > --
> > > Brandon Aaron
[jQuery] Re: jQuery PNG Fix
Kush,
Go ahead and add Study Breaks Magazine (http://studybreaks.com/) to
your site's using this plugin list. :-) It seems my original question
spurred everyone into a frenzy to reinterest people in the problem
again. I'll be working on your plugin from now on, and submit any
changes I make back to you.
-Devin
On 5/21/07, weepy <[EMAIL PROTECTED]> wrote:
Ah yes it seems to assume that the transparency is either 0 or 1if
the element opacity is not 1
Not sure how to fix this.
On May 20, 3:28 pm, "Glen Lipka" <[EMAIL PROTECTED]> wrote:
> If you have a PNG-24 with some transparency on it.
> Then use $("img.png").fadeIn("slow")
> It will get this horrible black outline where the transparency in the PNG
> should be.
> I can try and create an example later today.
>
> Glen
>
> On 5/20/07, weepy <[EMAIL PROTECTED]> wrote:
>
>
>
> > what exactly are the 'IE7' issues ?
>
> > weepy
>
> > On May 20, 12:32 am, "Brandon Aaron" <[EMAIL PROTECTED]> wrote:
> > > On 5/19/07, Glen Lipka <[EMAIL PROTECTED]> wrote:
>
> > > > Ok, so is there a single jQuery plugin to include?
> > > > Im starting to get confused. :)
> > > > Do these fixes fix the problem in IE using FadeIn() where it becomes
> > black?
>
> > > > Glen
>
> > > No single best-of plugin yet and no these do not fix the IE7 issues.
> > > :/ There isn't a fix for that, yet... at least not that I've come
> > > across.
>
> > > --
> > > Brandon Aaron
[jQuery] Re: jQuery PNG Fix
thanks for this excellent plugin!
[jQuery] Re: jQuery PNG Fix
Hi Devin,
Good to hear, and thank you all for your help and support :)
--Kush
Devin Torres wrote, On 5/21/2007 10:15 PM:
Kush,
Go ahead and add Study Breaks Magazine (http://studybreaks.com/) to
your site's using this plugin list. :-) It seems my original question
spurred everyone into a frenzy to reinterest people in the problem
again. I'll be working on your plugin from now on, and submit any
changes I make back to you.
-Devin
On 5/21/07, weepy <[EMAIL PROTECTED]> wrote:
Ah yes it seems to assume that the transparency is either 0 or 1if
the element opacity is not 1
Not sure how to fix this.
On May 20, 3:28 pm, "Glen Lipka" <[EMAIL PROTECTED]> wrote:
> If you have a PNG-24 with some transparency on it.
> Then use $("img.png").fadeIn("slow")
> It will get this horrible black outline where the transparency in
the PNG
> should be.
> I can try and create an example later today.
>
> Glen
>
> On 5/20/07, weepy <[EMAIL PROTECTED]> wrote:
>
>
>
> > what exactly are the 'IE7' issues ?
>
> > weepy
>
> > On May 20, 12:32 am, "Brandon Aaron" <[EMAIL PROTECTED]>
wrote:
> > > On 5/19/07, Glen Lipka <[EMAIL PROTECTED]> wrote:
>
> > > > Ok, so is there a single jQuery plugin to include?
> > > > Im starting to get confused. :)
> > > > Do these fixes fix the problem in IE using FadeIn() where it
becomes
> > black?
>
> > > > Glen
>
> > > No single best-of plugin yet and no these do not fix the IE7
issues.
> > > :/ There isn't a fix for that, yet... at least not that I've come
> > > across.
>
> > > --
> > > Brandon Aaron
