By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,459 Members | 1,001 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,459 IT Pros & Developers. It's quick & easy.

opacity

P: n/a
Hi,

I'm trying to get and set an element's opacity, but I'm stuck with,
what a hell of surprise, Internet Explorer. As for getting the
element's opacity, I have the following (not working) lines of code:

if ( targetObject.filters && targetObject.filters.length 0 )
opacity =
targetObject.filters.item("DXImageTransform.Micros oft.Alpha").Opacity;

Setting it, I tried:

if ( targetObject.filters && targetObject.filters.length 0 )
targetObject.setAttribute( "style", "filter: alpha(opacity=" +
opacity + ")" );

None work. I have digged these out from some MSDN article, but they
aren't working, at least they don't work in to me available IE 6.0. Do
you have better (i.e. working) ways of yours?

Thanks

Darko
Nov 19 '07 #1
Share this Question
Share on Google+
16 Replies

P: n/a
Darko wrote:
I'm trying to get and set an element's opacity, but I'm stuck with,
what a hell of surprise, Internet Explorer. As for getting the
element's opacity, I have the following (not working) lines of code:
I don't know what was wrong there, but I see you think that opacity is
only available for IE. There's an equivalent feature in Mozilla browsers
using custom CSS properties. You'll have to sniff for the browsers and
branch your code to handle it (totally) differently, but it's definitely
possible. Not that I've ever used it, but I have seen itt.
Nov 20 '07 #2

P: n/a
VK
On Nov 19, 10:38 pm, Darko <darko.maksimo...@gmail.comwrote:
As for getting the
element's opacity, I have the following (not working) lines of code:

if ( targetObject.filters && targetObject.filters.length 0 )
opacity =
targetObject.filters.item("DXImageTransform.Micros oft.Alpha").Opacity;

Setting it, I tried:

if ( targetObject.filters && targetObject.filters.length 0 )
targetObject.setAttribute( "style", "filter: alpha(opacity=" +
opacity + ")" );

None work. I have digged these out from some MSDN article
Do you still remember which one?
but they
aren't working, at least they don't work in to me available IE 6.0.
Of course they don't: setAttribute method has nothing to do with it.
Do you have better (i.e. working) ways of yours?
Not mine, but tested working:

http://www.quirksmode.org/js/opacity.html
Nov 20 '07 #3

P: n/a
VK wrote:
Not mine, but tested working:
http://www.quirksmode.org/js/opacity.html
I knew I'd seen it somewhere :)
Nov 20 '07 #4

P: n/a
VK wrote:
On Nov 19, 10:38 pm, Darko <darko.maksimo...@gmail.comwrote:
>As for getting the
element's opacity, I have the following (not working) lines of code:

if ( targetObject.filters && targetObject.filters.length 0 )
opacity =
targetObject.filters.item("DXImageTransform.Micro soft.Alpha").Opacity;

Setting it, I tried:

if ( targetObject.filters && targetObject.filters.length 0 )
targetObject.setAttribute( "style", "filter: alpha(opacity=" +
opacity + ")" );

None work. I have digged these out from some MSDN article

Do you still remember which one?
Probably
http://msdn2.microsoft.com/en-us/lib...ipting_Filters or
a previous version.
>but they
aren't working, at least they don't work in to me available IE 6.0.

Of course they don't: setAttribute method has nothing to do with it.
To be precise, setAttribute() does not seem to work there *for IE*.
>Do you have better (i.e. working) ways of yours?

Not mine, but tested working:

