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

RE: [ydn-javascript] Re: Panel sizing problem (actually resize handle positioning problem)

Expand Messages
  • Satyen Desai
    Hi, See if the following helps, based on your code snippet... http://yuiblog.com/sandbox/yui/v252/examples/container/resizePanel.html - Satyen P.S. In order to
    Message 1 of 5 , Jul 2, 2008
    • 0 Attachment
      Hi,
      See if the following helps, based on your code snippet...
      http://yuiblog.com/sandbox/yui/v252/examples/container/resizePanel.html

      - Satyen

      P.S. In order to support Resize (Drag and Drop) with an iframe involved, you will need to create an element to overlay the iframe and remove it when you've finished (or hide and show it respectively) to avoid mouse events getting lost, when you mouse over the iframe as Dav discusses here:

      http://tech.groups.yahoo.com/group/ydn-javascript/message/32706
      http://blog.davglass.com/files/yui/resize1/


      ________________________________________
      From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of aniad
      Sent: Monday, June 30, 2008 5:15 PM
      To: ydn-javascript@yahoogroups.com
      Subject: [ydn-javascript] Re: Panel sizing problem (actually resize handle positioning problem)

      Hi Dav,

      It doesn't make any difference, because if I create the panel shown
      ("visible:true"), the resize handle still paints, first time, in a
      wrong place.

      Ania.

      --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@...> wrote:
      >
      > aniad --
      >
      > If you are rendering the Panel hidden, I would suggest that you hook
      into the panels showEvent then create the resize instance on the first
      showing..
      >
      > Does that make sense?
      > Dav
      >
      > Dav Glass
      > dav.glass@...
      > blog.davglass.com
      >
      >
      >
      >
      > + Windows: n. - The most successful computer virus, ever. +
      > + A computer without a Microsoft operating system is like a dog
      > without bricks tied to its head +
      > + A Microsoft Certified Systems Engineer is to computing what a
      > McDonalds Certified Food Specialist is to fine cuisine +
      >
      >
      >
      > ----- Original Message ----
      > From: aniad <aniad@...>
      > To: ydn-javascript@yahoogroups.com
      > Sent: Monday, June 30, 2008 1:24:24 PM
      > Subject: [ydn-javascript] Re: Panel sizing problem (actually resize
      handle positioning problem)
      >
      > I have further diagnosed my problem. It has to do with giving initial
      > height to the panel. When panel size is indicated on creation, then
      > the first time the panel is shown (it is created hidden), the resize
      > handle is off. Sizing the panel very first time aligns the handle,
      > and any subsequent hide/show of the panel shows the resize handle
      > correctly.
      >
      > I want to create the panel hidden and I want to specify its width and
      > height, any ideas on how to get the resize handle positioned correctly?
      >
      > Below is fuller version of the code. Note, removing/adding the
      > height:"700px" from panel creation is what seems to cause the resize
      > handle positioning problem.
      >
      > Ania.
      >
      > <style type="text/css">
      > /* style for tool panel stuff */
      > #toolPanel .bd {
      > overflow:auto;
      > background-color:yellow;
      > padding:10px;
      > }
      >
      > #toolPanel .ft {
      > height:15px;
      > padding:0;
      > }
      >
      > #toolPanel .yui-resize-handle-br {
      > right:0;
      > bottom:0;
      > height: 8px;
      > width: 8px;
      > position:absolute;
      > }
      > </style>
      >
      > </head>
      >
      >
      > <script>
      > var gToolPanel;
      >
      > // QUIRKS FLAG, FOR BOX MODEL
      > var IE_QUIRKS = (YAHOO.env.ua.ie && document.compatMode ==
      > "BackCompat");
      >
      > // UNDERLAY/IFRAME SYNC REQUIRED
      > var IE_SYNC = (YAHOO.env.ua.ie == 6 || (YAHOO.env.ua.ie == 7 &&
      > IE_QUIRKS));
      >
      > function init()
      > {
      > // Create panel where tools will show
      > gToolPanel = new YAHOO.widget.Panel( "toolPanel", {
      > xy:[100,100], modal: true, draggable: true, close: true, width:
      > "1100px", height: "700px", visible:false });
      > gToolPanel.render();
      >
      > var PANEL_BODY_PADDING = 20;
      > var resize = new YAHOO.util.Resize('toolPanel', {
      > handles: ['br'],
      > autoRatio: false,
      > status: true
      > });
      >
      > resize.on('resize', function(args) {
      >
      > var panelHeight = args.height;
      >
      > var headerHeight = this.header.offsetHeight; // Content +
      > Padding + Border
      > var footerHeight = this.footer.offsetHeight; // Content +
      > Padding + Border
      >
      > var bodyHeight = (panelHeight - headerHeight -
      footerHeight);
      > var bodyContentHeight = (IE_QUIRKS) ? bodyHeight :
      > bodyHeight - PANEL_BODY_PADDING;
      >
      > YAHOO.util.Dom.setStyle(this.body, 'height',
      > bodyContentHeight + 'px');
      >
      > if (IE_SYNC) {
      >
      > this.sizeUnderlay();
      > this.syncIframe();
      > }
      > }, gToolPanel, true);
      >
      > YAHOO.util.Event.on("showbtn", "click", showPanel, gToolPanel,
      > true);
      >
      > }
      >
      > function showPanel()
      > {
      > window.frames["toolFrame"].location.href =
      "http://www.yahoo.com";
      > gToolPanel.show();
      > }
      >
      > YAHOO.util.Event.onDOMReady(init);
      >
      > </script>
      >
      >
      > <body class=" yui-skin-sam">
      > <button id="showbtn">Show Resizable Panel</button>
      >
      > <div id="toolPanel" style="border-left-color: #ff3333;
      > border-bottom-color: #ff3333; border-top-style: solid;
      > border-top-color: #ff3333; border-right-style: solid;
      > border-left-style: solid; border-right-color: #ff3333;
      > border-bottom-style: solid;">
      > <div class="hd">Important Tool</div>
      > <div class="bd" style="height:100%; border-left-color: green;
      > border-bottom-color: green; border-top-style: solid; border-top-color:
      > green; border-right-style: solid; border-left-style: solid;
      > border-right-color: green; border-bottom-style: solid;">
      > <iframe id="toolFrame" name="toolFrame" src=""
      > style="height:95%; width:95%; border-left-color: blue;
      > border-bottom-color: blue; border-top-style: solid; border-top-color:
      > blue; border-right-style: solid; border-left-style: solid;
      > border-right-color: blue; border-bottom-style: solid;">foo</iframe>
      > </div>
      > <div class="ft">Footer</div>
      > </div>
      > </body>
      >
      >
      >
      > --- In ydn-javascript@yahoogroups.com, "aniad" <aniad@> wrote:
      > >
      > > I have a resizable panel which has an <iframe> inside it. I'm having
      > > a really hard time getting the panel, resize control and my iframe to
      > > size properly. The resize control's handle shows up in a weird place,
      > > and so does the body's div and iframe.
      > >
      > > Any suggestions on what the problem might be?
      > >
      > > Thank you,
      > > Ania.
      > >
      > > Here is the code, please note I put different color border on divs and
      > > iframe to try to make sense of the sizing issue:
      > >
      > > <style type="text/css">
      > > #toolPanel .bd {
      > > overflow:auto;
      > > height:10em;
      > > background-color:#fff;
      > > padding:10px;
      > > }
      > >
      > > #toolPanel .ft {
      > > height:15px;
      > > padding:0;
      > > }
      > >
      > > #toolPanel .yui-resize-handle-br {
      > > right:0;
      > > bottom:0;
      > > height: 8px;
      > > width: 8px;
      > > position:absolute;
      > > }
      > >
      > > </style>
      > >
      > > </head>
      > >
      > >
      > > <script>
      > > var gToolPanel;
      > >
      > > function init()
      > > {
      > > // Create panel
      > > gToolPanel = new YAHOO.widget.Panel( "toolPanel", {
      > > xy:[100,100], modal: true, draggable: true, close: true, width:
      > > "1100px", height: "700px", visible:true });
      > > gToolPanel.render();
      > >
      > > var PANEL_BODY_PADDING = 20;
      > >
      > > var resize = new YAHOO.util.Resize('toolPanel', {
      > > handles: ['br'],
      > > autoRatio: false,
      > > status: true
      > > });
      > >
      > > resize.on('resize', function(args) {
      > >
      > > var panelHeight = args.height;
      > >
      > > var headerHeight = this.header.offsetHeight;
      > > var footerHeight = this.footer.offsetHeight;
      > >
      > > var bodyHeight = (panelHeight - headerHeight -
      > footerHeight);
      > > var bodyContentHeight = (IE_QUIRKS) ? bodyHeight :
      > > bodyHeight - PANEL_BODY_PADDING;
      > >
      > > YAHOO.util.Dom.setStyle(this.body, 'height',
      > > bodyContentHeight + 'px');
      > >
      > > if (IE_SYNC) {
      > >
      > > this.sizeUnderlay();
      > > this.syncIframe();
      > > }
      > > }, gToolPanel, true);
      > >
      > > YAHOO.util.Event.on("showbtn", "click", showPanel, gToolPanel,
      > > true);
      > > }
      > >
      > > function showPanel()
      > > {
      > > window.frames["toolFrame"].location.href =
      > "http://www.yahoo.com";
      > > gToolPanel.show();
      > > }
      > >
      > > YAHOO.util.Event.onDOMReady(init);
      > >
      > > </script>
      > >
      > >
      > > <body class=" yui-skin-sam">
      > > <button id="showbtn">Show Resizable Panel</button>
      > >
      > > <div id="toolPanel" height=100% width=100% style="height:100%;
      > > width:100%; border-left-color: #ff3333; border-bottom-color: #ff3333;
      > > border-top-style: solid; border-top-color: #ff3333;
      > > border-right-style: solid; border-left-style: solid;
      > > border-right-color: #ff3333; border-bottom-style: solid;">
      > > <div class="hd">Important Tool</div>
      > > <div class="bd" style="height:100%; width:90%;"
      > > style="height:100%; width:100%; border-left-color: green;
      > > border-bottom-color: green; border-top-style: solid; border-top-color:
      > > green; border-right-style: solid; border-left-style: solid;
      > > border-right-color: green; border-bottom-style: solid;">
      > > <iframe id="toolFrame" name="toolFrame" width="100%"
      > > height="100%" src="" style="height:100%; width:100%;
      > > border-left-color: blue; border-bottom-color: blue; border-top-style:
      > > solid; border-top-color: blue; border-right-style: solid;
      > > border-left-style: solid; border-right-color: blue;
      > > border-bottom-style: solid;">foo</iframe>
      > > </div>
      > > <div class="ft"></div>
      > > </div>
      > > </body>
      > >
      >
      >
      >
      > ------------------------------------
      >
      > Yahoo! Groups Links
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.