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

Re: [ydn-javascript] How to change animate width OR height of panel

Expand Messages
  • 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 1 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.