Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > opacity

Reply
Thread Tools

opacity

 
 
Darko
Guest
Posts: n/a
 
      11-19-2007
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
 
Reply With Quote
 
 
 
 
Stevo
Guest
Posts: n/a
 
      11-20-2007
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.
 
Reply With Quote
 
 
 
 
VK
Guest
Posts: n/a
 
      11-20-2007
On Nov 19, 10:38 pm, Darko <(E-Mail Removed)> 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
 
Reply With Quote
 
Stevo
Guest
Posts: n/a
 
      11-20-2007
VK wrote:
> Not mine, but tested working:
> http://www.quirksmode.org/js/opacity.html


I knew I'd seen it somewhere
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      11-20-2007
VK wrote:
> On Nov 19, 10:38 pm, Darko <(E-Mail Removed)> 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$(E-Mail Removed)>
 
Reply With Quote
 
dhtmlkitchen@gmail.com
Guest
Posts: n/a
 
      11-20-2007
On Nov 19, 11:38 am, Darko <(E-Mail Removed)> 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


 
Reply With Quote
 
Darko
Guest
Posts: n/a
 
      11-21-2007
On Nov 20, 4:03 pm, Stevo <(E-Mail Removed)> 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.
 
Reply With Quote
 
Darko
Guest
Posts: n/a
 
      11-21-2007
On Nov 19, 8:38 pm, Darko <(E-Mail Removed)> 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
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      11-21-2007
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> On Nov 19, 11:38 am, Darko <(E-Mail Removed)> 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
 
Reply With Quote
 
Peter Michaux
Guest
Posts: n/a
 
      11-21-2007
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
What is -khtml-opacity for? Jim Higson HTML 3 03-05-2006 12:39 AM
opacity windandwaves HTML 10 02-26-2006 06:19 PM
Opacity Sentient Fluid HTML 0 04-22-2005 07:45 AM
JPanel transparency (opacity) Nebojsa Dinic Java 0 04-16-2004 04:04 PM
CSS3 opacity support in Konqueror 3.1+ and Safari 1.1 DU HTML 13 10-31-2003 12:51 AM



Advertisments