get opacity value [JavaScript]

Prev: Google Closure: The Evil Parts
Next: Encapsulation and js, html, css

From: Thomas 'PointedEars' Lahn on 20 Nov 2009 14:44

Garrett Smith wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> How do I get the opacity value in IE where the opacity is set via a
>>> filter eg.
>>>
>>> <img style="filter:alpha(opacity=12);" src="... >
>>
>> imgRef.filters.item("alpha").opacity
>>
>> Garrett is wrong, STFW for "filter:alpha(opacity" would have helped.
>> The MSDN Library entry is the first hit here:

JFYI: I said that you were wrong because you said Google would not be our
friend here. That is, Google *Search*, _not_ Code.

> That suggestion will result in error when the filter object is
> undefined or uses the recommended DXImageTransform filter instead of
> just alpha.
>
> This is a problem because it is undefined when not set:

It was the solution for this specific example, of course.

> QUick example:
> javascript: alert(document.body.style.filters.item("alpha"))

Nobody set the filter on the BODY element here.

> It is a more significant problem when the advice on MSDN is followed:
>> <http://msdn.microsoft.com/en-us/library/ms532967(VS.85).aspx>
>>
> [...]
>> It contains a link to "Scripting Filters" at the bottom.
>
> http://msdn.microsoft.com/en-us/library/ms532847(VS.85,loband).aspx
>
> Suggests using the DXImageTransform filter instead. Example:
>
> el.filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
>
> That works great.

It does not work at all in older IEs (without DirectX support), while the
Alpha filter is backwards-compatible. The additional features of the
DirectX filter are also seldom used.

> The problem is when trying to read the filter using
> the approach el.filters.item("alpha").opacity.
>
> The result is an error is produced.

Borken as designed.

> There are two alpha filters:

Yes, one uses DirectX Image Transformation (DXImageTransform) and the other
one does not.

> filter: alpha(opacity = 10);
> filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 10);
>
> The latter is being changed now to follow CSS 2.1 Syntax:
> -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=52)"
>
> http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-
extensions.aspx

OMG.

> <sarcasm>
> Thanks, Microsoft. I really needed one more way to set the filter.
> </sarcasm>

ACK

> Conclusion:
> By parsing the filter string, either type of alpha filter can be read.

To conclude that therefore this would be the best way is a fallacy, though.

PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)

From: Garrett Smith on 20 Nov 2009 17:16

Thomas 'PointedEars' Lahn wrote:
> Garrett Smith wrote:
>
>> Thomas 'PointedEars' Lahn wrote:
>>> Andrew Poulos wrote:
>>>> How do I get the opacity value in IE where the opacity is set via a
>>>> filter eg.
>>>>
>>>> <img style="filter:alpha(opacity=12);" src="... >
>>> imgRef.filters.item("alpha").opacity
>>>
>>> Garrett is wrong, STFW for "filter:alpha(opacity" would have helped.
>>> The MSDN Library entry is the first hit here:
>
> JFYI: I said that you were wrong because you said Google would not be our
> friend here. That is, Google *Search*, _not_ Code.
>

Ah, got it. It seemed like you were suggesting that the proposed
solution was wrong.

However, the MSDN link you got from the search result doesn't mention
filter: alpha, but the DXImageTransform filter instead.

>> That suggestion will result in error when the filter object is
>> undefined or uses the recommended DXImageTransform filter instead of
>> just alpha.
>>
>> This is a problem because it is undefined when not set:
>
> It was the solution for this specific example, of course.
>
>> QUick example:
>> javascript: alert(document.body.style.filters.item("alpha"))
>
> Nobody set the filter on the BODY element here.
>
Right. So BODY has no filter. When reading el.filters.item("alpha") off
an element that has no alpha filter, an error is produced.

(Should have been:
javascript: alert(document.body.filters.item("alpha"));
).

The point is that the code results in error when trying to read opacity
off any element for which it has not yet been set.

This is a fairly common scenario:
A program has an element that is initially fully opaque. The element may
fade in and out a few times. The stylesheet does not not set opacity
to 100 (or "1" for css3 opacity).

When the program reads the element's filter opacity opacity, an error
resluts.

