So basically I am trying to reproduce the Twin Helix "IE PNG Fix v1.0
RC4" or more like to fine tune it to fit my needs.
The JS:
PngFix.Backgrounds = function() {
elements = $A(document.getElementsByTagName("*"));
elements.each(function(element) {
element = $(element);
if ((/\.png/i).test(element.getStyle("background-image"))) {
alert(element.getStyle("background-position"));
element.backroundImage = element.getStyle("background-
image").replace(/url\(\"/,"").replace(/\"\)/,"");
PngFix.Filter(element, element.backroundImage);
};
});
};
The HTML:
<div class="png" style="width: 200px; height:
200px;">
<p>Div Content</p>
</div>
The CSS (the same applies for shorthand as well):
.png {
background-repeat: no-repeat;
background-position: 10px 10px;
background-image: url("images/png1.png");
}
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Ken Snyder
2007-May-07 16:47 UTC
Re: getStyle("background-position") is always "undefined"
joneff wrote:> So basically I am trying to reproduce the Twin Helix "IE PNG Fix v1.0 > RC4" or more like to fine tune it to fit my needs. > > The JS: > > PngFix.Backgrounds = function() { > elements = $A(document.getElementsByTagName("*")); > elements.each(function(element) { > element = $(element); > if ((/\.png/i).test(element.getStyle("background-image"))) { > alert(element.getStyle("background-position")); > element.backroundImage = element.getStyle("background- > image").replace(/url\(\"/,"").replace(/\"\)/,""); > PngFix.Filter(element, element.backroundImage); > }; > }); > }; > > The HTML: > <div class="png" style="width: 200px; height: 200px;"> > <p>Div Content</p> > </div> > > The CSS (the same applies for shorthand as well): > .png { > background-repeat: no-repeat; > background-position: 10px 10px; > background-image: url("images/png1.png"); > } >I recently tried out that same PNG fix and found that after applied the background position was always ignored. What happens if you change element.getStyle() to "element.style.backgroundPosition" ? I''d be interested in discovering what is going on here too. --Ken --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
On May 7, 7:47 pm, Ken Snyder <kendsny...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> joneff wrote: > > So basically I am trying to reproduce the Twin Helix "IE PNG Fix v1.0 > > RC4" or more like to fine tune it to fit my needs. > > > The JS: > > > PngFix.Backgrounds = function() { > > elements = $A(document.getElementsByTagName("*")); > > elements.each(function(element) { > > element = $(element); > > if ((/\.png/i).test(element.getStyle("background-image"))) { > > alert(element.getStyle("background-position")); > > element.backroundImage = element.getStyle("background- > > image").replace(/url\(\"/,"").replace(/\"\)/,""); > > PngFix.Filter(element, element.backroundImage); > > }; > > }); > > }; > > > The HTML: > > <div class="png" style="width: 200px; height: 200px;"> > > <p>Div Content</p> > > </div> > > > The CSS (the same applies for shorthand as well): > > .png { > > background-repeat: no-repeat; > > background-position: 10px 10px; > > background-image: url("images/png1.png"); > > } > > I recently tried out that same PNG fix and found that after applied the > background position was always ignored. What happens if you change > element.getStyle() to "element.style.backgroundPosition" ? I''d be > interested in discovering what is going on here too. > > --KenOn May 7, 7:47 pm, Ken Snyder <kendsny...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> joneff wrote: > > So basically I am trying to reproduce the Twin Helix "IE PNG Fix v1.0 > > RC4" or more like to fine tune it to fit my needs. > > > The JS: > > > PngFix.Backgrounds = function() { > > elements = $A(document.getElementsByTagName("*")); > > elements.each(function(element) { > > element = $(element); > > if ((/\.png/i).test(element.getStyle("background-image"))) { > > alert(element.getStyle("background-position")); > > element.backroundImage = element.getStyle("background- > > image").replace(/url\(\"/,"").replace(/\"\)/,""); > > PngFix.Filter(element, element.backroundImage); > > }; > > }); > > }; > > > The HTML: > > <div class="png" style="width: 200px; height: 200px;"> > > <p>Div Content</p> > > </div> > > > The CSS (the same applies for shorthand as well): > > .png { > > background-repeat: no-repeat; > > background-position: 10px 10px; > > background-image: url("images/png1.png"); > > } > > I recently tried out that same PNG fix and found that after applied the > background position was always ignored. What happens if you change > element.getStyle() to "element.style.backgroundPosition" ? I''d be > interested in discovering what is going on here too. > > --KenI tried to access the background position in various ways and it always returned either empty string (string.length = 0) or undefined. Off topic: After doing some reading on the subject (filters and background position) it turned out that when applying filters (e.g. progid:DXImageTransform.Microsoft.AlphaImageLoader) the MS style it always positions the background in the top left corner. Not to mention that if no sizing method is specified width and height of the element are ignored. Anyway I still can''t get it why I can''t access the "background- position" style. Clues? -- joneff --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Ken Snyder
2007-Jun-06 17:37 UTC
Re: getStyle("background-position") is always "undefined"
joneff wrote:> Anyway I still can''t get it why I can''t access the "background- > position" style. Clues? >I finally resolved this: It seems that applying the Microsoft alpha filter in this way prohibits the background image from being positioned or repeated. It is listed with several other known limitations for this method of png replacement for IE6: http://www.twinhelix.com/css/iepngfix/demo/ There, Angus Turnbull suggests using a <div> container dedicated to that background image to allow positioning. Wouldn''t it be nice if IE6 just died?? --Ken Snyder --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---