dynamically adding a filter (solved)
in [JavaScript]
|
Prev: IE versions of moz transform
Next: FAQ Topic - How do I get my browser to report javascript errors? (2010-01-11)
From: Andrew Poulos on 10 Jan 2010 18:52 It appears that, at least in IE 6, you cannot add a filter by using elem.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 10; unless a corresponding filter exists on the style applied to elem eg. #elem { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); } So to dynamically add, and subsequently modify, a "new" filter I had to first modify the elem.style.filter and add the "new" filter to it. Andrew Poulos
From: JR on 10 Jan 2010 20:15 On Jan 10, 9:52 pm, Andrew Poulos <ap_p...(a)hotmail.com> wrote: > It appears that, at least in IE 6, you cannot add a filter by using > > elem.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 10; I think that it should be: if (elem.filters) { elem.style.filter = "alpha(opacity=10)"; } > unless a corresponding filter exists on the style applied to elem That is not a correct statement, because the problem is caused by the notorious 'hasLayout bug': http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx The article begins with "There are several bugs in Internet Explorer that can be worked around by forcing "a layout" (an IE internal data structure) on an element [...] Most users are not aware of the implications of having "a layout" applied to an element." So the above example should be written like that: if (elem.filters) { // avoid IE's hasLayout bug: normal zoom will // force element's hasLayout prop equals -1 (true). if (!(elem.currentStyle.hasLayout)) { elem.style.zoom = 1; } elem.style.filter = "alpha(opacity=10)"; } > eg. > > #elem { > filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); > > } For IE 8, that should be: -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; For IE7: filter: alpha(opacity=100); > So to dynamically add, and subsequently modify, a "new" filter I had to > first modify the elem.style.filter and add the "new" filter to it. It won't be necessary if you take care of the 'hasLayout bug'. Cheers, JR
From: Andrew Poulos on 10 Jan 2010 21:56 On 11/01/2010 12:15 PM, JR wrote: > On Jan 10, 9:52 pm, Andrew Poulos<ap_p...(a)hotmail.com> wrote: >> It appears that, at least in IE 6, you cannot add a filter by using >> >> elem.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 10; > > I think that it should be: > > if (elem.filters) { elem.style.filter = "alpha(opacity=10)"; } Doing so will overwrite any existing filters. >> unless a corresponding filter exists on the style applied to elem > > That is not a correct statement, because the problem is caused by the > notorious 'hasLayout bug': > http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx The elem in question is an image and has both a width and a height specified ie. it has layout. > The article begins with "There are several bugs in Internet Explorer > that can be worked around by forcing "a layout" (an IE internal data > structure) on an element [...] Most users are not aware of the > implications of having "a layout" applied to an element." > > So the above example should be written like that: > > if (elem.filters) { > // avoid IE's hasLayout bug: normal zoom will > // force element's hasLayout prop equals -1 (true). > if (!(elem.currentStyle.hasLayout)) { elem.style.zoom = 1; } > elem.style.filter = "alpha(opacity=10)"; > } > > >> eg. >> >> #elem { >> filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); >> >> } > > For IE 8, that should be: > -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; > > For IE7: > filter: alpha(opacity=100); > > >> So to dynamically add, and subsequently modify, a "new" filter I had to >> first modify the elem.style.filter and add the "new" filter to it. > > It won't be necessary if you take care of the 'hasLayout bug'. 1. You are adding the filter to elem.style.filter??? 2. As has been pointed out to me, if there's an existing filter(s) modifying elem.style.filter will "delete" it. 3. I don't think there's any way to test for -ms-filter support. 4. In testing on IE 6, 7, and 8 (including compatibility mode) #elem { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); } works fine. Andrew Poulos
From: JR on 11 Jan 2010 20:29
On Jan 11, 12:56 am, Andrew Poulos <ap_p...(a)hotmail.com> wrote: > On 11/01/2010 12:15 PM, JR wrote: > > > On Jan 10, 9:52 pm, Andrew Poulos<ap_p...(a)hotmail.com> wrote: > >> It appears that, at least in IE 6, you cannot add a filter by using > > >> elem.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 10; > > > I think that it should be: > > > if (elem.filters) { elem.style.filter = "alpha(opacity=10)"; } > > Doing so will overwrite any existing filters. > > >> unless a corresponding filter exists on the style applied to elem Okay. Sorry. I understood your point incorrectly. Instead of adding a new filter, I commented about setting the Opacity filter. "elem.filters.item(filtername)" implies that there's a filtername in the filters collection. So, you have to add the filtername to that collection before accessing it by means of the item() method. There are many examples at: http://msdn.microsoft.com/en-us/library/ms532847(VS.85).aspx#Scripting_Filters > > That is not a correct statement, because the problem is caused by the > > notorious 'hasLayout bug': > >http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx > > The elem in question is an image and has both a width and a height > specified ie. it has layout. > > > > > > > The article begins with "There are several bugs in Internet Explorer > > that can be worked around by forcing "a layout" (an IE internal data > > structure) on an element [...] Most users are not aware of the > > implications of having "a layout" applied to an element." > > > So the above example should be written like that: > > > if (elem.filters) { > > // avoid IE's hasLayout bug: normal zoom will > > // force element's hasLayout prop equals -1 (true). > > if (!(elem.currentStyle.hasLayout)) { elem.style.zoom = 1; } > > elem.style.filter = "alpha(opacity=10)"; > > } > > >> eg. > > >> #elem { > >> filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); > > >> } > > > For IE 8, that should be: > > -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; > > > For IE7: > > filter: alpha(opacity=100); > > >> So to dynamically add, and subsequently modify, a "new" filter I had to > >> first modify the elem.style.filter and add the "new" filter to it. > > > It won't be necessary if you take care of the 'hasLayout bug'. > > 1. You are adding the filter to elem.style.filter??? No, as commented above. > 2. As has been pointed out to me, if there's an existing filter(s) > modifying elem.style.filter will "delete" it. You're right. > 3. I don't think there's any way to test for -ms-filter support. Perhaps, you might test: if (el.filters.item('DXImageTransform.Microsoft.alpha').opacity) {} > > 4. In testing on IE 6, 7, and 8 (including compatibility mode) > #elem { > filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);} > > works fine. Okay, but the above MSDN article states: "In Internet Explorer 8 mode, filters must be prefixed with "-ms-" and the PROGID must be in single or double quotes to make sure Internet Explorer 8 renders the filters properly. The -ms-filter Attribute is an extension to CSS. This syntax will allow other CSS parsers to skip the value of this unknown property completely and safely.It also avoids future name clashes with other CSS parsers." Cheers, JR |