Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] set opacity browser sniffing necessary in Dom utility?

Expand Messages
  • Matt Sweeney
    Hi Peter, Some code (outside of YUI) applies element.style.filter to all browsers when setting filters for IE, which breaks opacity in Dom.setStyle for other
    Message 1 of 14 , Sep 5 10:55 AM
    • 0 Attachment
      Hi Peter,

      Some code (outside of YUI) applies "element.style.filter" to all
      browsers when setting filters for IE, which breaks opacity in
      Dom.setStyle for other browsers. The IE check assures that we only set
      opacity via filters for IE, allowing other browsers to fall through.

      Matt

      Peter Michaux wrote:

      >Hi,
      >
      >Reading the Dom utility I see the following in setStyle()
      >
      > case 'opacity' :
      > if (isIE && typeof el.style.filter == 'string') { // in case not appended
      >
      >Earlier in the library isIE is defined with
      >
      > var isIE = (window.ActiveXObject);
      >
      >Why is it necessary to check for window.ActiveXObject when setting
      >opacity? Could the conditional be dropped to just the following?
      >
      > if (typeof el.style.filter == 'string')
      >
      >Thank you,
      >Peter
      >
      >
      >
      >Yahoo! Groups Links
      >
      >
      >
      >
      >
      >
      >
      >
      >
      >
      >
    • Matt Sweeney
      Hi Jeroen, ... The Dom.setStyle method sets CSS style rules for HTML elements. This is normally just done via the element.style property, except for
      Message 2 of 14 , Sep 5 10:58 AM
      • 0 Attachment
        Hi Jeroen,

        Could some explain what this method
         exactly does?
        The Dom.setStyle method sets CSS style rules for HTML elements.  This is normally just done via the "element.style" property, except for opacity, which is normalized for IE.

        Can you elaborate on what issues you are having?

        Thanks,

        Matt

        harrykiri wrote:
        I'm struggeling with the same issue as Peter does. Actually my
        application breaks on this method. Could some explain what this method
         exactly does? I gasped at the code but didn't quite understood what
        this method does...
        
        Can this method be overruled by prototyping it?
        
        Kind regards,
        
        
        Jeroen
        
        --- In ydn-javascript@yahoogroups.com, "Peter Michaux"
        <petermichaux@...> wrote:
          
        Hi,
        
        Reading the Dom utility I see the following in setStyle()
        
          case 'opacity' :
            if (isIE && typeof el.style.filter == 'string') { // in case not
            
        appended
          
        Earlier in the library isIE is defined with
        
          var isIE = (window.ActiveXObject);
        
        Why is it necessary to check for window.ActiveXObject when setting
        opacity? Could the conditional be dropped to just the following?
        
          if (typeof el.style.filter == 'string')
        
        Thank you,
        Peter
        
            
        
        
        
        
        
        
         
        Yahoo! Groups Links
        
        <*> To visit your group on the web, go to:
            http://groups.yahoo.com/group/ydn-javascript/
        
        <*> To unsubscribe from this group, send an email to:
            ydn-javascript-unsubscribe@yahoogroups.com
        
        <*> Your use of Yahoo! Groups is subject to:
            http://docs.yahoo.com/info/terms/
         
        
        
        
        
        
          

      • Peter Michaux
        Hi ... Can you show an example of how it breaks and in which browser? ... What does that mean exactly? Peter
        Message 3 of 14 , Sep 5 11:24 AM
        • 0 Attachment
          Hi

          On 9/5/06, harrykiri <jeroensen@...> wrote:
          >
          > I'm struggeling with the same issue as Peter does. Actually my
          > application breaks on this method. Could some explain what this method
          > exactly does?

          Can you show an example of how it breaks and in which browser?


          > I gasped at the code but didn't quite understood what
          > this method does...

          >
          > Can this method be overruled by prototyping it?

          What does that mean exactly?

          Peter
        • Peter Michaux
          Hi Matt ... Is this other code you mention only internal to other Yahoo! pages? Thank you, Peter
          Message 4 of 14 , Sep 5 11:26 AM
          • 0 Attachment
            Hi Matt

            On 9/5/06, Matt Sweeney <msweeney@...> wrote:
            >
            > Hi Peter,
            >
            > Some code (outside of YUI) applies "element.style.filter" to all
            > browsers when setting filters for IE, which breaks opacity in
            > Dom.setStyle for other browsers. The IE check assures that we only set
            > opacity via filters for IE, allowing other browsers to fall through.

            Is this other code you mention only internal to other Yahoo! pages?

            Thank you,
            Peter
          • Matt Sweeney
            Hi Peter, ... This bit of defensive coding wasn t added in response to any specific issue/code. From what I ve seen, many folks will simply either write to
            Message 5 of 14 , Sep 5 12:23 PM
            • 0 Attachment
              Hi Peter,

              Is this other code you mention only internal to other Yahoo! pages?
              This bit of defensive coding wasn't added in response to any specific issue/code. 

              From what I've seen, many folks will simply either write to "style.filter" with no check at because it has no visible impact on other browsers, or will wrap with a cursory if (document.all) or some other weak form of object detection. 

              Checking explicitly for IE before setting opacity via filter ensures that other browsers also recieve opacity, regardless of the state of "style.filter".

              In general, object detection is often a brittle solution, because the object can not be trusted to work as advertised.  When in doubt, I prefer to add a bit of browser sniffing to allow proper execution in an many environments as possible.

              Matt

              Peter Michaux wrote:
              Hi Matt
              
              On 9/5/06, Matt Sweeney <msweeney@...> wrote:
                
              Hi Peter,
              
               Some code (outside of YUI) applies "element.style.filter" to all
               browsers when setting filters for IE, which breaks opacity in
               Dom.setStyle for other browsers.  The IE check assures that we only set
               opacity via filters for IE, allowing other browsers to fall through.
                  
              Is this other code you mention only internal to other Yahoo! pages?
              
              Thank you,
              Peter
              
              
               
              Yahoo! Groups Links
              
              <*> To visit your group on the web, go to:
                  http://groups.yahoo.com/group/ydn-javascript/
              
              <*> To unsubscribe from this group, send an email to:
                  ydn-javascript-unsubscribe@yahoogroups.com
              
              <*> Your use of Yahoo! Groups is subject to:
                  http://docs.yahoo.com/info/terms/
               
              
              
              
              
                

            • Peter Michaux
              ... Hi Matt, Thank you for the info. Programming a library for such a wide audience must be a difficult challenge in compromises. I asked Thomas Fuchs of
              Message 6 of 14 , Sep 5 4:28 PM
              • 0 Attachment
                On 9/5/06, Matt Sweeney <msweeney@...> wrote:
                >
                > > Is this other code you mention only internal to other Yahoo! pages?
                >
                > This bit of defensive coding wasn't added in response to any specific issue/code.
                >
                > From what I've seen, many folks will simply either write to "style.filter" with no check at because it has no visible impact on other browsers, or will wrap with a cursory if (document.all) or some other weak form of object detection.
                >
                > Checking explicitly for IE before setting opacity via filter ensures that other browsers also recieve opacity, regardless of the state of "style.filter".
                >
                > In general, object detection is often a brittle solution, because the object can not be trusted to work as advertised. When in doubt, I prefer to add a bit of browser sniffing to allow proper execution in an many environments as possible.

                Hi Matt,

                Thank you for the info. Programming a library for such a wide audience
                must be a difficult challenge in compromises.

                I asked Thomas Fuchs of Scriptaculous about a couple lines his
                setOpacity function which I have attached below and removed dependence
                on the $() and other support functions.

                The following part is apparently for a bug in Firefox <1.5 that caused
                flicker. I wonder if your use of "-moz-opacity" negates this bug. (I
                need to find out how to install another version of firefox to test
                this.)

                element.style.opacity = (/Gecko/.test(navigator.userAgent) &&
                !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
                0.999999 : 1.0;

                The line "if (value < 0.00001) {value = 0;} " makes sure that very
                small values don't translate to a strings like 1.6E-34 which isn't
                valid in CSS2, I believe. These strange values could be produced in an
                automated fade out type of animation. Maybe a good defensive line for
                you to add to your opacity section?

                I also think the way that Thomas has removed and added the alpha stuff
                for IE is interesting because it means other filters can stay in
                place. I don't need this but maybe it is a good safety for your method
                also?

                -Peter



                Element.setOpacity = function(element, value){
                if (typeof el == 'string') {el = document.getElementById(el);}
                if (value == 1) {
                element.style.opacity = (/Gecko/.test(navigator.userAgent) &&
                !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
                0.999999 : 1.0;
                if (/MSIE/.test(navigator.userAgent) && !window.opera) {
                element.style.filter.replace(/alpha\([^\)]*\)/gi,'');
                }
                } else {
                if (value < 0.00001) {value = 0;}
                element.style.opacity = value;
                if (/MSIE/.test(navigator.userAgent) && !window.opera) {
                element.style.filter.replace(/alpha\([^\)]*\)/gi,'') +
                'alpha(opacity='+value*100+')';
                }
                }
                };
              • Matt Sweeney
                Hi Peter, Yes, the gecko flicker is a known issue for older versions. Not wiping out existing filters would be a good addition. I ve also seen rounding issues
                Message 7 of 14 , Sep 5 4:47 PM
                • 0 Attachment
                  Hi Peter,

                  Yes, the gecko flicker is a known issue for older versions.

                  Not wiping out existing filters would be a good addition.  I've also seen rounding issues with animating opacity, and have it on my todo list to limit the number of significant digits for animated opacity.

                  Thanks,

                  Matt

                  Peter Michaux wrote:
                  On 9/5/06, Matt Sweeney <msweeney@...> wrote:
                    
                    Is this other code you mention only internal to other Yahoo! pages?
                        
                    This bit of defensive coding wasn't added in response to any specific issue/code.
                  
                   From what I've seen, many folks will simply either write to "style.filter" with no check at because it has no visible impact on other browsers, or will wrap with a cursory if (document.all) or some other weak form of object detection.
                  
                   Checking explicitly for IE before setting opacity via filter ensures that other browsers also recieve opacity, regardless of the state of "style.filter".
                  
                   In general, object detection is often a brittle solution, because the object can not be trusted to work as advertised.  When in doubt, I prefer to add a bit of browser sniffing to allow proper execution in an many environments as possible.
                      
                  Hi Matt,
                  
                  Thank you for the info. Programming a library for such a wide audience
                  must be a difficult challenge in compromises.
                  
                  I asked Thomas Fuchs of Scriptaculous about a couple lines his
                  setOpacity function which I have attached below and removed dependence
                  on the $() and other support functions.
                  
                  The following part is apparently for a bug in Firefox <1.5 that caused
                  flicker. I wonder if your use of "-moz-opacity" negates this bug. (I
                  need to find out how to install another version of firefox to test
                  this.)
                  
                      element.style.opacity = (/Gecko/.test(navigator.userAgent) &&
                                           !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
                                           0.999999 : 1.0;
                  
                  The line "if (value < 0.00001) {value = 0;} " makes sure that very
                  small values don't translate to a strings like 1.6E-34 which isn't
                  valid in CSS2, I believe. These strange values could be produced in an
                  automated fade out type of animation. Maybe a good defensive line for
                  you to add to your opacity section?
                  
                  I also think the way that Thomas has removed and added the alpha stuff
                  for IE is interesting because it means other filters can stay in
                  place. I don't need this but maybe it is a good safety for your method
                  also?
                  
                  -Peter
                  
                  
                  
                  Element.setOpacity = function(element, value){
                    if (typeof el == 'string') {el = document.getElementById(el);}
                    if (value == 1) {
                      element.style.opacity = (/Gecko/.test(navigator.userAgent) &&
                                           !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
                                           0.999999 : 1.0;
                      if (/MSIE/.test(navigator.userAgent) && !window.opera) {
                        element.style.filter.replace(/alpha\([^\)]*\)/gi,'');
                      }
                    } else {
                      if (value < 0.00001) {value = 0;}
                      element.style.opacity = value;
                      if (/MSIE/.test(navigator.userAgent) && !window.opera) {
                        element.style.filter.replace(/alpha\([^\)]*\)/gi,'') +
                                             'alpha(opacity='+value*100+')';
                      }
                    }
                  };
                  
                  
                   
                  Yahoo! Groups Links
                  
                  <*> To visit your group on the web, go to:
                      http://groups.yahoo.com/group/ydn-javascript/
                  
                  <*> To unsubscribe from this group, send an email to:
                      ydn-javascript-unsubscribe@yahoogroups.com
                  
                  <*> Your use of Yahoo! Groups is subject to:
                      http://docs.yahoo.com/info/terms/
                   
                  
                  
                  
                  
                  
                    

                • Peter Michaux
                  ... Must be very old versions because Firefox 1.0 on OS X and Win XP seem to work fine if do just element.style.opacity = 1 I imagine people clever enough to
                  Message 8 of 14 , Sep 5 5:10 PM
                  • 0 Attachment
                    On 9/5/06, Matt Sweeney <msweeney@...> wrote:
                    >
                    > Hi Peter,
                    >
                    > Yes, the gecko flicker is a known issue for older versions.

                    Must be very old versions because Firefox 1.0 on OS X and Win XP seem
                    to work fine if do just

                    element.style.opacity = 1

                    I imagine people clever enough to use Firefox before v1.0 have
                    probably upgraded.

                    -Peter
                  • Scott Schiller
                    Hi Peter, I believe this issue applies to current versions of Firefox as well - the flicker is seen when animating opacity from
                    Message 9 of 14 , Sep 5 5:28 PM
                    • 0 Attachment
                      Hi Peter,

                      I believe this issue applies to current versions of Firefox as well - the "flicker" is seen when animating opacity from <1 to 1. I believe in the case of a fade-in  (Y! Photos slideshow,) we found that end opacity to 0.999 as suggested gives effectively opaque display, but without the flicker. This looks to be what Thomas has concluded with also.

                      I haven't tried this, but I wonder if setting opacity to "auto" or default, or if somehow removing it altogether (instead of 0.999 or 1) might effectively "reset" the image, removing opacity without the flicker. (Maybe 1 does effectively this, and the flicker effect is a result.) Either way, iIn extreme cases or where large semi-opaque elements are being rendered and potentially left at 0.999, this might really hurt performance given those elements are still partially opaque.


                      Scott Schiller
                      Front-end Engineer, Yahoo! Photos

                      ----- Original Message ----
                      From: Peter Michaux <petermichaux@...>
                      To: ydn-javascript@yahoogroups.com
                      Sent: Tuesday, September 5, 2006 5:10:08 PM
                      Subject: Re: [ydn-javascript] set opacity browser sniffing necessary in Dom utility?

                      On 9/5/06, Matt Sweeney <msweeney@...> wrote:
                      >
                      >     Hi Peter,
                      >
                      >  Yes, the gecko flicker is a known issue for older versions.

                      Must be very old versions because Firefox 1.0 on OS X and Win XP seem
                      to work fine if do just

                        element.style.opacity = 1

                      I imagine people clever enough to use Firefox before v1.0 have
                      probably upgraded.

                      -Peter



                      Yahoo! Groups Links

                      <*> To visit your group on the web, go to:
                          http://groups.yahoo.com/group/ydn-javascript/

                      <*> To unsubscribe from this group, send an email to:
                          ydn-javascript-unsubscribe@yahoogroups.com

                      <*> Your use of Yahoo! Groups is subject to:
                          http://docs.yahoo.com/info/terms/






                    • Matt Sweeney
                      This issue is fixed in FF 1.0.7 and 1.5.
                      Message 10 of 14 , Sep 5 5:49 PM
                      • 0 Attachment
                        This issue is fixed in FF 1.0.7 and 1.5.

                        Scott Schiller wrote:
                        Hi Peter,

                        I believe this issue applies to current versions of Firefox as well - the "flicker" is seen when animating opacity from <1 to 1. I believe in the case of a fade-in  (Y! Photos slideshow,) we found that end opacity to 0.999 as suggested gives effectively opaque display, but without the flicker. This looks to be what Thomas has concluded with also.

                        I haven't tried this, but I wonder if setting opacity to "auto" or default, or if somehow removing it altogether (instead of 0.999 or 1) might effectively "reset" the image, removing opacity without the flicker. (Maybe 1 does effectively this, and the flicker effect is a result.) Either way, iIn extreme cases or where large semi-opaque elements are being rendered and potentially left at 0.999, this might really hurt performance given those elements are still partially opaque.


                        Scott Schiller
                        Front-end Engineer, Yahoo! Photos

                        ----- Original Message ----
                        From: Peter Michaux <petermichaux@...>
                        To: ydn-javascript@yahoogroups.com
                        Sent: Tuesday, September 5, 2006 5:10:08 PM
                        Subject: Re: [ydn-javascript] set opacity browser sniffing necessary in Dom utility?

                        On 9/5/06, Matt Sweeney <msweeney@...> wrote:
                        >
                        >     Hi Peter,
                        >
                        >  Yes, the gecko flicker is a known issue for older versions.

                        Must be very old versions because Firefox 1.0 on OS X and Win XP seem
                        to work fine if do just

                          element.style.opacity = 1

                        I imagine people clever enough to use Firefox before v1.0 have
                        probably upgraded.

                        -Peter



                        Yahoo! Groups Links

                        <*> To visit your group on the web, go to:
                            http://groups.yahoo.com/group/ydn-javascript/

                        <*> To unsubscribe from this group, send an email to:
                            ydn-javascript-unsubscribe@yahoogroups.com

                        <*> Your use of Yahoo! Groups is subject to:
                            http://docs.yahoo.com/info/terms/







                      • Peter Michaux
                        Hi Scott, ... Do you have a simple little example that shows the problem? I would like to experiement with this a bit. ... The the versions of Scriptaculous
                        Message 11 of 14 , Sep 5 6:06 PM
                        • 0 Attachment
                          Hi Scott,


                          On 9/5/06, Scott Schiller <idliketowork@...> wrote:
                          >
                          > I believe this issue applies to current versions of Firefox as well - the "flicker" is seen when animating opacity from <1 to 1. I believe in the case of a fade-in (Y! Photos slideshow,) we found that end opacity to 0.999 as suggested gives effectively opaque display, but without the flicker. This looks to be what Thomas has concluded with also.

                          Do you have a simple little example that shows the problem? I would
                          like to experiement with this a bit.


                          > I haven't tried this, but I wonder if setting opacity to "auto" or default, or if somehow removing it altogether (instead of 0.999 or 1) might effectively "reset" the image, removing opacity without the flicker. (Maybe 1 does effectively this, and the flicker effect is a result.) Either way, iIn extreme cases or where large semi-opaque elements are being rendered and potentially left at 0.999, this might really hurt performance given those elements are still partially opaque.

                          The the versions of Scriptaculous before 1.6.3 (released today) did
                          set opacity to null in the Gecko browsers.

                          (/Gecko/.test(navigator.userAgent) &&
                          !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
                          0.999999 : null });

                          I asked about the reason behind the change but Thomas hasn't replied
                          yet. I hope he does.

                          Thanks,
                          Peter
                        • Peter Michaux
                          Hi Matt, ... This sparked and interesting discussion on comp.lang.javascript. Here are a couple excerpts you might find interesting.
                          Message 12 of 14 , Sep 9 6:11 PM
                          • 0 Attachment
                            Hi Matt,

                            > > case 'opacity' :
                            > > if (isIE && typeof el.style.filter == 'string') { // in case not appended
                            > >
                            > >Earlier in the library isIE is defined with
                            > >
                            > > var isIE = (window.ActiveXObject);
                            > >
                            > > Why is it necessary to check for window.ActiveXObject when setting
                            > > opacity? Could the conditional be dropped to just the following?
                            > >
                            > > if (typeof el.style.filter == 'string')
                            >
                            > Is this other code you mention only internal to other Yahoo! pages?
                            >
                            > This bit of defensive coding wasn't added in response to any specific issue/code.
                            >
                            > From what I've seen, many folks will simply either write to "style.filter" with no check at because it has no visible impact on other browsers, or will wrap with a cursory if (document.all) or some other weak form of object detection.
                            >
                            > Checking explicitly for IE before setting opacity via filter ensures that other browsers also recieve opacity, regardless of the state of "style.filter".
                            >
                            > In general, object detection is often a brittle solution, because the object can not be trusted to work as advertised. When in doubt, I prefer to add a bit of browser sniffing to allow proper execution in an many environments as possible.


                            This sparked and interesting discussion on comp.lang.javascript. Here
                            are a couple excerpts you might find interesting.

                            http://groups.google.com/group/comp.lang.javascript/msg/9ff566e846b61f5c

                            Too many browsers have a global ActiveXObjet constructor (real
                            or object inference defeating dummy) for testing it in any context other
                            than a desire to instantiate an ActiveX object

                            http://groups.google.com/group/comp.lang.javascript/msg/6062e0a4bf9e7fb5

                            It would be enough to observe that in browser supporting -
                            style.filter - the TITLE element is accessible, has a - style - object
                            and that object has a testable - filter - property that is a string. It
                            would be insane for anyone to directly set a filter on an element that
                            has no visible manifestation in a page so testing that property may be
                            the test closet to the issue where the possibility of other scripts
                            assigning to - style.filter - exists.

                            http://groups.google.com/group/comp.lang.javascript/msg/e4ee76a3d5d1c0c1

                            The TITLE element is the only element that is _required_ in a valid HTML
                            document. And they are error-corrected into existence if omitted on
                            actual browsers (including IE).
                          Your message has been successfully submitted and would be delivered to recipients shortly.