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

Re: How to do a resizable Panel ?

Expand Messages
  • codejoeblue
    Thanks, I now have this working. See the HTML file below. The trick, that I missed, is to make the DragDrop div have position:inherit ; I then resize the
    Message 1 of 14 , May 30, 2006
      Thanks, I now have this working. See the HTML file below. The trick,
      that I missed, is to make the DragDrop div have "position:inherit";

      I then resize the panel by doing the following:
      panel.body.style.height = // new height of body

      -Joe

      ----------------------------------------


      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>Floating Panel</title>

      <script type="text/javascript" src="3rdparty/yui/build/yahoo/yahoo.js"
      ></script>
      <script type="text/javascript" src="3rdparty/yui/build/event/event.js"
      ></script>
      <script type="text/javascript" src="3rdparty/yui/build/dom/dom.js"
      ></script>
      <script type="text/javascript"
      src="3rdparty/yui/build/dragdrop/dragdrop.js" ></script>
      <script type="text/javascript"
      src="3rdparty/yui/build/animation/animation.js" ></script>
      <script type="text/javascript"
      src="3rdparty/yui/build/container/container.js"></script>
      <script type="text/javascript"
      src="3rdparty/yui/build/menu/menu.js"></script>

      <link rel="stylesheet" type="text/css"
      href="3rdparty/yui/build/fonts/fonts.css" />
      <link rel="stylesheet" type="text/css" href="yahooexample.css" />
      <link rel="stylesheet" type="text/css"
      href="3rdparty/yui/build/container/assets/container.css" />
      <link rel="stylesheet" type="text/css" href="css/panel-xp.css" / >
      <link rel="stylesheet" type="text/css"
      href="3rdparty/yui/build/menu/assets/menu.css" />

      <script language="javascript">
      var panel;

      function init() {
      YAHOO.example.OverlayManager = new YAHOO.widget.OverlayManager();

      panel = new YAHOO.widget.Panel("panelDiv",
      {
      effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
      fixedcenter: false,
      constraintoviewport: false,
      monitorresize: false,
      underlay:"none",
      close:false,
      visible:true,
      draggable:true,
      x:100,
      y:100,
      width:"300px",
      modal:false }
      );

      /*
      var oMenuBar = new YAHOO.widget.MenuBar("mymenubar");

      var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter:
      true });
      oMenu.addItem( new YAHOO.widget.MenuItem("New") );
      oMenu.addItem( new YAHOO.widget.MenuItem("Open") );

      oMenuBar.addItem(oMenu);
      oMenuBar.render(document.body);
      oMenuBar.show();
      */

      var drag = new YAHOO.util.DD("resizeDiv");

      drag.onMouseDown = function(e) {
      this.startDragX = e.screenX;
      this.startDragY = e.screenY;
      this.startDragWidth = parseInt(panel.cfg.getProperty("width"));
      this.startDragHeight = panel.body.clientHeight;
      }

      drag.onDrag = function(e) {
      offsetX = (e.screenX - this.startDragX);
      offsetY = (e.screenY - this.startDragY);
      var newWidth = Math.max((this.startDragWidth + offsetX),20);
      var newHeight = Math.max((this.startDragHeight + offsetY),20);

      panel.cfg.setProperty("width",newWidth+"px");
      setHeight(panel,newHeight);
      };
      panel.render();
      panel.show();
      }

      function setHeight(panel,height) {
      buffer = panel.header.style.height + panel.footer.style.height;
      body_height = height;
      //panel.body.clientHeight = body_height;
      panel.body.style.height = body_height + "px";
      }

      YAHOO.util.Event.addListener(window, "load", init);


      </script>
      </head>
      <body>

      <div id="panelDiv" style="margin:0px;padding:0px">

      <!-- HEADER -->
      <div class="hd">
      <div class="tl"></div>
      <span>Test Panel </span>
      <div class="tr"></div>
      </div>

      <!-- BODY -->
      <div class="bd">
      <p>Panel content goes here </p>
      <p> </p>
      <p> </p>
      </div>

      <!-- FOOTER -->
      <!-- The resize icon is offset due to padding. See /img/xp-br.gif.
      The best solution may be to create an image with a
      transparent background
      -->
      <div class="ft" id="resizeDiv2">
      <div class="bl" ><span></span></div>
      <div id="resizeDiv" style="cursor:nw-resize;position:inherit;">
      <div align="right">
      Resize Here
      <!-- img src="icons/resize.jpg" style="align=absbottom;"
      --> </div>
      </div>
      <div class="br"></div>
      </div>

      </div>

      </body>
      </html>
    Your message has been successfully submitted and would be delivered to recipients shortly.