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

Re: Method to "clear" backgroundColor in IE?

Expand Messages
  • Jack Slocum
    ... about ... following ... #ffcc44 ... function(type, ... original_color ... here
    Message 1 of 9 , Aug 31, 2006
    • 0 Attachment
      --- In ydn-javascript@yahoogroups.com, "Joseph Woolley" <joe@...> wrote:
      >
      > Thanks to those that have posted previously, I've learned a good bit
      about
      > javascript and YAHOO.util.(Color)Anim and have put together the
      following
      > script:
      >
      >
      >
      > (embedded in php, using xajax to be precise)
      >
      >
      >
      > function highlightChangedElement($element) {
      >
      > global $objResponse;
      >
      >
      >
      > $script = "var original_color =
      > YAHOO.util.Dom.getStyle(\"{$element}\", \"backgroundColor\"); ";
      >
      > $script .= "var orange_fade = new
      > YAHOO.util.ColorAnim(\"{$element}\", { backgroundColor: { to:
      \"#ffcc44\"
      > }}, .4, YAHOO.util.Easing.bounceOut); ";
      >
      > $script .= "orange_fade.onComplete.subscribe(
      function(type,
      > args) { ";
      >
      > $script .= " var orange_fade_out = new
      > YAHOO.util.ColorAnim(\"{$element}\", { backgroundColor: { to:
      original_color
      > }}, 2, YAHOO.util.Easing.bounceOut); ";
      >
      > $script .= " orange_fade_out.onComplete.subscribe(
      > function(type, args) { ";
      >
      > $script .= " try { ";
      >
      > $script .= "
      > YAHOO.util.Dom.setStyle(\"{$element}\", \"backgroundColor\", null); ";
      >
      > $script .= " } catch(e) { ";
      >
      > $script .= " alert(e.message); ";
      >
      > $script .= " } ";
      >
      > $script .= " } ); ";
      >
      > $script .= " orange_fade_out.animate(); ";
      >
      > $script .= "} ); ";
      >
      > $script .= "orange_fade.animate(); ";
      >
      > $objResponse->script($script);
      >
      > }
      >
      >
      >
      > This works very well in FF, but fails in IE. I've tried setting the
      > backgroundColor property to "transparent" and "inherit"; I've tried
      > assigning it directly using el.style.backgroundColor = { insert values
      here
      > }; etc. I have yet to find a method that will work in IE.
      >
      >
      >
      > Basically, I need the inline style to return to "transparent" so the
      > previously configured CSS backgroundColor will shine through.
      >
      >
      >
      > Any ideas?
      >
      >
      >
      > Any assistance is greatly appreciated.
      >
      >
      >
      > // Joe
      >
    • Jack Slocum
      My last post had no body it seems? I guess the rich-text editor doesn t work in firefox 2 beta. Any you can try this:
      Message 2 of 9 , Aug 31, 2006
      • 0 Attachment
        My last post had no body it seems? I guess the rich-text editor
        doesn't work in firefox 2 beta. Any you can try this:

        YAHOO.util.Dom.setSyle('background-color', '');

        Using dashes is IE friendly and the Dom class "camelizes" them for
        firefox.

        --- In ydn-javascript@yahoogroups.com, "Jack Slocum" <jvs308@...>
        wrote:
        >
        >
        > --- In ydn-javascript@yahoogroups.com, "Joseph Woolley" <joe@>
        wrote:
        > >
        > > Thanks to those that have posted previously, I've learned a good
        bit
        > about
        > > javascript and YAHOO.util.(Color)Anim and have put together the
        > following
        > > script:
        > >
        > >
        > >
        > > (embedded in php, using xajax to be precise)
        > >
        > >
        > >
        > > function highlightChangedElement($element) {
        > >
        > > global $objResponse;
        > >
        > >
        > >
        > > $script = "var original_color =
        > > YAHOO.util.Dom.getStyle(\"{$element}\", \"backgroundColor\"); ";
        > >
        > > $script .= "var orange_fade = new
        > > YAHOO.util.ColorAnim(\"{$element}\", { backgroundColor: { to:
        > \"#ffcc44\"
        > > }}, .4, YAHOO.util.Easing.bounceOut); ";
        > >
        > > $script .= "orange_fade.onComplete.subscribe(
        > function(type,
        > > args) { ";
        > >
        > > $script .= " var orange_fade_out = new
        > > YAHOO.util.ColorAnim(\"{$element}\", { backgroundColor: { to:
        > original_color
        > > }}, 2, YAHOO.util.Easing.bounceOut); ";
        > >
        > > $script .= " orange_fade_out.onComplete.subscribe
        (
        > > function(type, args) { ";
        > >
        > > $script .= " try { ";
        > >
        > > $script .= "
        > > YAHOO.util.Dom.setStyle(\"{$element}\", \"backgroundColor\",
        null); ";
        > >
        > > $script .= " } catch(e) { ";
        > >
        > > $script .= " alert(e.message); ";
        > >
        > > $script .= " } ";
        > >
        > > $script .= " } ); ";
        > >
        > > $script .= " orange_fade_out.animate(); ";
        > >
        > > $script .= "} ); ";
        > >
        > > $script .= "orange_fade.animate(); ";
        > >
        > > $objResponse->script($script);
        > >
        > > }
        > >
        > >
        > >
        > > This works very well in FF, but fails in IE. I've tried setting
        the
        > > backgroundColor property to "transparent" and "inherit"; I've
        tried
        > > assigning it directly using el.style.backgroundColor = { insert
        values
        > here
        > > }; etc. I have yet to find a method that will work in IE.
        > >
        > >
        > >
        > > Basically, I need the inline style to return to "transparent" so
        the
        > > previously configured CSS backgroundColor will shine through.
        > >
        > >
        > >
        > > Any ideas?
        > >
        > >
        > >
        > > Any assistance is greatly appreciated.
        > >
        > >
        > >
        > > // Joe
        > >
        >
      • Joseph Woolley
        Jack, Thank you for your reply and the tip! Works great! Now, I m wondering if there is a YAHOO-ish way to obtain THE background color, taking into account
        Message 3 of 9 , Aug 31, 2006
        • 0 Attachment

          Jack,

           

          Thank you for your reply and the tip!  Works great!

           

          Now, I’m wondering if there is a YAHOO-ish way to obtain THE background color, taking into account the parent nodes; meaning, if the style ‘background-color’ is transparent, walk up the parentNode(s) until a non-transparent color specification is found.

           

          I have a javascript function for this in my tools.js, but I’ve only tested it with FF and IE.

           

          // Joe

           


          From: ydn-javascript@yahoogroups.com [mailto: ydn-javascript@yahoogroups.com ] On Behalf Of Jack Slocum
          Sent: Thursday, August 31, 2006 10:59 PM
          To: ydn-javascript@yahoogroups.com
          Subject: [ydn-javascript] Re: Method to "clear" backgroundColor in IE?

           

          My last post had no body it seems? I guess the rich-text editor
          doesn't work in firefox 2 beta. Any you can try this:

          YAHOO.util.Dom. setSyle(' background- color', '');

          Using dashes is IE friendly and the Dom class "camelizes" them for
          firefox.


        • Matt Sweeney
          Hi Joe, There is no YUI pre-canned solution for this currently, but I ve thought about supplementing Dom.getStyle for backgroundColor to account for this. If
          Message 4 of 9 , Sep 1, 2006
          • 0 Attachment
            Hi Joe,

            There is no YUI pre-canned solution for this currently, but I've thought about supplementing Dom.getStyle for backgroundColor to account for this.  If you think this would be a useful enhancement, please add a feature request: http://sourceforge.net/tracker/?group_id=165715&atid=836479.

            Your approach of crawling the parentNodes and using Dom.getStyle() to find a value other than 'transparent' will work to get the inherited color, except for Safari, which returns "rgba(0, 0, 0, 0)" for transparent, so you'll have to test for that as well.  In the case where no backgroundColor is found, you may want to provide a default color.

            Matt

            Joseph Woolley wrote:

            Jack,

             

            Thank you for your reply and the tip!  Works great!

             

            Now, I’m wondering if there is a YAHOO-ish way to obtain THE background color, taking into account the parent nodes; meaning, if the style ‘background-color’ is transparent, walk up the parentNode(s) until a non-transparent color specification is found.

             

            I have a javascript function for this in my tools.js, but I’ve only tested it with FF and IE.

             

            // Joe

             


            From: ydn-javascript@yahoogroups.com [mailto: ydn-javascript@yahoogroups.com ] On Behalf Of Jack Slocum
            Sent: Thursday, August 31, 2006 10:59 PM
            To: ydn-javascript@yahoogroups.com
            Subject: [ydn-javascript] Re: Method to "clear" backgroundColor in IE?

             

            My last post had no body it seems? I guess the rich-text editor
            doesn't work in firefox 2 beta. Any you can try this:

            YAHOO.util.Dom. setSyle(' background- color', '');

            Using dashes is IE friendly and the Dom class "camelizes" them for
            firefox.



          • Joseph Woolley
            Matt, Thank you for the Safari tip! I ll add that to the function I currently use. Regarding the default color, I did catch that issue and return white
            Message 5 of 9 , Sep 1, 2006
            • 0 Attachment

              Matt,

               

              Thank you for the Safari tip!  I’ll add that to the function I currently use.  Regarding the default color, I did catch that issue and return white (#ffffff) when I reach the BODY tag (and still get transparent); I’m still left wondering if this will produce weird results on some browser(s), perhaps because of a user preference / override of the default..  I’ll be sure to clean up the code a bit and submit my current solution in the feature request.

               

              Regarding a supplement to getStyle:  I’d like to think that getStyle(…, “background-color”) would always return the true style setting, whether transparent or other; however, I’d love to see a pseudo style like “visible-background-color” that would return the actual color seen by the human… although, additionally I can see a use for “visible-background-color-overlapped”, which would return true or false, indicating whether a background-image is present that would overlap some or all of the background-color.

               

              While these pseudo styles *may* be beyond the scope of the YAHOO.util.Dom.getStyle function, they certainly would come in handy from time to time.  I hope they will at least be considered.  :D

               

              // Joe

               


              From: ydn-javascript@yahoogroups.com [mailto: ydn-javascript@yahoogroups.com ] On Behalf Of Matt Sweeney
              Sent: Friday, September 01, 2006 3:19 PM
              To: ydn-javascript@yahoogroups.com
              Subject: Re: [ydn-javascript] Re: Method to "clear" backgroundColor in IE?

               

              Hi Joe,

              There is no YUI pre-canned solution for this currently, but I've thought about supplementing Dom.getStyle for backgroundColor to account for this.  If you think this would be a useful enhancement, please add a feature request: http://sourceforge. net/tracker/ ?group_id= 165715&atid=836479.

              Your approach of crawling the parentNodes and using Dom.getStyle( ) to find a value other than 'transparent' will work to get the inherited color, except for Safari, which returns "rgba(0, 0, 0, 0)" for transparent, so you'll have to test for that as well.  In the case where no backgroundColor is found, you may want to provide a default color.

              Matt

              Joseph Woolley wrote:

              Jack,

               

              Thank you for your reply and the tip!  Works great!

               

              Now, I’m wondering if there is a YAHOO-ish way to obtain THE background color, taking into account the parent nodes; meaning, if the style ‘background-color’ is transparent, walk up the parentNode(s) until a non-transparent color specification is found.

               

              I have a javascript function for this in my tools.js, but I’ve only tested it with FF and IE.

               

              // Joe

               


              From: ydn-javascript@ yahoogroups. com [mailto:ydn-javascript@ yahoogroups. com ] On Behalf Of Jack Slocum
              Sent: Thursday, August 31, 2006 10:59 PM
              To: ydn-javascript@ yahoogroups. com
              Subject: [ydn-javascript] Re: Method to "clear" backgroundColor in IE?

               

              My last post had no body it seems? I guess the rich-text editor
              doesn't work in firefox 2 beta. Any you can try this:

              YAHOO.util.Dom. setSyle(' background- color', '');

              Using dashes is IE friendly and the Dom class "camelizes" them for
              firefox.



               

            • gdgirl_nls
              Message 6 of 9 , Sep 2, 2006
              • 0 Attachment
                --- In ydn-javascript@yahoogroups.com, "Peter Michaux"
                <petermichaux@...> wrote:
                >
                > Hi,
                >
                > In YAHOO.util.Event._unload(e, me) what does the "me" parameter do?
                > Could it be removed?
                >
                > Peter
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.