«

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

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.

On Nov 19, 10:38 pm, Darko <darko.maksimo...@gmail.com> wrote:
> 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

VK wrote:
> Not mine, but tested working:
> http://www.quirksmode.org/js/opacity.html

I knew I'd seen it somewhere

VK wrote:
> On Nov 19, 10:38 pm, Darko <darko.maksimo...@gmail.com> wrote:
>> 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?

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, <f806at$ail$1$>

On Nov 19, 11:38 am, Darko <darko.maksimo...@gmail.com> wrote:
> 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

On Nov 20, 4:03 pm, Stevo <ple...@spam-me.com> wrote:
> 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.

On Nov 19, 8:38 pm, Darko <darko.maksimo...@gmail.com> wrote:
> 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

wrote:
> On Nov 19, 11:38 am, Darko <darko.maksimo...@gmail.com> 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:
>>
>> 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.

The issue is not that the element has "no layout" which you could
have figured out by now. And nobody mentioned `hasLayout' (whatever
that might be) until now.

> DXImageTransform can work for background images, too,

I have to see that before I believe it.

> but doesn't let you set any other background-properties (like
> background-position).

You are probably describing the following PNGA workaround for IE 6:

#portal-logo {
background: none;
filterrogidXImageTransform.Microsoft.AlphaImag eLoader(enabled=true,
sizingMethod=scale src='bannertop_right.png');
}

In which case the background image is *disabled* in order to apply the
filter. The result is not a real background image.

Please learn to quote.


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

David Mark posted his code for setting opacity

<URL http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/792457773ca7cf01/4763865f827f7605>

and with his subsequent corrections I believe he intended to post the
following


var global = this;
var setOpacity = (function() {
var i, l, html;
var doc = global.document;
var opacityStyles = ['opacity', 'MozOpacity', 'KhtmlOpacity'];

if (doc) {
html = (doc.all[0].tagName == '!')?doc.all[1]:doc.all[0];
if (!html && doc.all && doc.all[0]) {
html = (doc.all[0].tagName == '!')?doc.all[0]:doc.all[1];
}
}
if (html && html.style) {
if (typeof html.style.filter != 'undefined') {
return function(el, o) {
var f;
if (el.filters) {
if (el.currentStyle && !el.currentStyle.hasLayout) {
el.style.zoom = 1;
}
f = el.filters.alpha;
if (typeof(f) != 'undefined') {
if (o == 1) {
f.enabled = false;
}
else {
f.enabled = true;
f.opacity = o * 100;
}
}
else {
if (el.style && typeof(el.style.filter) != 'undefined') {
el.style.filter += "alpha(opacity=" + (o * 100) + ")";
}
}
}
};
}
i = 0;
l = opacityStyles.length;
while (i < l) {
if (typeof(html.style[opacityStyles[i]]) == 'string') {
return (function(s) {
return function(el, o) {
el.style[s] = o;
};
})(opacityStyles[i]);
}
i++;
}
}

})();


I don't know what is trying to be accomplished with this part which
doesn't work in Firefox as document.all is not available. Is this a
way to get the document.documentElement object?

if (doc) {
html = (doc.all[0].tagName == '!')?doc.all[1]:doc.all[0];
if (!html && doc.all && doc.all[0]) {
html = (doc.all[0].tagName == '!')?doc.all[0]:doc.all[1];
}
}


--------------------------------------------

The code I have been using is the following

function setOpacity(el, val) {

// If "val" is very small then when converted to a string
// may will use scientific notation. This is not allowed in CSS.
// For example, in Firefox 1.5
// (0.0000001).toString() --> "1e-7"
if (val<0.00001) {
val = 0;
}

var s = el.style;

if (typeof s.filter == 'string') {

s.filter = s.filter.replace(/alpha\([^\)]*\)/gi,'') +
((val < 1) ? 'alpha(opacity='+val*100+')' : '');

// alpha opacity only applies if the element "has layout".
// IE4 has alpha but does not have currentStyle
if (!el.currentStyle ||
//IE 5+ can determine if element "has layout"
!el.currentStyle.hasLayout) {
// setting zoom is one of the ways to insure
// an element "has layout"
el.style.zoom = 1;
}
} else {
// if (early release edition of Firefox && val === 1) {
// // This trick is from Scriptaculous
// // Some version of Firefox (before 1.5?) flickers
// // when animating opacity up 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?
//
// val = 0.999999;
// }

// Mac/Firefox-1.5, Mac/Opera-9, Mac/Safari-2,
// Win/NetscapeNavigator-8.0, KDE4/Konqueror
s.opacity = val;
// Win/NetscapeNavigator 6.0/7.0/8.0, Mac/Firefox-1.5
s.MozOpacity = val;
// -khtml-opacity does not apply to any version of Konqueror
// according to the
// folks on irc.freenode.net#kde. I set up some tests and
// one person ran them on
// development versions of KDE 4 and this is not supported
// Konqueror for KDE 4
// will be the first Konqueror version to support opacity
// settings.
// These KDE folks also told me that it was Safari 1.1 that
// supported the
// property below. I don't have anything less then 1.3
// anymore and have only tested
// on 2.0 so far. This does not work with Safari 2.0
s.KhtmlOpacity = val; // TODO some net sources have KHTMLOpacity
// YUI had this and I don't think it would work since
// their -moz-opacity didn't work
//s['-khtml-opacity'] = val;
}
}


Peter