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

Cannot drag layout's splitter over iframe

Expand Messages
  • Ania
    I have a nested layout. The inner-bottom pane has an iframe. When resizing that bottom pane by dragging the
    Message 1 of 5 , Oct 30, 2009
    • 0 Attachment
      I have a nested layout.

      <right>
      <left>
      <center>
      <center>
      <bottom>

      The inner-bottom pane has an iframe. When resizing that bottom pane by dragging the horizontal splitter which divides the inner-center and inner-bottom, all works well. The splitter drags over the iframe. However, when trying to resize either the right pane or the left pane by dragging vertical splitters, they will not drag over the iframe part (but they will drag over the non-iframe parts). Please see the attached simple code which demonstrates this issue.

      Please advise how to enable dragging of all splitters over the inner-bottom's iframe part.

      Thank you,
      Ania.

      <body class=" yui-skin-sam">
      <div id="layoutDiv" height="500px"></div>
      <div id="top1">top1</div>
      <div id="bottom2">
      Can drag here
      <br /><br />
      <iframe id="frm2" name="frm2" src="http://www.yahoo.com" style="height:300;width:100%;">foo</iframe>
      <br />
      And can drag here
      </div>
      <div id="right1">right1</div>
      <div id="left1">left1</div>
      <div id="center2">center2</div>
      <script>

      (function() {
      var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event;

      Event.onDOMReady(function() {
      var layout = new YAHOO.widget.Layout("layoutDiv",{
      height: 800,
      units: [
      { position: 'right', header: 'Right', width: 300, resize: true, gutter: '2px 5px', footer: 'Footer', collapse: true, scroll: true, body: 'right1', maxWidth: 500 },
      { position: 'left', header: 'Left', width: 200, resize: true, body: 'left1', gutter: '2px 5px', collapse: true, collapseSize: 50, scroll: true, maxWidth: 500 },
      { position: 'center' }
      ]
      }); // layout
      layout.on('render', function() {
      var el = layout.getUnitByPosition('center').get('wrap');
      var layout2 = new YAHOO.widget.Layout(el, {
      parent: layout,
      units: [
      { position: 'bottom', header: 'Cannot drag the left or right slider/splitter edge over the iframe part. However, can drag this bottom slider, the one right above.', height: 370, resize: true, body: 'bottom2', gutter: '5px', collapse: true },
      { position: 'center', body: 'center2', gutter: '2px', scroll: true }
      ]
      }); // on render
      layout2.render();
      });
      layout.render();
      });
      })();
      </script>
      </body>
    • Dav Glass
      Add the useShim configuration option to your Units: http://developer.yahoo.com/yui/docs/YAHOO.widget.LayoutUnit.html#config_useShim ... -- Dav Glass
      Message 2 of 5 , Oct 30, 2009
      • 0 Attachment
        Add the useShim configuration option to your Units:

        http://developer.yahoo.com/yui/docs/YAHOO.widget.LayoutUnit.html#config_useShim


        On Fri, 30 Oct 2009, Ania wrote:

        > I have a nested layout.
        >
        > <right>
        > <left>
        > <center>
        > <center>
        > <bottom>
        >
        > The inner-bottom pane has an iframe. When resizing that bottom pane by dragging the horizontal splitter which divides the inner-center and inner-bottom, all works well. The splitter drags over the iframe. However, when trying to resize either the right pane or the left pane by dragging vertical splitters, they will not drag over the iframe part (but they will drag over the non-iframe parts). Please see the attached simple code which demonstrates this issue.
        >
        > Please advise how to enable dragging of all splitters over the inner-bottom's iframe part.
        >
        > Thank you,
        > Ania.
        >
        > <body class=" yui-skin-sam">
        > <div id="layoutDiv" height="500px"></div>
        > <div id="top1">top1</div>
        > <div id="bottom2">
        > Can drag here
        > <br /><br />
        > <iframe id="frm2" name="frm2" src="http://www.yahoo.com" style="height:300;width:100%;">foo</iframe>
        > <br />
        > And can drag here
        > </div>
        > <div id="right1">right1</div>
        > <div id="left1">left1</div>
        > <div id="center2">center2</div>
        > <script>
        >
        > (function() {
        > var Dom = YAHOO.util.Dom,
        > Event = YAHOO.util.Event;
        >
        > Event.onDOMReady(function() {
        > var layout = new YAHOO.widget.Layout("layoutDiv",{
        > height: 800,
        > units: [
        > { position: 'right', header: 'Right', width: 300, resize: true, gutter: '2px 5px', footer: 'Footer', collapse: true, scroll: true, body: 'right1', maxWidth: 500 },
        > { position: 'left', header: 'Left', width: 200, resize: true, body: 'left1', gutter: '2px 5px', collapse: true, collapseSize: 50, scroll: true, maxWidth: 500 },
        > { position: 'center' }
        > ]
        > }); // layout
        > layout.on('render', function() {
        > var el = layout.getUnitByPosition('center').get('wrap');
        > var layout2 = new YAHOO.widget.Layout(el, {
        > parent: layout,
        > units: [
        > { position: 'bottom', header: 'Cannot drag the left or right slider/splitter edge over the iframe part. However, can drag this bottom slider, the one right above.', height: 370, resize: true, body: 'bottom2', gutter: '5px', collapse: true },
        > { position: 'center', body: 'center2', gutter: '2px', scroll: true }
        > ]
        > }); // on render
        > layout2.render();
        > });
        > layout.render();
        > });
        > })();
        > </script>
        > </body>
        >
        >
        >
        >

        --
        Dav Glass
        davglass@...
        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 +
      • Ania
        Dav, I ve added useShim:true to all the units. To no better results. I then tried adding it only to the outer layout, and not the inner, and then
        Message 3 of 5 , Oct 30, 2009
        • 0 Attachment
          Dav,
          I've added "useShim:true" to all the units. To no better results. I then tried adding it only to the outer layout, and not the inner, and then vice-versa. I cannot get this to work.
          Ania.


          --- In ydn-javascript@yahoogroups.com, Dav Glass <davglass@...> wrote:
          >
          > Add the useShim configuration option to your Units:
          >
          > http://developer.yahoo.com/yui/docs/YAHOO.widget.LayoutUnit.html#config_useShim
          >
          >
          > On Fri, 30 Oct 2009, Ania wrote:
          >
          > > I have a nested layout.
          > >
          > > <right>
          > > <left>
          > > <center>
          > > <center>
          > > <bottom>
          > >
          > > The inner-bottom pane has an iframe. When resizing that bottom pane by dragging the horizontal splitter which divides the inner-center and inner-bottom, all works well. The splitter drags over the iframe. However, when trying to resize either the right pane or the left pane by dragging vertical splitters, they will not drag over the iframe part (but they will drag over the non-iframe parts). Please see the attached simple code which demonstrates this issue.
          > >
          > > Please advise how to enable dragging of all splitters over the inner-bottom's iframe part.
          > >
          > > Thank you,
          > > Ania.
          > >
          > > <body class=" yui-skin-sam">
          > > <div id="layoutDiv" height="500px"></div>
          > > <div id="top1">top1</div>
          > > <div id="bottom2">
          > > Can drag here
          > > <br /><br />
          > > <iframe id="frm2" name="frm2" src="http://www.yahoo.com" style="height:300;width:100%;">foo</iframe>
          > > <br />
          > > And can drag here
          > > </div>
          > > <div id="right1">right1</div>
          > > <div id="left1">left1</div>
          > > <div id="center2">center2</div>
          > > <script>
          > >
          > > (function() {
          > > var Dom = YAHOO.util.Dom,
          > > Event = YAHOO.util.Event;
          > >
          > > Event.onDOMReady(function() {
          > > var layout = new YAHOO.widget.Layout("layoutDiv",{
          > > height: 800,
          > > units: [
          > > { position: 'right', header: 'Right', width: 300, resize: true, gutter: '2px 5px', footer: 'Footer', collapse: true, scroll: true, body: 'right1', maxWidth: 500 },
          > > { position: 'left', header: 'Left', width: 200, resize: true, body: 'left1', gutter: '2px 5px', collapse: true, collapseSize: 50, scroll: true, maxWidth: 500 },
          > > { position: 'center' }
          > > ]
          > > }); // layout
          > > layout.on('render', function() {
          > > var el = layout.getUnitByPosition('center').get('wrap');
          > > var layout2 = new YAHOO.widget.Layout(el, {
          > > parent: layout,
          > > units: [
          > > { position: 'bottom', header: 'Cannot drag the left or right slider/splitter edge over the iframe part. However, can drag this bottom slider, the one right above.', height: 370, resize: true, body: 'bottom2', gutter: '5px', collapse: true },
          > > { position: 'center', body: 'center2', gutter: '2px', scroll: true }
          > > ]
          > > }); // on render
          > > layout2.render();
          > > });
          > > layout.render();
          > > });
          > > })();
          > > </script>
          > > </body>
          > >
          > >
          > >
          > >
          >
          > --
          > Dav Glass
          > davglass@...
          > 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 +
          >
        • Dav Glass
          Then you need to post a link to an example.. ... -- Dav Glass davglass@gmail.com blog.davglass.com + Windows: n. - The most successful computer virus, ever. +
          Message 4 of 5 , Oct 30, 2009
          • 0 Attachment
            Then you need to post a link to an example..


            On Fri, 30 Oct 2009, Ania wrote:

            > Dav,
            > I've added "useShim:true" to all the units. To no better results. I then tried adding it only to the outer layout, and not the inner, and then vice-versa. I cannot get this to work.
            > Ania.
            >
            >
            > --- In ydn-javascript@yahoogroups.com, Dav Glass <davglass@...> wrote:
            > >
            > > Add the useShim configuration option to your Units:
            > >
            > > http://developer.yahoo.com/yui/docs/YAHOO.widget.LayoutUnit.html#config_useShim
            > >
            > >
            > > On Fri, 30 Oct 2009, Ania wrote:
            > >
            > > > I have a nested layout.
            > > >
            > > > <right>
            > > > <left>
            > > > <center>
            > > > <center>
            > > > <bottom>
            > > >
            > > > The inner-bottom pane has an iframe. When resizing that bottom pane by dragging the horizontal splitter which divides the inner-center and inner-bottom, all works well. The splitter drags over the iframe. However, when trying to resize either the right pane or the left pane by dragging vertical splitters, they will not drag over the iframe part (but they will drag over the non-iframe parts). Please see the attached simple code which demonstrates this issue.
            > > >
            > > > Please advise how to enable dragging of all splitters over the inner-bottom's iframe part.
            > > >
            > > > Thank you,
            > > > Ania.
            > > >
            > > > <body class=" yui-skin-sam">
            > > > <div id="layoutDiv" height="500px"></div>
            > > > <div id="top1">top1</div>
            > > > <div id="bottom2">
            > > > Can drag here
            > > > <br /><br />
            > > > <iframe id="frm2" name="frm2" src="http://www.yahoo.com" style="height:300;width:100%;">foo</iframe>
            > > > <br />
            > > > And can drag here
            > > > </div>
            > > > <div id="right1">right1</div>
            > > > <div id="left1">left1</div>
            > > > <div id="center2">center2</div>
            > > > <script>
            > > >
            > > > (function() {
            > > > var Dom = YAHOO.util.Dom,
            > > > Event = YAHOO.util.Event;
            > > >
            > > > Event.onDOMReady(function() {
            > > > var layout = new YAHOO.widget.Layout("layoutDiv",{
            > > > height: 800,
            > > > units: [
            > > > { position: 'right', header: 'Right', width: 300, resize: true, gutter: '2px 5px', footer: 'Footer', collapse: true, scroll: true, body: 'right1', maxWidth: 500 },
            > > > { position: 'left', header: 'Left', width: 200, resize: true, body: 'left1', gutter: '2px 5px', collapse: true, collapseSize: 50, scroll: true, maxWidth: 500 },
            > > > { position: 'center' }
            > > > ]
            > > > }); // layout
            > > > layout.on('render', function() {
            > > > var el = layout.getUnitByPosition('center').get('wrap');
            > > > var layout2 = new YAHOO.widget.Layout(el, {
            > > > parent: layout,
            > > > units: [
            > > > { position: 'bottom', header: 'Cannot drag the left or right slider/splitter edge over the iframe part. However, can drag this bottom slider, the one right above.', height: 370, resize: true, body: 'bottom2', gutter: '5px', collapse: true },
            > > > { position: 'center', body: 'center2', gutter: '2px', scroll: true }
            > > > ]
            > > > }); // on render
            > > > layout2.render();
            > > > });
            > > > layout.render();
            > > > });
            > > > })();
            > > > </script>
            > > > </body>
            > > >
            > > >
            > > >
            > > >
            > >
            > > --
            > > Dav Glass
            > > davglass@...
            > > 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 +
            > >
            >
            >

            --
            Dav Glass
            davglass@...
            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 +
          • Ania
            Dav, Yes, it does work, thank you! I was loading the wrong file. Thanks again! Ania.
            Message 5 of 5 , Nov 2, 2009
            • 0 Attachment
              Dav,
              Yes, it does work, thank you! I was loading the wrong file.
              Thanks again!
              Ania.


              --- In ydn-javascript@yahoogroups.com, Dav Glass <davglass@...> wrote:
              >
              > Then you need to post a link to an example..
              >
              >
              > On Fri, 30 Oct 2009, Ania wrote:
              >
              > > Dav,
              > > I've added "useShim:true" to all the units. To no better results. I then tried adding it only to the outer layout, and not the inner, and then vice-versa. I cannot get this to work.
              > > Ania.
              > >
              > >
              > > --- In ydn-javascript@yahoogroups.com, Dav Glass <davglass@> wrote:
              > > >
              > > > Add the useShim configuration option to your Units:
              > > >
              > > > http://developer.yahoo.com/yui/docs/YAHOO.widget.LayoutUnit.html#config_useShim
              > > >
              > > >
              > > > On Fri, 30 Oct 2009, Ania wrote:
              > > >
              > > > > I have a nested layout.
              > > > >
              > > > > <right>
              > > > > <left>
              > > > > <center>
              > > > > <center>
              > > > > <bottom>
              > > > >
              > > > > The inner-bottom pane has an iframe. When resizing that bottom pane by dragging the horizontal splitter which divides the inner-center and inner-bottom, all works well. The splitter drags over the iframe. However, when trying to resize either the right pane or the left pane by dragging vertical splitters, they will not drag over the iframe part (but they will drag over the non-iframe parts). Please see the attached simple code which demonstrates this issue.
              > > > >
              > > > > Please advise how to enable dragging of all splitters over the inner-bottom's iframe part.
              > > > >
              > > > > Thank you,
              > > > > Ania.
              > > > >
              > > > > <body class=" yui-skin-sam">
              > > > > <div id="layoutDiv" height="500px"></div>
              > > > > <div id="top1">top1</div>
              > > > > <div id="bottom2">
              > > > > Can drag here
              > > > > <br /><br />
              > > > > <iframe id="frm2" name="frm2" src="http://www.yahoo.com" style="height:300;width:100%;">foo</iframe>
              > > > > <br />
              > > > > And can drag here
              > > > > </div>
              > > > > <div id="right1">right1</div>
              > > > > <div id="left1">left1</div>
              > > > > <div id="center2">center2</div>
              > > > > <script>
              > > > >
              > > > > (function() {
              > > > > var Dom = YAHOO.util.Dom,
              > > > > Event = YAHOO.util.Event;
              > > > >
              > > > > Event.onDOMReady(function() {
              > > > > var layout = new YAHOO.widget.Layout("layoutDiv",{
              > > > > height: 800,
              > > > > units: [
              > > > > { position: 'right', header: 'Right', width: 300, resize: true, gutter: '2px 5px', footer: 'Footer', collapse: true, scroll: true, body: 'right1', maxWidth: 500 },
              > > > > { position: 'left', header: 'Left', width: 200, resize: true, body: 'left1', gutter: '2px 5px', collapse: true, collapseSize: 50, scroll: true, maxWidth: 500 },
              > > > > { position: 'center' }
              > > > > ]
              > > > > }); // layout
              > > > > layout.on('render', function() {
              > > > > var el = layout.getUnitByPosition('center').get('wrap');
              > > > > var layout2 = new YAHOO.widget.Layout(el, {
              > > > > parent: layout,
              > > > > units: [
              > > > > { position: 'bottom', header: 'Cannot drag the left or right slider/splitter edge over the iframe part. However, can drag this bottom slider, the one right above.', height: 370, resize: true, body: 'bottom2', gutter: '5px', collapse: true },
              > > > > { position: 'center', body: 'center2', gutter: '2px', scroll: true }
              > > > > ]
              > > > > }); // on render
              > > > > layout2.render();
              > > > > });
              > > > > layout.render();
              > > > > });
              > > > > })();
              > > > > </script>
              > > > > </body>
              > > > >
              > > > >
              > > > >
              > > > >
              > > >
              > > > --
              > > > Dav Glass
              > > > davglass@
              > > > 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 +
              > > >
              > >
              > >
              >
              > --
              > Dav Glass
              > davglass@...
              > 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 +
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.