Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #24467 > unrolled thread

Opacity Problem for IE8 and lower

Back to article view | Back to comp.lang.javascript

Contents

  Opacity Problem for IE8 and lower "Mel Smith" <syntel@cox.net> - 2014-05-29 17:17 -0600
    Re: Opacity Problem for IE8 and lower Ed Jay <edMbj@aes-intl.com> - 2014-05-29 16:56 -0700
      Re: Opacity Problem for IE8 and lower "Mel Smith" <syntel@cox.net> - 2014-05-30 07:50 -0600
        Re: Opacity Problem for IE8 and lower Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-05-30 17:27 +0200
          Re: Opacity Problem for IE8 and lower Christoph Michael Becker <cmbecker69@arcor.de> - 2014-05-30 17:56 +0200
          Re: Opacity Problem for IE8 and lower "Mel Smith" <syntel@cox.net> - 2014-05-30 10:27 -0600
            Re: Opacity Problem for IE8 and lower Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-05-30 22:37 +0200
            filter (was: Opacity Problem for IE8 and lower) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-01 14:59 +0200
    Re: Opacity Problem for IE8 and lower Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-05-30 14:32 +0200
    Re: Opacity Problem for IE8 and lower Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2014-06-01 13:27 -0300

#24467 — Opacity Problem for IE8 and lower

Hi:

    I have the following statement in a function that is supposed to restore 
the default opacity to 1.0 (100 in IE8 and lower) in  several 'divs' from 
the opening 40 opacity.

        document.getElementById("iMyDivId").style.filter = 
alpha(opacity=100) ;

        This gives a JS runtime error

    For all other browsers, I use:

        document.getElementById("MyDivId").style.opacity = 1.0 ;    // works 
correctly


    Would someone please correct my syntax ?

Thank you.

-Mel Smith 

[toc] | [next] | [standalone]

#24468

Mel Smith wrote:

>Hi:
>
>    I have the following statement in a function that is supposed to restore 
>the default opacity to 1.0 (100 in IE8 and lower) in  several 'divs' from 
>the opening 40 opacity.
>
>        document.getElementById("iMyDivId").style.filter = 
>alpha(opacity=100) ;

= 'alpha(opacity=100)';

-- 
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life. 
http://www.breastthermography.info

[toc] | [prev] | [next] | [standalone]

#24479

Ed said:
>>        document.getElementById("iMyDivId").style.filter =
>>alpha(opacity=100) ;
>
> = 'alpha(opacity=100)';

Hi Ed:
        I hadn't ever seen the "alpha(" construct before and ouldn't find 
examples of its use in JS, and I had read thru Flanagan's book, and googled, 
but didn't realize I could stringify this filter argument.

    So, thank you for your response. I'll try it today.

-Mel 

[toc] | [prev] | [next] | [standalone]

#24481

Mel Smith wrote:

> Ed said:
>>>        document.getElementById("iMyDivId").style.filter =
>>>alpha(opacity=100) ;
>>
>> = 'alpha(opacity=100)';
> 
> Hi Ed:
>         I hadn't ever seen the "alpha(" construct before and ouldn't find
> examples of its use in JS, and I had read thru Flanagan's book, and
> googled, but didn't realize I could stringify this filter argument.

You should either read Flanagan’s book again or (which I recommend) dump it 
as it cannot be that good a book on the subject if it did not tell you that 
there has to be an “alpha” function/method in order for that assignment to 
work "unquoted".  (As most certainly there is not, a ReferenceError 
exception is thrown.¹)

That the book is bad has been demonstrated before; however, you have 
demonstrated before to be a slow learner as well.  So the reason for this 
oversight is unclear.
 

________
¹  An interesting aspect of this problem is that if there were an “alpha”
   function/method and there was an “opacity” variable/property or the
   code not strict mode code, an “opacity” property would be assigned the
   value 100, alpha(100) would be called, and the result of the call
   assigned to the “filter” property (which may reject it by setter).
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#24483

Thomas 'PointedEars' Lahn wrote:

> ¹  An interesting aspect of this problem is that if there were an “alpha”
>    function/method and there was an “opacity” variable/property or the
>    code not strict mode code, an “opacity” property would be assigned the
>    value 100, alpha(100) would be called, and the result of the call
>    assigned to the “filter” property (which may reject it by setter).

So, assuming non strict mode, one could define the following function:

  function alpha(opacity) {
    return "alpha(opacity=" + opacity + ")";
  }

to make the code work. ;)

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#24484

Thomas said:

> You should either read Flanagan's book again

    I did, and on Pg 368 of his 5th edition I found :

        filter: alpha(opacity=75) ;

    as a CSS3 style.for IE versions >= 8

    but no use of this 'filter' in JS/ES

or (which I recommend) dump it

    I have also purchased Alex Rauschmeyer's 'Speaking Javascript' where 
'filter' is not mentioned, but I'm getting a better understanding of JS 
objects in that book though.

> as it cannot be that good a book on the subject if it did not tell you 
> that
> there has to be an "alpha" function/method in order for that assignment to
> work "unquoted".  (As most certainly there is not, a ReferenceError
> exception is thrown.š)
>
> That the book is bad has been demonstrated before; however, you have
> demonstrated before to be a slow learner as well.

    Yes, I did have a hard two years getting my M.Sc in Computing Science 
and publishing my thesis (On the Detection of Edges in Pictures) at the 
University of Alberta in 1973.

    But even 'slow learners' can become productive if they have sufficient 
learning experience in their trade, and have associates who are willing to 
share their knowledge. My learning is still ongoing but admittedly slow 
after 40+ years grinding away at fast-changing technology. btw, I have yet 
to tweet, or use facebook, but I have a web-site operational that uses 
255-character 'chirps' which I introduced at the same time as tweets were 
introduced. My 'chirp' site is not quite as successful as the 'tweet' site 
though.  :)

