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

Re: yui colorpicker visibility

Expand Messages
  • boukicodeur
    ... visibility ... YAHOO.widget.Dialog( yui-picker-panel-2 , ... handler:this.handleCancel ... {rgb}. ... this.picker.set(this.picker.OPT.SHOW_HSV_CONTROLS,
    Message 1 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.