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

Issue with Colorpicker and IE

Expand Messages
  • daginus
    Hello everyone, I ve been hunting around trying to figure out what I ve done wrong here. I m basically using the example code for making the colorpicker in a
    Message 1 of 5 , Aug 25, 2007
    • 0 Attachment
      Hello everyone, I've been hunting around trying to figure out what
      I've done wrong here.

      I'm basically using the example code for making the colorpicker in a
      popup panel, with a few modifications.

      Every time the page loads in IE, it throws an "Unknown Runtime Error"
      on line 1482 of colorpicker-beta.js which includes:

          this.getElement(this.ID.CONTROLS_LABEL).innerHTML =
                 (on) ? this.get(this.OPT.TXT).HIDE_CONTROLS :
                        this.get(this.OPT.TXT).SHOW_CONTROLS;

      I've tried manually setting the ids property of the colorpicker, but
      that causes IE to lockup for several minutes, and go bonkers. FF 2 and Opera 9 work just fine.

      All of the yui files are from the 2.3 release.

      Any ideas? I'm including the source below:

      <link rel="stylesheet" type="text/css" href="../../resources/scripts/yui/colorpicker/assets/skins/sam/colorpicker.css" />    
      <link rel="stylesheet" type="text/css" href="../../resources/scripts/yui/container/assets/skins/sam/container.css" />  
      <script type="text/javascript" src="../../resources/scripts/yui/utilities/utilities.js"></script>
      <script type="text/javascript" src="../../resources/scripts/yui/container/container.js"></script>
      <script type="text/javascript" src="../../resources/scripts/yui/slider/slider-min.js"></script>
      <script type="text/javascript" src="../../resources/scripts/yui/colorpicker/colorpicker-beta.js"></script>
      <script type="text/javascript" language="javascript">

      //global var which tells the colorpicker what item it should pass the
      color too
      var targetNum;

      YAHOO.namespace("example.colorpicker");

      YAHOO.example.colorpicker.inDialog = function() {

          var Event=YAHOO.util.Event,
              Dom=YAHOO.util.Dom,
              lang=YAHOO.lang;

              return {
          
              //In our initialization function, we'll create the dialog;
              //in its render event, we'll create our Color Picker instance.
              init: function() {

                  // Instantiate the Dialog
                  this.dialog = new YAHOO.widget.Dialog("yui-picker-panel", {
                      width : "400px",
                      close: true,
                      fixedcenter : true,
                      visible : false,
                      constraintoviewport : true,
                      buttons : [ { text:"Submit", handler:this.handleSubmit, isDefault:true },
                                  { text:"Cancel", handler:this.handleCancel } ]
                   });
       
                  // Once the Dialog renders, we want to create our Color Picker
                  // instance.
                  this.dialog.renderEvent.subscribe(function() {
                      if (!this.picker) { //make sure that we haven't already created
      our Color Picker
                          this.picker = new YAHOO.widget.ColorPicker("yui-picker", {
                              container: this.dialog,
                              showhexcontrols: false,
                              showwebsafe:true,
                              images: {
                                  PICKER_THUMB: "../../resources/scripts/yui/colorpicker/assets/picker_thumb.png",
                                  HUE_THUMB: "../../resources/scripts/yui/colorpicker/assets/hue_thumb.png"
                              },
                              text: {
                                  SHOW_CONTROLS:     "Show color details",
                                  HIDE_CONTROLS:     "Hide color details"
                              }
                              //Here are some other configurations we could use for our Picker:
                              //showcontrols: false,  // default is true, false hides the entire set of controls
                              //showhexcontrols: true, // default is false
                              //showhsvcontrols: true  // default is false
                          });


                      }
                  });    
                  
                  // If we wanted to do form validation on our Dialog, this
                  // is where we'd do it.  Remember to return true if validation
                  // passes; otherwise, your Dialog's submit method won't submit.
                  this.dialog.validate = function() {
                      return true;
                  };
                  
                  // We're all set up with our Dialog's configurations;
                  // now, render the Dialog
                  this.dialog.render();
                  
                  // We can wrap up initialization by wiring all of the buttons in our
                  // button dashboard to selectively show and hide parts of the
                  // Color Picker interface.  Remember that "Event" here is an
                  // alias for YAHOO.util.Event and "Event.on" is therfor a shortcut
                  // for YAHOO.util.Event.onAvailable -- the standard Dom event attachment
                  // method:
                  //Event.on("show", "click", this.dialog.show, this.dialog, true);

                  //initialization complete:
                  YAHOO.log("Example initialization complete.", "info", "example");

              },
              
              //We'll wire this to our Dialog's submit button:
              handleSubmit: function() {
                  document.getElementById("color[" + targetNum + "]").value = "#" + document.getElementById("yui-picker-hex").value;
                  document.getElementById("color[" + targetNum + "]").style.backgroundColor = "#" + document.getElementById("yui-picker-hex").value;
                  document.getElementById('yui-picker-panel').style.visibility = "hidden";
                  //log this step to logger:
                  YAHOO.log("Dialog was submitted.", "info", "example");
              },
       
               //If the Dialog's cancel button is clicked,
              //this function fires
              handleCancel: function() {
                  document.getElementById('yui-picker-panel').style.visibility = "hidden";
                  //the cancel method automatically hides the Dialog:
                  this.cancel();
              }
              
          }


      }();

      //The earliest safe moment to instantiate a Dialog (or any
      //Container element is onDOMReady; we'll initialize then:
      YAHOO.util.Event.onDOMReady(YAHOO.example.colorpicker.inDialog.init, YAHOO.example.colorpicker.inDialog, true);
    • Alex
      Another Interesting thing, the colorpicker works fine on the YUI examples page in IE, so I don t really think this is a bug, rather something I ve neglected.
      Message 2 of 5 , Aug 26, 2007
      • 0 Attachment
        Another Interesting thing, the colorpicker works fine on the YUI
        examples page in IE, so I don't really think this is a bug, rather
        something I've neglected.

        --- In ydn-javascript@yahoogroups.com, "daginus" <daginus@...> wrote:
        >
        > Hello everyone, I've been hunting around trying to figure out what
        > I've done wrong here.
        >
        > I'm basically using the example code for making the colorpicker in a
        > popup panel, with a few modifications.
        >
        > Every time the page loads in IE, it throws an "Unknown Runtime Error"
        > on line 1482 of colorpicker-beta.js which includes:
        >
        > this.getElement(this.ID.CONTROLS_LABEL).innerHTML =
        > (on) ? this.get(this.OPT.TXT).HIDE_CONTROLS :
        > this.get(this.OPT.TXT).SHOW_CONTROLS;
        >
        > I've tried manually setting the ids property of the colorpicker, but
        > that causes IE to lockup for several minutes, and go bonkers. FF 2 and
        > Opera 9 work just fine.
        >
        > All of the yui files are from the 2.3 release.
        >
        > Any ideas? I'm including the source below:
        >
        > <link rel="stylesheet" type="text/css"
        >
        href="../../resources/scripts/yui/colorpicker/assets/skins/sam/colorpick\
        > er.css" />
        > <link rel="stylesheet" type="text/css"
        >
        href="../../resources/scripts/yui/container/assets/skins/sam/container.c\
        > ss" />
        > <script type="text/javascript"
        > src="../../resources/scripts/yui/utilities/utilities.js"></script>
        > <script type="text/javascript"
        > src="../../resources/scripts/yui/container/container.js"></script>
        > <script type="text/javascript"
        > src="../../resources/scripts/yui/slider/slider-min.js"></script>
        > <script type="text/javascript"
        >
        src="../../resources/scripts/yui/colorpicker/colorpicker-beta.js"></scri\
        > pt>
        > <script type="text/javascript" language="javascript">
        >
        > //global var which tells the colorpicker what item it should pass the
        > color too
        > var targetNum;
        >
        > YAHOO.namespace("example.colorpicker");
        >
        > YAHOO.example.colorpicker.inDialog = function() {
        >
        > var Event=YAHOO.util.Event,
        > Dom=YAHOO.util.Dom,
        > lang=YAHOO.lang;
        >
        > return {
        >
        > //In our initialization function, we'll create the dialog;
        > //in its render event, we'll create our Color Picker instance.
        > init: function() {
        >
        > // Instantiate the Dialog
        > this.dialog = new YAHOO.widget.Dialog("yui-picker-panel", {
        > width : "400px",
        > close: true,
        > fixedcenter : true,
        > visible : false,
        > constraintoviewport : true,
        > buttons : [ { text:"Submit", handler:this.handleSubmit,
        > isDefault:true },
        > { text:"Cancel",
        handler:this.handleCancel }
        > ]
        > });
        >
        > // Once the Dialog renders, we want to create our Color
        > Picker
        > // instance.
        > this.dialog.renderEvent.subscribe(function() {
        > if (!this.picker) { //make sure that we haven't already
        > created
        > our Color Picker
        > this.picker = new
        > YAHOO.widget.ColorPicker("yui-picker", {
        > container: this.dialog,
        > showhexcontrols: false,
        > showwebsafe:true,
        > images: {
        > PICKER_THUMB:
        > "../../resources/scripts/yui/colorpicker/assets/picker_thumb.png",
        > HUE_THUMB:
        > "../../resources/scripts/yui/colorpicker/assets/hue_thumb.png"
        > },
        > text: {
        > SHOW_CONTROLS: "Show color details",
        > HIDE_CONTROLS: "Hide color details"
        > }
        > //Here are some other configurations we could
        > use for our Picker:
        > //showcontrols: false, // default is true,
        > false hides the entire set of controls
        > //showhexcontrols: true, // default is false
        > //showhsvcontrols: true // default is false
        > });
        >
        >
        > }
        > });
        >
        > // If we wanted to do form validation on our Dialog, this
        > // is where we'd do it. Remember to return true if
        > validation
        > // passes; otherwise, your Dialog's submit method won't
        > submit.
        > this.dialog.validate = function() {
        > return true;
        > };
        >
        > // We're all set up with our Dialog's configurations;
        > // now, render the Dialog
        > this.dialog.render();
        >
        > // We can wrap up initialization by wiring all of the
        > buttons in our
        > // button dashboard to selectively show and hide parts of
        > the
        > // Color Picker interface. Remember that "Event" here
        is an
        > // alias for YAHOO.util.Event and "Event.on" is therfor a
        > shortcut
        > // for YAHOO.util.Event.onAvailable -- the standard Dom
        > event attachment
        > // method:
        > //Event.on("show", "click", this.dialog.show, this.dialog,
        > true);
        >
        > //initialization complete:
        > YAHOO.log("Example initialization complete.", "info",
        > "example");
        >
        > },
        >
        > //We'll wire this to our Dialog's submit button:
        > handleSubmit: function() {
        > document.getElementById("color[" + targetNum + "]").value =
        > "#" + document.getElementById("yui-picker-hex").value;
        > document.getElementById("color[" + targetNum +
        > "]").style.backgroundColor = "#" +
        > document.getElementById("yui-picker-hex").value;
        >
        document.getElementById('yui-picker-panel').style.visibility
        > = "hidden";
        > //log this step to logger:
        > YAHOO.log("Dialog was submitted.", "info", "example");
        > },
        >
        > //If the Dialog's cancel button is clicked,
        > //this function fires
        > handleCancel: function() {
        >
        document.getElementById('yui-picker-panel').style.visibility
        > = "hidden";
        > //the cancel method automatically hides the Dialog:
        > this.cancel();
        > }
        >
        > }
        >
        >
        > }();
        >
        > //The earliest safe moment to instantiate a Dialog (or any
        > //Container element is onDOMReady; we'll initialize then:
        > YAHOO.util.Event.onDOMReady(YAHOO.example.colorpicker.inDialog.init,
        > YAHOO.example.colorpicker.inDialog, true);
        >
      • Eric Miraglia
        dagnius, Can you point to a URL where this is failing for you? Always easier to help debug that way. Regards, Eric
        Message 3 of 5 , Aug 27, 2007
        • 0 Attachment
          dagnius,

          Can you point to a URL where this is failing for you?  Always easier to help debug that way.

          Regards,
          Eric


          ______________________________________________
          Eric Miraglia
          Yahoo! User Interface Library


          On Aug 25, 2007, at 8:59 AM, daginus wrote:

          Hello everyone, I've been hunting around trying to figure out what
          I've done wrong here.

          I'm basically using the example code for making the colorpicker in a
          popup panel, with a few modifications.

          Every time the page loads in IE, it throws an "Unknown Runtime Error"
          on line 1482 of colorpicker-beta.js which includes:

              this.getElement(this.ID.CONTROLS_LABEL).innerHTML =
                     (on) ? this.get(this.OPT.TXT).HIDE_CONTROLS :
                            this.get(this.OPT.TXT).SHOW_CONTROLS;< br>
          I've tried manually setting the ids property of the colorpicker, but
          that causes IE to lockup for several minutes, and go bonkers. FF 2 and Opera 9 work just fine.

          All of the yui files are from the 2.3 release.

          Any ideas? I'm including the source below:

          <link rel="stylesheet" type="text/css" href="../../resources/scripts/yui/colorpicker/assets/skins/sam/colorpicker.css" />    
          <link rel="stylesheet" type="text/css" href="../../resources/scripts/yui/container/assets/skins/sam/container.css" />  
          <script type="text/javascript" src="../../resources/scripts/yui/utilities/utilities.js"></script>
          <script type="text/javascript" src="../../resources/scripts/yui/container/container.js"></script>
          <script type="text/javascript" src="../../resources/scripts/yui/sl ider/slider-min.js"></script>
          <script type="text/javascript" src="../../resources/scripts/yui/colorpicker/colorpicker-beta.js"></script>
          <script type="text/javascript" language="javascript">

          //global var which tells the colorpicker what item it should pass the
          color too
          var targetNum;

          YAHOO.namespace("example.colorpicker");

          YAHOO.example.colorpicker.inDialog = function() {

              var Event=YAHOO.util.Event,
                  Dom=YAHOO.util.Dom,
                  lang=YAHOO.lang;

                  return {
              
                  //In our initialization function, we'll create the dialog;
                  //in its render event, we'll create our Color Picker instance.
            &nb sp;     init: function() {

                      // Instantiate the Dialog
                      this.dialog = new YAHOO.widget.Dialog("yui-picker-panel", {
                          width : "400px",
                          close: true,
                          fixedcenter : true,
                          visible : false,
                          constraintoviewport : true,
                          buttons : [ { text:"Submit", handler:this.handleSubmit, isDefault:true },
                  & nbsp;                   { text:"Cancel", handler:this.handleCancel } ]
                       });
           
                      // Once the Dialog renders, we want to create our Color Picker
                      // instance.
                      this.dialog.renderEvent.subscribe(function() {
                          if (!this.picker) { //make sure that we haven't already created
          our Color Picker
                              this.picker = new YAHOO.widget.ColorPicker("yui-picker", {
                          & nbsp;       container: this.dialog,
                                  showhexcontrols: false,
                                  showwebsafe:true,
                                  images: {
                                      PICKER_THUMB: "../../resources/scripts/yui/colorpicker/assets/picker_thumb.png",
                                      HUE_THUMB: "../../resources/scripts/yui/colorpicker/assets/hue_thumb.png"
                   & nbsp;              },
                                  text: {
                                      SHOW_CONTROLS:     "Show color details",
                                      HIDE_CONTROLS:     "Hide color details"
                                  }
                                  //Here are some other configurations we could use for our Picker:
                               &nb sp;  //showcontrols: false,  // default is true, false hides the entire set of controls
                                  //showhexcontrols: true, // default is false
                                  //showhsvcontrols: true  // default is false
                              });


                          }
                      });    
                      
                      // If we wanted to do form validation on our Dialog, this
                      // is where we'd do it.  Remember to return true if validation
                      // passes; otherwise, your Dialog's submit method won't submit.
                      this.dialog.validate = function() {
                          return true;
                      };
                      
                      // We're all set up with our Dialog's configurations;
                      // now, render the Dialog
                      this.dialog.render();
                      
                      // We can wrap up initialization by wiring all of the buttons in our
                      // button dashboard to selectively show and hide parts of the
                      // Color Picker interface.  Remember that "Event" here is an
                      // alias for YAHOO.util.Event and "Event.on" is therfor a shortcut
                      // for YAHOO.util.Event.onAvailable -- the standard Dom event attachment
                      // method:
                      //Event.on("show", "click", this.dialog.show, this.dialog, true);

                      //initialization complete:
                      YAHOO.log("Example initialization complete.", "info", "example");

               &n bsp;  },
                  
                  //We'll wire this to our Dialog's submit button:
                  handleSubmit: function() {
                      document.getElementById("color[" + targetNum + "]").value = "#" + document.getElementById("yui-picker-hex").value;
                      document.getElementById("color[" + targetNum + "]").style.backgroundColor = "#" + document.getElementById("yui-picker-hex").value;
                      document.getElementById('yui-picker-panel').style.visibility = "hidden";
                      //log this step to logger:
                      YAHOO.log("Dialog was submitted.", "info", "example");
                  },
           
                   //If the Dialog's cancel button is clicked,
                  //this function fires
                  handleCancel: function() {
                      document.getElementById('yui-picker-panel').style.visibility = "hidden";
                      //the cancel method automatically hides the Dialog:
                      this.cancel();
                  }
                  
              }


          }();

          //The earliest safe moment to instantiate a Dialog (or any
          //Container element is onDOMReady; we'll initialize then:
          YAHOO.util.Event.onDOMReady(YAHOO.example.colorpicker.inDialog.init, YAHOO.example.colorpicker.inDialog, true);


        • Adam Moore
          ... I don t know if this is the only problem, but this attribute should be txt , not text (text is a reserved word). There is an error in the
          Message 4 of 5 , Aug 27, 2007
          • 0 Attachment
            On Sat, Aug 25, 2007 at 03:59:28PM -0000, daginus wrote:
            > Hello everyone, I've been hunting around trying to figure out what
            > I've done wrong here.
            >
            > text: {
            > SHOW_CONTROLS: "Show color details",
            > HIDE_CONTROLS: "Hide color details"
            > }

            I don't know if this is the only problem, but this attribute should be
            "txt", not "text" (text is a reserved word). There is an error in the
            documentation, and we will fix that. In addition, when you update the
            text labels, you need to supply the values for all of the labels. The
            following example demonstrates an easy way to do this:

            http://developer.yahoo.com/yui/examples/colorpicker/colorpicker-custom_clean.html


            -Adam
          • Alex
            ... http://developer.yahoo.com/yui/examples/colorpicker/colorpicker-custom_clean.html ... Sorry it has taken me so long to get back to you on this, I ve been
            Message 5 of 5 , Aug 30, 2007
            • 0 Attachment
              --- In ydn-javascript@yahoogroups.com, Adam Moore <adamoore@...> wrote:
              >
              > On Sat, Aug 25, 2007 at 03:59:28PM -0000, daginus wrote:
              > > Hello everyone, I've been hunting around trying to figure out what
              > > I've done wrong here.
              > >
              > > text: {
              > > SHOW_CONTROLS: "Show color details",
              > > HIDE_CONTROLS: "Hide color details"
              > > }
              >
              > I don't know if this is the only problem, but this attribute should be
              > "txt", not "text" (text is a reserved word). There is an error in the
              > documentation, and we will fix that. In addition, when you update the
              > text labels, you need to supply the values for all of the labels. The
              > following example demonstrates an easy way to do this:
              >
              >
              http://developer.yahoo.com/yui/examples/colorpicker/colorpicker-custom_clean.html
              >
              >
              > -Adam
              >

              Sorry it has taken me so long to get back to you on this, I've been
              out of the office.

              I'm a little confused by what you've told me concerning supplying the
              values for all the labels. The example you've given me doesn't update
              all of the labels, simply the R, G, and B. Unless you are referring to
              the IDs of those fields as well.

              In any case, that doesn't appear to be the issue. I've removed that
              declaration, and the script still fails in IE at that same point
              mentioned earlier.

              I'll try to get an example online somewhere in the near future.

              Cheers!

              -Alex
            Your message has been successfully submitted and would be delivered to recipients shortly.