.    On another ng, I am quite productive in helping others get quick 
downloads of my 'other' language, and so feel better because I, too, help 
others in our trade.

As usual, thank you for your deeper insights into JS/ES !

-Mel

[toc] | [prev] | [next] | [standalone]

#24497

Mel Smith wrote:

> Thomas said:

There are many Thomases out there.  Please provide full (sufficient) 
attribution; see above.
 
>> You should either read Flanagan's book again
> 
>     I did, and on Pg 368 of his 5th edition I found :
> 
>         filter: alpha(opacity=75) ;
> 
>     as a CSS3 style.for IE versions >= 8
> 
>     but no use of this 'filter' in JS/ES

But by contrast to ECMAScript implementations, CSS is a style-sheet 
language, not a programming language.  So the syntax must be and is 
different there.  How you can script those properties is explained
in the MSDN Library, among many other places.
 
>> or (which I recommend) dump it
> 
>     I have also purchased Alex Rauschmeyer's 'Speaking Javascript' where
> 'filter' is not mentioned, but I'm getting a better understanding of JS
> objects in that book though.

With a more thorough review that may be worth adding to the FAQ.
 
>> as it cannot be that good a book on the subject if it did not tell you
>> that there has to be an "alpha" function/method in order for that
>> assignment to work "unquoted".  (As most certainly there is not, a
>> ReferenceError exception is thrown.�)
>>
>> That the book is bad has been demonstrated before; however, you have
>> demonstrated before to be a slow learner as well.
> 
>     Yes, I did have a hard two years getting my M.Sc in Computing Science
> and publishing my thesis (On the Detection of Edges in Pictures) at the
> University of Alberta in 1973. […]

Congratulations.  I was referring to Web development in particular, though.  
I might have misremembered.

> As usual, thank you for your deeper insights into JS/ES !

You are welcome.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#24522 — filter (was: Opacity Problem for IE8 and lower)

[X-Post & F'up2 comp.infosystems.www.authoring.stylesheets]

Mel Smith wrote in comp.lang.javascript:

> [Thomas 'PointedEars' Lahn] said:
>> You should either read Flanagan's book again
> 
>     I did, and on Pg 368 of his 5th edition I found :
> 
>         filter: alpha(opacity=75) ;
> 
>     as a CSS3 style.for IE versions >= 8

JFYI, this does not have anything to do with CSS3.  It is a Microsoft-
proprietary property that is only necessary for that effect in IE/MSHTML
_<_ 9 (IE >= 9 support the “opacity” property, *that* “filter” property has 
been deprecated).

It is not to be confused with the “filter” property of the Filter Effects 
Module specification (WD) that some layout engines implement for CSS and 
that may become part of CSS3 or a higher level.

<http://lmgtfy.com/?q=filter+property>
<http://www.w3.org/TR/filter-effects/>

>     but no use of this 'filter' in JS/ES
> 
> or (which I recommend) dump it

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#24475

Mel Smith wrote:

>     I have the following statement in a function that is supposed to
>     restore
> the default opacity to 1.0 (100 in IE8 and lower) in  several 'divs' from
> the opening 40 opacity.
> 
>         document.getElementById("iMyDivId").style.filter =
> alpha(opacity=100) ;
> 
>         This gives a JS runtime error
> 
>     For all other browsers, I use:
> 
>         document.getElementById("MyDivId").style.opacity = 1.0 ;    //
>         works
> correctly
> 
> 
>     Would someone please correct my syntax ?

Yes.  But it is elementary.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#24527

On 29/05/2014 20:17, Mel Smith wrote:
> Hi:
>
>      I have the following statement in a function that is supposed to restore
> the default opacity to 1.0 (100 in IE8 and lower) in  several 'divs' from
> the opening 40 opacity.
>
>          document.getElementById("iMyDivId").style.filter =
> alpha(opacity=100) ;
>
>          This gives a JS runtime error
>
>      For all other browsers, I use:
>
>          document.getElementById("MyDivId").style.opacity = 1.0 ;    // works
> correctly
>
>
>      Would someone please correct my syntax ?
>

Kangax has made a fork to emile.js to deal with the opacity filter in IE 
version <= 8:
<https://github.com/kangax/emile/blob/master/emile.js>

Adapting from Kangax's code, we have:

/** Define the setOpacity() and getOpacity methods at load-time.
  *  @param {Object} el  - an HTMLElement
  *  @param {Number} val - a Number between 0 and 1.
  *  Idea adapted from emile.js in conjuction with Kangax's fork
  *  @see https://github.com/kangax/emile/blob/master/emile.js
  */
var parseEl = document.createElement('div'),
     supportsOpacity = typeof parseEl.style.opacity == 'string',
     supportsFilters = typeof parseEl.filters != 'undefined',
     reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/i,
     setOpacity = function () { };

if (supportsOpacity) { // W3C compliant browsers.
   setOpacity = function (el, val) { el.style.opacity = val; };
} else if (supportsFilters) { // IE <= 8
   setOpacity = function (el, val) {
     var es = el.style, f = es.filter;
     // Avoid IE's hasLayout bug by setting zoom to 1 (normal).
     if (el.currentStyle && !el.currentStyle.hasLayout) es.zoom = 1;
     if (reOpacity.test(f)) {
       // Fix IE's clearType bug if v >= 0.9999 => removes opacity
       // filter.
       val = (val >= 0.9999) ? '' : ('alpha(opacity=' + (val * 100) +
       ')');
       es.filter = f.replace(reOpacity, val);
     } else {
       es.filter += ' alpha(opacity=' + (val * 100) + ')';
     }
   };
}

-- 
Joao Rodrigues

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web