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

How to change animate width OR height of panel

Expand Messages
  • Gaurav Verma
    hi all !! i want to change height OR width of panel,and it is working well except thr is a issue in IE and FF2. In IE height of shadow comes greater than the
    Message 1 of 3 , May 23, 2008
    • 0 Attachment
      hi all !!

      i want to change height OR width of panel,and it is working well
      except thr is a issue in IE and FF2.

      In IE height of shadow comes greater than the panel's height and in
      FF2 there is flickering.if somebody can help solve this i would really
      appreciate this.

      demo : http://dev.lordsofodds.com/paneltest.html

      YAHOO.namespace("example.container");
      function resizeBody() {
      YAHOO.util.Dom.setStyle(this.body, 'height', 0 + 'px'); // Allow
      for IE6, height is really min-height
      var panelHeight = this.innerElement.clientHeight; // Content +
      Padding, no border (default sam skin padding = 0 for panel.innerElement)
      var headerHeight = this.header.offsetHeight; // Content +
      Padding + Border
      var footerHeight = this.footer.offsetHeight; // Content +
      Padding + Border
      var bodyHeight = (panelHeight - headerHeight - footerHeight) - 20;
      // 20px = default padding on body element with sam skin
      YAHOO.util.Dom.setStyle(this.body, 'height', bodyHeight + 'px');
      console.log(bodyHeight);
      }
      function init() {
      // Instantiate a Panel from markup
      YAHOO.example.container.panel1 = new YAHOO.widget.Panel("myPanel",
      { width:"400px",visible:false, constraintoviewport:true,fixedcenter:
      true,underlay:"shadow",modal:true } );
      YAHOO.example.container.panel1.cfg.subscribeToConfigEvent("height",
      resizeBody, YAHOO.example.container.panel1, true);

      //YAHOO.example.container.panel1.cfg.subscribeToConfigEvent("width",
      resizeBody, YAHOO.example.container.panel1, true);
      YAHOO.example.container.panel1.render();
      YAHOO.example.container.panel1.setHeader('kjskdjskdskds');

      YAHOO.example.container.panel1.setBody('kjskdjskdskds<br>xkjckxjcxkcjidfueieo<br>nccdkjdkj');
      YAHOO.example.container.panel1.show();
      var myAnim = new
      YAHOO.util.Anim(YAHOO.example.container.panel1.element, { width: { to:
      600 },height:{to:500} }, 1, YAHOO.util.Easing.easeNode);
      myAnim.onTween.subscribe(function(){
      var reg =
      YAHOO.util.Dom.getRegion(YAHOO.example.container.panel1.element);
      var width = reg.right - reg.left;
      var height = reg.bottom - reg.top;
      YAHOO.example.container.panel1.cfg.setProperty("width",width);
      YAHOO.example.container.panel1.cfg.setProperty("height",height);
      YAHOO.example.container.panel1.hide();
      YAHOO.example.container.panel1.sizeUnderlay();
      YAHOO.example.container.panel1.show();
      });
      myAnim.animate();
      }
      YAHOO.util.Event.addListener(window, "load", init);
    • Satyen Desai
      Hi, The IE issue is because of the fact that you don t have a strict doctype specified, so your bodyHeight calculations will differ for IE in quirks mode. See
      Message 2 of 3 , May 30, 2008
      • 0 Attachment
        Hi,
        The IE issue is because of the fact that you don't have a strict doctype specified, so your bodyHeight calculations will differ for IE in quirks mode.

        See the resizable panel example...

        http://developer.yahoo.com/yui/examples/container/panel-resize.html

        ... which attempts to account for both quirks and strict IE box model behaviors - the inclusion/exclusion (respectively) of padding and borders when determining what height to set on the body element is what needs to change.

        For your FF issue, not sure how much of a flicker you're seeing, but here's your example reworked to avoid the show/hide and avoid sizing the underlay (which is only required for IE6/7 quirks mode).

        You can see if it's better [ it also has a strict doctype defined ].

        http://yuiblog.com/sandbox/yui/v252/examples/container/animatedResize.html

        Hope that helps,
        Satyen

        ________________________________________
        From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Gaurav Verma
        Sent: Friday, May 23, 2008 4:20 AM
        To: ydn-javascript@yahoogroups.com
        Subject: [ydn-javascript] How to change animate width OR height of panel

        hi all !!

        i want to change height OR width of panel,and it is working well
        except thr is a issue in IE and FF2.

        In IE height of shadow comes greater than the panel's height and in
        FF2 there is flickering.if somebody can help solve this i would really
        appreciate this.

        demo : http://dev.lordsofodds.com/paneltest.html

        YAHOO.namespace("example.container");
        function resizeBody() {
        YAHOO.util.Dom.setStyle(this.body, 'height', 0 + 'px'); // Allow
        for IE6, height is really min-height
        var panelHeight = this.innerElement.clientHeight; // Content +
        Padding, no border (default sam skin padding = 0 for panel.innerElement)
        var headerHeight = this.header.offsetHeight; // Content +
        Padding + Border
        var footerHeight = this.footer.offsetHeight; // Content +
        Padding + Border
        var bodyHeight = (panelHeight - headerHeight - footerHeight) - 20;
        // 20px = default padding on body element with sam skin
        YAHOO.util.Dom.setStyle(this.body, 'height', bodyHeight + 'px');
        console.log(bodyHeight);
        }
        function init() {
        // Instantiate a Panel from markup
        YAHOO.example.container.panel1 = new YAHOO.widget.Panel("myPanel",
        { width:"400px",visible:false, constraintoviewport:true,fixedcenter:
        true,underlay:"shadow",modal:true } );
        YAHOO.example.container.panel1.cfg.subscribeToConfigEvent("height",
        resizeBody, YAHOO.example.container.panel1, true);

        //YAHOO.example.container.panel1.cfg.subscribeToConfigEvent("width",
        resizeBody, YAHOO.example.container.panel1, true);
        YAHOO.example.container.panel1.render();
        YAHOO.example.container.panel1.setHeader('kjskdjskdskds');

        YAHOO.example.container.panel1.setBody('kjskdjskdskds<br>xkjckxjcxkcjidfueieo<br>nccdkjdkj');
        YAHOO.example.container.panel1.show();
        var myAnim = new
        YAHOO.util.Anim(YAHOO.example.container.panel1.element, { width: { to:
        600 },height:{to:500} }, 1, YAHOO.util.Easing.easeNode);
        myAnim.onTween.subscribe(function(){
        var reg =
        YAHOO.util.Dom.getRegion(YAHOO.example.container.panel1.element);
        var width = reg.right - reg.left;
        var height = reg.bottom - reg.top;
        YAHOO.example.container.panel1.cfg.setProperty("width",width);
        YAHOO.example.container.panel1.cfg.setProperty("height",height);
        YAHOO.example.container.panel1.hide();
        YAHOO.example.container.panel1.sizeUnderlay();
        YAHOO.example.container.panel1.show();
        });
        myAnim.animate();
        }
        YAHOO.util.Event.addListener(window, "load", init);
      • Farooq Pasha Yahoo Mail 2
        i Satyen, I Have One Problem. I want to place a textbox and a submit button on to the panel and this panel should be displayed when we click any cell in the
        Message 3 of 3 , May 31, 2008
        • 0 Attachment
          i Satyen,
           I Have One Problem. I want to place a textbox and a submit button on to the panel and this panel should be displayed when we click any cell in the calendar i.e any date.. How can I achieve this.. Hope you will reply...
          Thanks,

          On Sat, May 31, 2008 at 2:37 AM, Satyen Desai <sdesai@...> wrote:

          Hi,
          The IE issue is because of the fact that you don't have a strict doctype specified, so your bodyHeight calculations will differ for IE in quirks mode.

          See the resizable panel example...

          http://developer.yahoo.com/yui/examples/container/panel-resize.html

          ... which attempts to account for both quirks and strict IE box model behaviors - the inclusion/exclusion (respectively) of padding and borders when determining what height to set on the body element is what needs to change.

          For your FF issue, not sure how much of a flicker you're seeing, but here's your example reworked to avoid the show/hide and avoid sizing the underlay (which is only required for IE6/7 quirks mode).

          You can see if it's better [ it also has a strict doctype defined ].

          http://yuiblog.com/sandbox/yui/v252/examples/container/animatedResize.html

          Hope that helps,
          Satyen

          ________________________________________
          From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Gaurav Verma
          Sent: Friday, May 23, 2008 4:20 AM
          To: ydn-javascript@yahoogroups.com
          Subject: [ydn-javascript] How to change animate width OR height of panel

          hi all !!

          i want to change height OR width of panel,and it is working well
          except thr is a issue in IE and FF2.

          In IE height of shadow comes greater than the panel's height and in
          FF2 there is flickering.if somebody can help solve this i would really
          appreciate this.

          demo : http://dev.lordsofodds.com/paneltest.html

          YAHOO.namespace("example.container");
          function resizeBody() {
          YAHOO.util.Dom.setStyle(this.body, 'height', 0 + 'px'); // Allow
          for IE6, height is really min-height
          var panelHeight = this.innerElement.clientHeight; // Content +
          Padding, no border (default sam skin padding = 0 for panel.innerElement)
          var headerHeight = this.header.offsetHeight; // Content +
          Padding + Border
          var footerHeight = this.footer.offsetHeight; // Content +
          Padding + Border
          var bodyHeight = (panelHeight - headerHeight - footerHeight) - 20;
          // 20px = default padding on body element with sam skin
          YAHOO.util.Dom.setStyle(this.body, 'height', bodyHeight + 'px');
          console.log(bodyHeight);
          }
          function init() {
          // Instantiate a Panel from markup
          YAHOO.example.container.panel1 = new YAHOO.widget.Panel("myPanel",
          { width:"400px",visible:false, constraintoviewport:true,fixedcenter:
          true,underlay:"shadow",modal:true } );
          YAHOO.example.container.panel1.cfg.subscribeToConfigEvent("height",
          resizeBody, YAHOO.example.container.panel1, true);

          //YAHOO.example.container.panel1.cfg.subscribeToConfigEvent("width",
          resizeBody, YAHOO.example.container.panel1, true);
          YAHOO.example.container.panel1.render();
          YAHOO.example.container.panel1.setHeader('kjskdjskdskds');

          YAHOO.example.container.panel1.setBody('kjskdjskdskds<br>xkjckxjcxkcjidfueieo<br>nccdkjdkj');
          YAHOO.example.container.panel1.show();
          var myAnim = new
          YAHOO.util.Anim(YAHOO.example.container.panel1.element, { width: { to:
          600 },height:{to:500} }, 1, YAHOO.util.Easing.easeNode);
          myAnim.onTween.subscribe(function(){
          var reg =
          YAHOO.util.Dom.getRegion(YAHOO.example.container.panel1.element);
          var width = reg.right - reg.left;
          var height = reg.bottom - reg.top;
          YAHOO.example.container.panel1.cfg.setProperty("width",width);
          YAHOO.example.container.panel1.cfg.setProperty("height",height);
          YAHOO.example.container.panel1.hide();
          YAHOO.example.container.panel1.sizeUnderlay();
          YAHOO.example.container.panel1.show();
          });
          myAnim.animate();
          }
          YAHOO.util.Event.addListener(window, "load", init);


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