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
      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...

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

      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...


      ... 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 ].


      Hope that helps,

      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

      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');
      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 } );
      resizeBody, YAHOO.example.container.panel1, true);

      resizeBody, YAHOO.example.container.panel1, true);

      var myAnim = new
      YAHOO.util.Anim(YAHOO.example.container.panel1.element, { width: { to:
      600 },height:{to:500} }, 1, YAHOO.util.Easing.easeNode);
      var reg =
      var width = reg.right - reg.left;
      var height = reg.bottom - reg.top;
      YAHOO.util.Event.addListener(window, "load", init);

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