title: Resizable iframes jquery
body: <p>I want to have a <code>&lt;frameset&gt;</code> while using HTML5 and I managed to create something using html code and I want to make the two iframes resizable but also stay side by side and I have a problem between the two iframes because my code makes them resize independently and I want to have a resize like the one that is implemented in the old <code>&lt;frameset&gt;</code>.</p>
  
  <p>This is my html code:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="resizable1"&gt;
          &lt;iframe class="menu" src="menu.html"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
      &lt;div class="resizable2"&gt;
          &lt;iframe class="mainContent" src="events.html"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is my css: </p>
  
  <pre class="lang-css prettyprint-override"><code>.ui-resizable-helper {
      border: 1px dotted gray;
  }
  
  .resizable1 {
      float: left;
      width: 20%;
      height: 80%;
      display: block;
      border: 2px solid gray;
      overflow: hidden;
      position: relative;
  }
  
  .resizable2 {
      float: left;
      width: 75%;
      height: 80%;
      display: block;
      border: 2px solid gray;
      overflow: hidden;
      position: relative;
  }
  
  .menu {
      float: left;
      width: 20%;
      height: 80%;
  }
  
  .mainContent {
      float: left;
      width: 75%;
      height: 80%;
  }
  </code></pre>
  
  <p>This is my jQuery script:</p>
  
  <pre><code>$(function() {
          $(".resizable1").resizable({
              animate : true,
              animateEasing : 'swing',
              imateDuration : 500
          });
          $(".resizable2").resizable({
              animate : true,
              animateEasing : 'swing',
              imateDuration : 500
          });
      });
  &lt;/script&gt;
  </code></pre>