http://www.quirksmode.org/js/opacity.html
However, it does not make sense in passing ranges from 0 to 10 and then
computing the required value twice. With the division for `opacity', there
is even a rounding error involved, needlessly. It makes more sense have
`value' range from 0 to 1 (thereby to pass the percentage x% as 0.0x to the
function); the computation will have to be done only once (for `filter'),
and the used values will be as exact as the layout engine allows it:

function setOpacity(value)
{
testObj.style.opacity = value;
testObj.style.filter = 'alpha(opacity=' + value * 100 + ')';
}
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>
Nov 20 '07 #5

P: n/a
On Nov 19, 11:38 am, Darko <darko.maksimo...@gmail.comwrote:
Hi,

I'm trying to get and set an element's opacity, but I'm stuck with,
what a hell of surprise, Internet Explorer. As for getting the
element's opacity, I have the following (not working) lines of code:

if ( targetObject.filters && targetObject.filters.length 0 )
opacity =
targetObject.filters.item("DXImageTransform.Micros oft.Alpha").Opacity;

Setting it, I tried:

if ( targetObject.filters && targetObject.filters.length 0 )
targetObject.setAttribute( "style", "filter: alpha(opacity=" +
opacity + ")" );

None work. I have digged these out from some MSDN article, but they
aren't working, at least they don't work in to me available IE 6.0. Do
you have better (i.e. working) ways of yours?
Does the element have a layout? In IE terms, it's gotta have position
or height/width for proprietary hasLayout to be be true.

DXImageTransform can work for background images, too, but doesn't let
you set any other background-properties (like background-position).

Regarding other comments on this thread: Opacity is CSS3, not a moz-
specific css. it works in Mozilla, Webkit and Opera.

Garrett
Thanks

Darko
Nov 20 '07 #6

P: n/a
On Nov 20, 4:03 pm, Stevo <ple...@spam-me.comwrote:
Darko wrote:
I'm trying to get and set an element's opacity, but I'm stuck with,
what a hell of surprise, Internet Explorer. As for getting the
element's opacity, I have the following (not working) lines of code:

I don't know what was wrong there, but I see you think that opacity is
only available for IE. There's an equivalent feature in Mozilla browsers
using custom CSS properties. You'll have to sniff for the browsers and
branch your code to handle it (totally) differently, but it's definitely
possible. Not that I've ever used it, but I have seen itt.
No, I don't think that. I use "opacity" regularly for other browsers,
but
it doesn't work with IE. So I googled out that IE needs this filter
thing,
which they claim works by accessing .filters subobject, but it seems
as if it
does not. So I gave up and did as it was only possible, using
..style.filter = ..., which I like less than the proposed solution from
MSDN
(which doesn't work). Never mind.
Nov 21 '07 #7

P: n/a
On Nov 19, 8:38 pm, Darko <darko.maksimo...@gmail.comwrote:
Hi,

I'm trying to get and set an element's opacity, but I'm stuck with,
what a hell of surprise, Internet Explorer. As for getting the
element's opacity, I have the following (not working) lines of code:

if ( targetObject.filters && targetObject.filters.length 0 )
opacity =
targetObject.filters.item("DXImageTransform.Micros oft.Alpha").Opacity;

Setting it, I tried:

if ( targetObject.filters && targetObject.filters.length 0 )
targetObject.setAttribute( "style", "filter: alpha(opacity=" +
opacity + ")" );

None work. I have digged these out from some MSDN article, but they
aren't working, at least they don't work in to me available IE 6.0. Do
you have better (i.e. working) ways of yours?

Thanks

Darko
As for opacity, now that I gave in and had it .style.filter = "...",
it finally
works well with IE, too. Another problem though - Konqueror. It seems
to ignore:
opacity
-moz-opacity
-khtml-opacity
filter

Wtf. does it need? Does Konqueror actually support element's opacity?
I wouldn't mind
the bloody Konqueror not working properly with my site, but as I
understand Safari uses
the same KHTML engine, so I reckon if Konqueror doesn't work (as it
doesn't), then Safari
won't neither. Am I right? Or Safari uses a KHTML branch that actually
supports the standard?

Thanks
Nov 21 '07 #8

P: n/a
On Dec 4, 11:47 pm, David Mark <dmark.cins...@gmail.comwrote:
On Dec 4, 8:22 pm, Peter Michaux <petermich...@gmail.comwrote:
On Dec 4, 12:17 am, dm...@cinsoft.net wrote:
On Nov 21, 4:35 pm, Peter Michaux <petermich...@gmail.comwrote:
[snip]
// if (early release edition of Firefox && val === 1) {
// // This trick is from Scriptaculous
// // Some version of Firefox (before 1.5?) flickers
I've seen this recently. It drove me to distraction while I was
working on a special effects module. I don't think it was an early
release though. I am pretty sure it was the latest major release.
I've never managed to make it flicker on any version.

It only seems to happen when animating the opacity with a timer and
only when starting from 1. Start from .99999 or whatever and it goes
away. I eventually changed the timing of something and got it worked
out of my effects module without resorting to the .99999 hack.
// // when animatingopacityup to a value of 1.
// // If this trick is to be used the test will probably be
// // expensive and should only be preformed the first time.
// //
// // Apparently using this trick increases the weight of
// // the DOM, for rendering speed?
I am not sure what that means, but as I recall, setting .999999
instead of 1 makes no visible difference, other than to eliminate the
annoying flicker.
Someone told me or I read that by setting several elements with
opacity makes the DOM "heavier". I can only assume they mean it takes
longer to render or that it takes more RAM or something like that. The
idea of limiting this 0.99999 trick to only the versions of FF that
need it was to avoid adding this "weight" to browsers that don't need
the trick. The importance given to this "weight" issue sounded a
little like flaky to me.

I think it does take a little more work to render a semi-transparent
element, but the idea of using .999999 in lieu of 1 is silly.
I believe the flicker issue included animating from an opacity below 1
up to 1 in which case the animation needed to stop before 1. I can't
say this is silly.

[snip]
For the most part it does. Doing it for table rows or groups of table
rows would seem an odd thing to do anyway. Add a disclaimer about
table rows at the top and you are done. Feel free to add it to your
repository.
I'm starting a branch for opacity. I think it will serve as a good
first DHTML example.

Peter
Dec 5 '07 #9

P: n/a
On Dec 7, 11:59 am, Peter Michaux <petermich...@gmail.comwrote:

Yes by using this wrapper it would allow someone to write an
implementation like this.

function myApply(obj, f) {
obj._temp = f;
// some number of arguments
obj._temp(args, arguments[1], arguments[2],
arguments[3], arguments[4]);
delete obj._temp;

}
Never mind the bugs :)

--
Peter
Code Worth Recommending Project
http://cljs.michaux.ca/trac
Dec 7 '07 #10

P: n/a
I kind of mucked up that explanation. You would need to maintain your
own gEBID and getAnElement to have your level of support for IE4. The
logic that a developer with uncommon requirements maintains his own
implementations was the point.
Sounds good to me.
Dec 7 '07 #11

P: n/a
David Mark wrote:
On Dec 7, 6:52 pm, Peter Michaux <petermich...@gmail.comwrote:
>On Dec 7, 3:32 pm, David Mark <dmark.cins...@gmail.comwrote:
>>This is similar to Thomas' oft-mentioned isFeatureType function, but
is slightly in improved in that it does the truthy test internal and
covers ActiveX methods. Point to PointedEars. On the downside, the
fact that I am agreeing with him
It's contagious.

I hope not.
>>may signal the end of the world.
:-)

This is how it starts. Next thing you know, people will start
agreeing with VK. I think one of Nostradamus' quatrains referenced
such events as a prelude to the apocalypse.
Generally, understanding will be helped greatly by considering the argument
before the name. That is where many people fail to make the distinction.
PointedEars
Dec 8 '07 #12

P: n/a
On Dec 7, 4:26 am, "Thomas 'PointedEars' Lahn" <PointedE...@web.de>
wrote:
David Mark wrote:
[...] Thomas 'PointedEars' Lahn [...] wrote:
David Mark wrote:
On Dec 6, 3:02 pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
David Mark wrote:
[snip]
>This is because there is no reliable way to determine if host object
>methods are callable.
It would seem there is. There does not seem to be a reliable way yet to
How do you figure?
Because evaluating the type before and trying read access only if the type
indicates feasibility has not caused unexpected behavior so far.
And if you get typeof(o) == 'object', how does that tell you it is
callable?

If I get that result and *then* the value is not a false-value and I
am expecting the identifier to designate a host object's method, at
the least I can be pretty sure that it is callable.
That seems reasonable.

[snip]

--
Peter
Code Worth Recommending Project
http://cljs.michaux.ca
Dec 12 '07 #13

P: n/a
On Dec 8, 5:13 am, David Mark <dmark.cins...@gmail.comwrote:
On Dec 8, 6:01 am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
[snip]
[...]
I tested with the first posted example. No problem.
You have tested with a subset of user agents and leap to the conclusion that
there can never be a problem.

You have snipped out the context of that quote. It referred to the
testing of ActiveX methods. And I tested with virtually every version
of Windows IE, which is the only browser that exposes ActiveX
methods. If you think there is a problem related to the global/window
issue that you keep coming back to, that is another matter (and I
still disagree with you.)
Were these IE browser versions all on the same install of windows? I
am getting more sceptical of this type of testing lately.
Unfortunately a solution costs real dollars :-S

--
Peter
Code Worth Recommending Project
http://cljs.michaux.ca
Dec 12 '07 #14

P: n/a
On Dec 11, 8:08 pm, Peter Michaux <petermich...@gmail.comwrote:
On Dec 8, 5:13 am, David Mark <dmark.cins...@gmail.comwrote:
On Dec 8, 6:01 am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:

[snip]
[...]
I tested with the first posted example. No problem.
You have tested with a subset of user agents and leap to the conclusion that
there can never be a problem.
You have snipped out the context of that quote. It referred to the
testing of ActiveX methods. And I tested with virtually every version
of Windows IE, which is the only browser that exposes ActiveX
methods. If you think there is a problem related to the global/window
issue that you keep coming back to, that is another matter (and I
still disagree with you.)

Were these IE browser versions all on the same install of windows? I
Yes.
am getting more sceptical of this type of testing lately.
There can be issues, like the DirectX opacity "library not registered"
snafu (which can safely be ignored unless you are worried about
developers' test machines.) I have the ActiveX feature testing on
Win98 in the past though.

And I can't get IE4 to work at all on my primary test machine. No
idea why. IE3 works (sometimes) and I use it to make sure that
scripts degrade properly as virtually nothing I write will enhance
pages in that browser.
Unfortunately a solution costs real dollars :-S
I've got enough machines, but I don't feel like uninstalling IE6/7
from any of them as I worry it will screw up Windows or other
applications. I still have a Win98 box, but I haven't turned it on in
years. If I determine that the multiple IE on XP approach has
problems I can't work around or discount, perhaps I will uninstall IE6
on the Win98 box and use it to test IE5.x.
Dec 12 '07 #15

P: n/a
In comp.lang.javascript message <1f7731f6-6ef8-4c28-8ce0-9c531ac0eb85@d2
1g2000prf.googlegroups.com>, Tue, 11 Dec 2007 17:15:45, Peter Michaux
<pe**********@gmail.composted:
>Code Worth Recommending Project
http://cljs.michaux.ca
I've looked at this, and have seen no indication of how to find code.
To the incomer, it looks like an amusement park for experts, of no
practical use. IMHO, it should be rapidly seeded with some known-not-
too-bad code (which can be improved later, if needed), so that it can be
seen, rapidly, to be of some possible use.

International forms should be used in all cases, not merely local ones.
This, in <http://cljs.michaux.ca/trac/timeline>, the date sequence looks
ludicrous to all non-Americans. Use YYYY-MM-DD, as in ISO 8601 - even
Americans can understand it, and there's no need for them to like it.

Page <http://cljs.michaux.ca/trac/changeset/8and no doubt others - in
my IE6, the monospace text is unreasonably small. Zoom does not work.

Search results : unreadably small, no Zoom, FFF dates.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/- FAQish topics, acronyms, & links.
Proper <= 4-line sig. separator as above, a line exactly "-- " (SonOfRFC1036)
Do not Mail News to me. Before a reply, quote with ">" or "" (SonOfRFC1036)
Dec 12 '07 #16

P: n/a
On Dec 12, 3:17 pm, Dr J R Stockton <j...@merlyn.demon.co.ukwrote:
In comp.lang.javascript message <1f7731f6-6ef8-4c28-8ce0-9c531ac0eb85@d2
1g2000prf.googlegroups.com>, Tue, 11 Dec 2007 17:15:45, Peter Michaux
<petermich...@gmail.composted:
Code Worth Recommending Project
http://cljs.michaux.ca

I've looked at this, and have seen no indication of how to find code.
There are two ways on the front page: a browse source link and a
subversion command to get the code. Sure one day the project may be a
success and deserve a flashy page but that is not a priority right
now, at least for me.
To the incomer, it looks like an amusement park for experts, of no
practical use. IMHO, it should be rapidly seeded with some known-not-
too-bad code (which can be improved later, if needed), so that it can be
seen, rapidly, to be of some possible use.
Having code in the repository is a priority and it will be there at
least "rapidly" on a geological scale. There is no time line for the
project.
International forms should be used in all cases, not merely local ones.
This, in <http://cljs.michaux.ca/trac/timeline>, the date sequence looks
ludicrous to all non-Americans. Use YYYY-MM-DD, as in ISO 8601 - even
Americans can understand it, and there's no need for them to like it.
trac is a prepackaged piece of software that is good on the whole.
Page <http://cljs.michaux.ca/trac/changeset/8and no doubt others - in
my IE6, the monospace text is unreasonably small. Zoom does not work.

Search results : unreadably small, no Zoom, FFF dates.
This is not a priority, at least for me. I can read the pages just
fine and know how to adjust my browser when that is not the case with
some pages on the web. If you are passionate about this and want to
find the CSS that causes the problem. You can send a patch.

--
Peter
Code Worth Recommending Project
http://cljs.michaux.ca/
Dec 13 '07 #17

This discussion thread is closed

Replies have been disabled for this discussion.