>> It is a more significant problem when the advice on MSDN is followed:
>>> <http://msdn.microsoft.com/en-us/library/ms532967(VS.85).aspx>
>>>
>> [...]
>>> It contains a link to "Scripting Filters" at the bottom.
>> http://msdn.microsoft.com/en-us/library/ms532847(VS.85,loband).aspx
>>
>> Suggests using the DXImageTransform filter instead. Example:
>>
>> el.filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
>>
>> That works great.
>
> It does not work at all in older IEs (without DirectX support), while the
> Alpha filter is backwards-compatible. The additional features of the
> DirectX filter are also seldom used.
>

DXImageTransform works in IE5.5 and above.

Aside from the error produced when the element has no fitlers, testing
your approach in IE5.5, using IE Tester, I get an error, even when the
alpha filter is specified.

"Error accessing the OLE Registry."

>> The problem is when trying to read the filter using
>> the approach el.filters.item("alpha").opacity.
>>
>> The result is an error is produced.
>
> Borken as designed.
>

Filters do not map so well to CSS. Particularly when an element wants to
use more than 1 filter.

>> There are two alpha filters:
>
> Yes, one uses DirectX Image Transformation (DXImageTransform) and the other
> one does not.
>

[...]

Apparently filter opacity was removed in IE8:
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=331735

See also:
https://developer.mozilla.org/en/CSS/opacity

Apparently they put it back. Both alpha and its DX mimic work fine for
me (using IE8 in IETester).

Microsoft has been recommending the extended DXImageTransform since
IE5.5. The solution should allow pages to follow either the vendor
recommendations or the shorthand old-style filter: alpha(opacity=20).

And now we get one more: "-ms-filter":
http://msdn.microsoft.com/en-us/library/ms533754%28VS.85%29.aspx

