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

2801Re: Panel CSS problem (hd class)

Expand Messages
  • James Cowan
    Jul 6 2:18 AM
      --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
      <peterson@...> wrote:
      >
      > What DOCTYPE are you using? You should be using the strict DOCTYPE
      that we
      > include with the Panel examples. That should fix the header display.
      >
      >
      >
      > Steven Peterson
      >
      Switching to the strict DOCTYPE fixes it in IE but then things go
      wrong in Firefox (the panel does not display its full size).

      Here is the code.

      James

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
      4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
      1">
      <title>Resizable Panel</title>

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

      <link rel="stylesheet" type="text/css"
      href="style/yui/css/fonts.css" />
      <link rel="stylesheet" type="text/css"
      href="style/yui/css/example.css" />
      <link rel="stylesheet" type="text/css"
      href="style/yui/css/container.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: true,
      monitorresize: true,
      underlay:"none",
      close:true,
      visible:true,
      draggable:true,
      x:200,
      y:100,
      height:500,
      width:500,
      modal:false }
      );


      //var drag = new YAHOO.util.DD("panelDiv", "paneldrag");
      var drag = new YAHOO.util.DragDrop("panelDiv", "panelresize");

      drag.setHandleElId("resizeDiv");
      //drag.addInvalidHandleId("resizeDiv");

      drag.onMouseDown = function(e)
      {
      var panel = this.getEl();
      this.startWidth = panel.offsetWidth;
      this.startHeight = panel.offsetHeight;

      this.startPos = [YAHOO.util.Event.getPageX(e),
      YAHOO.util.Event.getPageY(e)];
      };

      drag.onDrag = function(e)
      {
      var newPos = [YAHOO.util.Event.getPageX(e),
      YAHOO.util.Event.getPageY(e)];

      var offsetX = newPos[0] - this.startPos[0];
      var offsetY = newPos[1] - this.startPos[1];

      var newWidth = Math.max(this.startWidth + offsetX, 10);
      var newHeight = Math.max(this.startHeight + offsetY, 10);

      var panel = this.getEl();
      panel.style.width = newWidth + "px";
      panel.style.height = newHeight + "px";
      };

      panel.render();
      panel.show();

      }

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

      </script>
      </head>
      <body>

      <div id="panelDiv">
      <div class="hd">
      <div class="tl"></div>
      <span>Resizable Window</span>
      <div class="tr"></div>
      </div>

      <div class="b">
      <span>Panel content goes here</span>
      </div>

      <div id="resizeDiv"
      style="position:absolute;bottom:0px;right:0px;width:10px;
      height:10px;background-color:red;font-
      size:1px;">
      </div>
      </div>

      </body>
      </html>
    • Show all 8 messages in this topic