[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
[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
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, 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 = span + imgID + imgClass +
imgTitle
+ style=\ + width: + this.width +
px; height: +
this.height + px; + imgStyle + ;
+
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
\' + this.src + \', sizingMethod='scale');\/span;
}
});
}
});
[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 = span + imgID + imgClass +
imgTitle
+ style=\ + width: + this.width + px;
height: +
this.height + px; + imgStyle + ;
+
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
\' + this.src + \', sizingMethod='scale');\/span;
}
});
}
});
[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
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 = span + imgID + imgClass +
imgTitle
+ style=\ + width: + this.width +
px; height: +
this.height + px; + imgStyle + ;
+ filter:progid:
DXImageTransform.Microsoft.AlphaImageLoader(src=
\' + this.src + \', sizingMethod='scale');\/span;
}
});
}
});