| Internet Explorer 8. The -ms-filter attribute is an extension to CSS,
| and can be be used as a synonym for filter in IE8 mode. When using
| -ms-filter, enclose the progid in single quotes (') or double quotes
| ("). Multiple values should be separated by commas (,), as shown in
| the Examples section.

>
>> Conclusion:
>> By parsing the filter string, either type of alpha filter can be read.
>
> To conclude that therefore this would be the best way is a fallacy, though.
>

Parsing the filter string works for both type of filter setting and does
not result in error.

Feading the el.filters.item("alpha"), will result in error unless the
alpha filter is set as:

filter: alpha([...]);

The error produced also occurs when using microsoft-recommended
DXImageTransform alpha filter in css, but reading el.filters.item("alpha").

For a general purpose solution, parsing the filter string is less error
prone. This approach works for either alpha or its DX variation and
avoids using try/catch to read the alpha filter.
--
Garrett
comp.lang.javascript FAQ: http://jibbering.com/faq/

From: Andrew Poulos on 20 Nov 2009 23:41

From: Thomas 'PointedEars' Lahn on 20 Nov 2009 23:47

Garrett Smith wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Garrett Smith wrote:
>>> Thomas 'PointedEars' Lahn wrote:
>>>> Andrew Poulos wrote:
>>>>> How do I get the opacity value in IE where the opacity is set via a
>>>>> filter eg.
>>>>>
>>>>> <img style="filter:alpha(opacity=12);" src="... >
>>>> imgRef.filters.item("alpha").opacity
>>>>
>>>> Garrett is wrong, STFW for "filter:alpha(opacity" would have helped.
>>>> The MSDN Library entry is the first hit here:
>>
>> JFYI: I said that you were wrong because you said Google would not be our
>> friend here. That is, Google *Search*, _not_ Code.
>
> Ah, got it. It seemed like you were suggesting that the proposed
> solution was wrong.
>
> However, the MSDN link you got from the search result doesn't mention
> filter: alpha, but the DXImageTransform filter instead.

The link at the bottom, which I mentioned, describes scripting filters in
general, though. And perhaps a later Google Web Search hit would point
directly to it (I cannot be bothered to check).

>>> That suggestion will result in error when the filter object is
>>> undefined or uses the recommended DXImageTransform filter instead of
>>> just alpha.
>>>
>>> This is a problem because it is undefined when not set:
>>
>> It was the solution for this specific example, of course.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>>> QUick example:
>>> javascript: alert(document.body.style.filters.item("alpha"))
>>
>> Nobody set the filter on the BODY element here.
>
> Right. So BODY has no filter. When reading el.filters.item("alpha") off
> an element that has no alpha filter, an error is produced.

I have marked the important part that you are still missing. I am writing
for intelligent people, so a general solution would use feature-testing
code, of course, thus would be unlikely to break as you describe.

> [snipped: preaching to the choir]

>>> It is a more significant problem when the advice on MSDN is followed:
>>>> <http://msdn.microsoft.com/en-us/library/ms532967(VS.85).aspx>
>>>>
>>> [...]
>>>> It contains a link to "Scripting Filters" at the bottom.
>>> http://msdn.microsoft.com/en-us/library/ms532847(VS.85,loband).aspx
>>>
>>> Suggests using the DXImageTransform filter instead. Example:
>>>
>>> el.filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
>>>
>>> That works great.
>>
>> It does not work at all in older IEs (without DirectX support), while the
>> Alpha filter is backwards-compatible. The additional features of the
>> DirectX filter are also seldom used.
>
> DXImageTransform works in IE5.5 and above.

True. Apparently you have not been paying attention.

> Aside from the error produced when the element has no fitlers, testing
> your approach in IE5.5, using IE Tester, I get an error, even when the
> alpha filter is specified.
>
> "Error accessing the OLE Registry."

A known bug of IE Tester, if you had bothered to check its homepage.

>>> The problem is when trying to read the filter using
>>> the approach el.filters.item("alpha").opacity.
>>>
>>> The result is an error is produced.
>>
>> Borken as designed.
>
> Filters do not map so well to CSS. Particularly when an element wants to
> use more than 1 filter.

Nonsense.

>>> There are two alpha filters:
>>
>> Yes, one uses DirectX Image Transformation (DXImageTransform) and the
>> other one does not.
>
> [...]
>
> Apparently filter opacity was removed in IE8:
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=331735
>
> See also:
> https://developer.mozilla.org/en/CSS/opacity

According to my tests, IE 8 does not support the `opacity' CSS property for
images.

> Apparently they put it back. Both alpha and its DX mimic work fine for
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> me (using IE8 in IETester).
^^^^^^^^^^^^^^^^^^^^^

You are not making sense. (And yes, filters still work as before in IE 8.)

In any case: I would never have used `filter' within the `style' attribute
value to begin with; proprietary features like this belong in layout-engine
specific stylesheets and scripts, here with Conditional Comments:



> [TLDR]
>
>>> Conclusion:
>>> By parsing the filter string, either type of alpha filter can be read.
>>
>> To conclude that therefore this would be the best way is a fallacy,
>> though.
>
> Parsing the filter string works for both type of filter setting and does
> not result in error.

So does proper feature-testing. There is also little chance of a false
positive with that, much in contrast to your approach. String parsing being
generally less efficient than property access notwithstanding.

> Feading the el.filters.item("alpha"), will result in error
> [snipped: preaching to the choir]

Would you *please* stop and drop it?

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

From: Thomas 'PointedEars' Lahn on 20 Nov 2009 23:51

Andrew Poulos wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Garrett Smith wrote:
>>> The problem is when trying to read the filter using
>>> the approach el.filters.item("alpha").opacity.
>>>
>>> The result is an error is produced.
>>
>> Borken as designed.
>>
>>> There are two alpha filters:
>>
>> Yes, one uses DirectX Image Transformation (DXImageTransform) and the
>> other one does not.
>>
>>> filter: alpha(opacity = 10);
>>> filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 10);
>>>
>>> The latter is being changed now to follow CSS 2.1 Syntax:
>>> -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=52)"
>>>
>>> http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-
>> extensions.aspx
>
> Man, I'm confused.

(I was afraid that you might, with Garrett missing my point.) Don't be.

> SHould I use
> -ms-filter:"alpha(opacity=52)"
> or
> -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=52)"

No.

filter: Alpha(opacity=52)

works just fine in all IEs from version 4.0 forward. Be sure to include the
stylesheet with Conditional Comments, though.

> ?
>
> Anyhow I'm also thinking of using try/catch:

Don't (here).

> as I'd rather not not use a regexp (no great reason).

Use feature-testing instead.

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

First | Prev | Next | Last
Pages: 1 2 3 4 5
Prev: Google Closure: The Evil Parts
Next: Encapsulation and js, html, css