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

yui colorpicker visibility

Expand Messages
  • boukicodeur
    hello, i m using the colorpicker however functions show and hide are not working the way I want to. Function show set visibility to visible and function hide
    Message 1 of 3 , Jul 30, 2008
    • 0 Attachment
      hello,
      i'm using the colorpicker however functions show and hide are not working the way I want to.
      Function show set visibility to visible and function hide set visibility to hidden, i would like to use display: inherit and display : none because visibility hidden still use space in the page

      here is my code

      YAHOO.namespace("colorpicker2");

      YAHOO.colorpicker2.inDialog = function() {

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

          return {
         
              init: function() {

                  this.dialog = new YAHOO.widget.Dialog("yui-picker-panel-2", {
                      width : "340px",
                      close: true,
                      fixedcenter : false,
                      visible : false,
                      constraintoviewport : true,
                      buttons : [ { text:"OK", handler:this.handleSubmit, isDefault:true },
                                  { text:"Annuler", handler:this.handleCancel } ]
                   });

                  this.dialog.renderEvent.subscribe(function() {
                      if (!this.picker) {
                          this.picker = new YAHOO.widget.ColorPicker("yui-picker-2", {
                              container: this.dialog,
                          txt: {
                              ILLEGAL_HEX:     "Illegal hex value entered",
                              SHOW_CONTROLS:     "",
                              HIDE_CONTROLS:     "",
                              CURRENT_COLOR:     "Currently selected color: {rgb}",
                              CLOSEST_WEBSAFE:"Closest websafe color: {rgb}. Click to select.",
                              R:                 "R",
                              G:                 "G",
                              B:                 "B",
                              H:                 "H",
                              S:                 "S",
                              V:                "V",
                              HEX:             "#",
                              DEG:            "\u00B0",
                              PERCENT:         "%"   
                          },
                              images: {
                                  PICKER_THUMB: "Images/picker_thumb.png",
                                  HUE_THUMB: "Images/hue_thumb.png"
                              }
                         
                          });
                          this.picker.set(this.picker.OPT.SHOW_HSV_CONTROLS, false);
                          this.picker.set(this.picker.OPT.SHOW_HEX_CONTROLS, false);
                          this.picker.set(this.picker.OPT.SHOW_RGB_CONTROLS, false);
                          this.picker.set(this.picker.OPT.SHOW_HEX_SUMMARY, false);

                      }
                  });   
                 
                  this.dialog.validate = function() {
                      return true;
                  };

                  this.dialog.callback = { success: this.handleSuccess, thisfailure: this.handleFailure };
                 
                  this.dialog.render();
                 
                  Event.on("show", "click", this.dialog.show, this.dialog, true);
                  Event.on("hide", "click", this.dialog.hide, this.dialog, true);

              },
             
              handleSubmit: function() {
                  document.getElementById('color2').value = "#" + this.picker.get('hex');
                  document.getElementById('viewColor2').style.background = "#" + this.picker.get('hex');
                  this.hide();
                  updateBanner();
              },
       
              handleCancel: function() {
                  this.cancel();
              }  
          }

      }();                                                        

      YAHOO.util.Event.onDOMReady(YAHOO.colorpicker2.inDialog.init, YAHOO.colorpicker2.inDialog, true);


    • y_lsmith
      ... = # ... Panel and its subclasses default hide/show behavior to update the visibility style property. It would be a bit of work to change that use
      Message 2 of 3 , Jul 30, 2008
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "boukicodeur" <boukicodeur@...>
        wrote:
        >
        > hello,
        > i'm using the colorpicker however functions show and hide are not
        > working the way I want to.
        > Function show set visibility to visible and function hide set visibility
        > to hidden, i would like to use display: inherit and display : none
        > because visibility hidden still use space in the page
        >
        > here is my code
        >
        > YAHOO.namespace("colorpicker2");
        >
        > YAHOO.colorpicker2.inDialog = function() {
        >
        > var Event=YAHOO.util.Event,
        > Dom=YAHOO.util.Dom,
        > lang=YAHOO.lang;
        >
        > return {
        >
        > init: function() {
        >
        > this.dialog = new YAHOO.widget.Dialog("yui-picker-panel-2",
        > {
        > width : "340px",
        > close: true,
        > fixedcenter : false,
        > visible : false,
        > constraintoviewport : true,
        > buttons : [ { text:"OK", handler:this.handleSubmit,
        > isDefault:true },
        > { text:"Annuler", handler:this.handleCancel
        > } ]
        > });
        >
        > this.dialog.renderEvent.subscribe(function() {
        > if (!this.picker) {
        > this.picker = new
        > YAHOO.widget.ColorPicker("yui-picker-2", {
        > container: this.dialog,
        > txt: {
        > ILLEGAL_HEX: "Illegal hex value entered",
        > SHOW_CONTROLS: "",
        > HIDE_CONTROLS: "",
        > CURRENT_COLOR: "Currently selected color:
        > {rgb}",
        > CLOSEST_WEBSAFE:"Closest websafe color: {rgb}.
        > Click to select.",
        > R: "R",
        > G: "G",
        > B: "B",
        > H: "H",
        > S: "S",
        > V: "V",
        > HEX: "#",
        > DEG: "\u00B0",
        > PERCENT: "%"
        > },
        > images: {
        > PICKER_THUMB: "Images/picker_thumb.png",
        > HUE_THUMB: "Images/hue_thumb.png"
        > }
        >
        > });
        > this.picker.set(this.picker.OPT.SHOW_HSV_CONTROLS,
        > false);
        > this.picker.set(this.picker.OPT.SHOW_HEX_CONTROLS,
        > false);
        > this.picker.set(this.picker.OPT.SHOW_RGB_CONTROLS,
        > false);
        > this.picker.set(this.picker.OPT.SHOW_HEX_SUMMARY,
        > false);
        >
        > }
        > });
        >
        > this.dialog.validate = function() {
        > return true;
        > };
        >
        > this.dialog.callback = { success: this.handleSuccess,
        > thisfailure: this.handleFailure };
        >
        > this.dialog.render();
        >
        > Event.on("show", "click", this.dialog.show, this.dialog,
        > true);
        > Event.on("hide", "click", this.dialog.hide, this.dialog,
        > true);
        >
        > },
        >
        > handleSubmit: function() {
        > document.getElementById('color2').value = "#" +
        > this.picker.get('hex');
        > document.getElementById('viewColor2').style.background
        = "#"
        > + this.picker.get('hex');
        > this.hide();
        > updateBanner();
        > },
        >
        > handleCancel: function() {
        > this.cancel();
        > }
        > }
        >
        > }();
        >
        > YAHOO.util.Event.onDOMReady(YAHOO.colorpicker2.inDialog.init,
        > YAHOO.colorpicker2.inDialog, true);
        >

        Panel and its subclasses default hide/show behavior to update the
        visibility style property. It would be a bit of work to change that
        use display instead. However, you can add this to the init method:

        this.dialog.showEvent.subscribe(function () {
        YAHOO.util.Dom.setStyle(this.element,'display','');
        },this.dialog,true);

        this.dialog.hideEvent.subscribe(function () {
        YAHOO.util.Dom.setStyle(this.element,'display','none');
        },this.dialog,true);

        I'm not terribly familiar with the inner workings of the Container
        family components, so YMMV, but I believe that should work.

        Hope this helps,
        Luke
      • boukicodeur
        ... visibility ... YAHOO.widget.Dialog( yui-picker-panel-2 , ... handler:this.handleCancel ... {rgb}. ... this.picker.set(this.picker.OPT.SHOW_HSV_CONTROLS,
        Message 3 of 3 , Jul 31, 2008
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "y_lsmith" <lsmith@...> wrote:
          >
          > --- In ydn-javascript@yahoogroups.com, "boukicodeur" <boukicodeur@>
          > wrote:
          > >
          > > hello,
          > > i'm using the colorpicker however functions show and hide are not
          > > working the way I want to.
          > > Function show set visibility to visible and function hide set
          visibility
          > > to hidden, i would like to use display: inherit and display : none
          > > because visibility hidden still use space in the page
          > >
          > > here is my code
          > >
          > > YAHOO.namespace("colorpicker2");
          > >
          > > YAHOO.colorpicker2.inDialog = function() {
          > >
          > > var Event=YAHOO.util.Event,
          > > Dom=YAHOO.util.Dom,
          > > lang=YAHOO.lang;
          > >
          > > return {
          > >
          > > init: function() {
          > >
          > > this.dialog = new
          YAHOO.widget.Dialog("yui-picker-panel-2",
          > > {
          > > width : "340px",
          > > close: true,
          > > fixedcenter : false,
          > > visible : false,
          > > constraintoviewport : true,
          > > buttons : [ { text:"OK", handler:this.handleSubmit,
          > > isDefault:true },
          > > { text:"Annuler",
          handler:this.handleCancel
          > > } ]
          > > });
          > >
          > > this.dialog.renderEvent.subscribe(function() {
          > > if (!this.picker) {
          > > this.picker = new
          > > YAHOO.widget.ColorPicker("yui-picker-2", {
          > > container: this.dialog,
          > > txt: {
          > > ILLEGAL_HEX: "Illegal hex value entered",
          > > SHOW_CONTROLS: "",
          > > HIDE_CONTROLS: "",
          > > CURRENT_COLOR: "Currently selected color:
          > > {rgb}",
          > > CLOSEST_WEBSAFE:"Closest websafe color:
          {rgb}.
          > > Click to select.",
          > > R: "R",
          > > G: "G",
          > > B: "B",
          > > H: "H",
          > > S: "S",
          > > V: "V",
          > > HEX: "#",
          > > DEG: "\u00B0",
          > > PERCENT: "%"
          > > },
          > > images: {
          > > PICKER_THUMB: "Images/picker_thumb.png",
          > > HUE_THUMB: "Images/hue_thumb.png"
          > > }
          > >
          > > });
          > >
          this.picker.set(this.picker.OPT.SHOW_HSV_CONTROLS,
          > > false);
          > >
          this.picker.set(this.picker.OPT.SHOW_HEX_CONTROLS,
          > > false);
          > >
          this.picker.set(this.picker.OPT.SHOW_RGB_CONTROLS,
          > > false);
          > > this.picker.set(this.picker.OPT.SHOW_HEX_SUMMARY,
          > > false);
          > >
          > > }
          > > });
          > >
          > > this.dialog.validate = function() {
          > > return true;
          > > };
          > >
          > > this.dialog.callback = { success: this.handleSuccess,
          > > thisfailure: this.handleFailure };
          > >
          > > this.dialog.render();
          > >
          > > Event.on("show", "click", this.dialog.show, this.dialog,
          > > true);
          > > Event.on("hide", "click", this.dialog.hide, this.dialog,
          > > true);
          > >
          > > },
          > >
          > > handleSubmit: function() {
          > > document.getElementById('color2').value = "#" +
          > > this.picker.get('hex');
          > > document.getElementById('viewColor2').style.background
          > = "#"
          > > + this.picker.get('hex');
          > > this.hide();
          > > updateBanner();
          > > },
          > >
          > > handleCancel: function() {
          > > this.cancel();
          > > }
          > > }
          > >
          > > }();
          > >
          > > YAHOO.util.Event.onDOMReady(YAHOO.colorpicker2.inDialog.init,
          > > YAHOO.colorpicker2.inDialog, true);
          > >
          >
          > Panel and its subclasses default hide/show behavior to update the
          > visibility style property. It would be a bit of work to change that
          > use display instead. However, you can add this to the init method:
          >
          > this.dialog.showEvent.subscribe(function () {
          > YAHOO.util.Dom.setStyle(this.element,'display','');
          > },this.dialog,true);
          >
          > this.dialog.hideEvent.subscribe(function () {
          > YAHOO.util.Dom.setStyle(this.element,'display','none');
          > },this.dialog,true);
          >
          > I'm not terribly familiar with the inner workings of the Container
          > family components, so YMMV, but I believe that should work.
          >
          > Hope this helps,
          > Luke
          >



          thanks a lot, it works :)

          I would like to know if there is a way to hide from the beginning the
          colorpicker because these events are not called at init.

          I tried in init method :
          YAHOO.util.Dom.setStyle(this.element,'display','none');
          and
          this.dialog.hide();
          but none of these is working :s
        Your message has been successfully submitted and would be delivered to recipients shortly.