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

resize utility: resize handle disappears when using innerHTML on resizable div

Expand Messages
  • Tom
    Hi all. Hope you can help me: I basically use the Split Pane resizing with Grids CSS example
    Message 1 of 1 , Dec 8, 2008
    • 0 Attachment
      Hi all.

      Hope you can help me:

      I basically use the "Split Pane resizing with Grids CSS" example
      (http://developer.yahoo.com/yui/examples/resize/grids_resize_clean.html)
      and changed some code to have two horizontal divs with the top one
      being resizable.
      Works perfect.
      But now I want to change the content of the top div dynamically.
      If I use innerHTML the resize handle disappears.

      I tried to attach

      <div class="yui-resize-handle yui-resize-handle-b" id="yui-gen0"><div
      class="yui-resize-handle-inner-b"></div></div>

      to the text that should appear in the top div.
      Doing this the resize handle is still there but is no longer functioning.

      I tried innerText (IE) resp. textContent (FF).
      Did not work.

      I tried to put a second div within the resizable div.
      But then I have problems with the scrolling when there is too much text
      in the div.


      Do you have a solution for me?


      Here is the code:

      <!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=utf-8">
      <title>Split Pane resizing with Grids CSS</title>


      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css" />
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.6.0/build/grids/grids-min.css" />
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.6.0/build/resize/assets/skins/sam/resize.css"
      />
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.6.0/build/utilities/utilities.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.6.0/build/resize/resize-min.js"></script>

      <style type="text/css">
      body {
      text-align:left;
      margin:0;
      padding:0;
      }
      </style>


      </head>

      <body class="yui-skin-sam">

      <style type="text/css">
      #top_div {
      width: 885px;
      height: 150px;
      overflow:auto;
      border:1px solid silver;
      background-color:yellow;
      text-align:left;
      }
      #bottom_div {
      width: 885px;
      height: 150px;
      overflow:auto;
      border:1px solid silver;
      background-color:orange;
      text-align:left;
      }

      </style>

      <script type="text/javascript">
      function ChangeContent() {
      YAHOO.util.Dom.get('top_div').innerHTML= 'TEST' + '<div
      class="yui-resize-handle yui-resize-handle-b" id="yui-gen0"><div
      class="yui-resize-handle-inner-b"></div></div>';
      }

      </script>

      <button onclick="ChangeContent();">Click for a test</button>


      <div id="top_div" style="margin-bottom:10px;">

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse
      justo nibh, pharetra at, adipiscing ullamcorper, rutrum ac, enim.
      Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae
      turpis porttitor tempor. Nam consectetuer est quis lacus. Mauris ut
      diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo
      egestas metus. Praesent condimentum bibendum metus. Sed sem sem,
      molestie et, venenatis eget, suscipit quis, dui. Lorem ipsum dolor sit
      amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra
      at, adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum
      metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor.
      Nam consectetuer est quis lacus. Mauris ut diam nec diam tincidunt
      eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent
      condimentum bibendum metus. Sed sem sem, molestie et, venenatis eget,
      suscipit quis, dui. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing
      ullamcorper, rutrum ac, enim. Nullam pretium interdum metus. Ut in
      neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam
      consectetuer est quis lacus. Mauris ut diam nec diam tincidunt
      eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent
      condimentum bibendum metus. Sed sem sem, molestie et, venenatis eget,
      suscipit quis, dui.

      </div>

      <div id="bottom_div">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse
      justo nibh, pharetra at, adipiscing ullamcorper, rutrum ac, enim.
      Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae
      turpis porttitor tempor. Nam consectetuer est quis lacus. Mauris ut
      diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo
      egestas metus. Praesent condimentum bibendum metus. Sed sem sem,
      molestie et, venenatis eget, suscipit quis, dui. Morbi molestie, ipsum
      nec posuere lobortis, massa diam aliquet pede, tempor ultricies neque
      tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum.
      Maecenas volutpat leo vitae leo. Nullam elit arcu, ullamcorper
      commodo, elementum nec, dictum nec, augue. Maecenas at tellus vitae
      ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis
      tristique eros.
      </div>

      <script>
      (function() {

      var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event,
      row1 = null
      row2 = null;

      Event.onDOMReady(function() {
      var size = parseInt(Dom.getStyle('top_div', 'height'), 10);
      row1 = Dom.get('top_div');
      row2 = Dom.get('bottom_div');
      var resize = new YAHOO.util.Resize('top_div', {
      handles: ['b'],
      minHeight: 4,
      maxHeight: 500
      });
      resize.on('resize', function(ev) {
      var h = ev.height;

      Dom.setStyle(row1, 'height', h + 'px');
      Dom.setStyle(row2, 'height', '');
      });

      resize.resize(null, 150, 885, 0, 0, true);
      });

      })();


      </script>

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