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

Re: [ydn-javascript] Cannot drag layout's splitter over iframe

Expand Messages
  • 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 1 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 2 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 3 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 4 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.