title: how to resize an iframe to fit the enclosing panel
body: <p>I am using PrimeFaces 3 for this.</p>
  
  <p>I have an <strong>iframe</strong> element inside a <strong>p:panel</strong> which is enhanced with a <strong>p:resizable</strong> component.  What I want is to automatically resize the <strong>iframe</strong> on load and on resize event so that it fits the available width and height of the panel.</p>
  
  <p>Note that in this example, there is a <strong>p</strong> element with some text in it before the <strong>iframe</strong>.  So the relative origin of the <strong>iframe</strong> isn't a constant.   </p>
  
  <p>Here is the template code:</p>
  
  <pre><code>            &lt;h1&gt;Page To Test Stuff&lt;/h1&gt;
  
              &lt;script type="text/javascript"&gt;
                  function doIFrame(event, ui) {
                      var frame = document.getElementById("tFrame");
                      // now what?
                  }
              &lt;/script&gt;
  
              &lt;p:panel id="showit"&gt;
                  &lt;p&gt;
                      What I need is for the following iFrame (id="tFrame") to
                      automatically resize to the max available space inside 
                      the surrounding panel.  This needs to happen when the
                      window is initially drawn, and when the user clicks and
                      drags the resize icon.
                  &lt;/p&gt;
                  &lt;iframe id="tFrame" 
                          src="http://www.apple.com" 
                          /&gt;
              &lt;/p:panel&gt;
              &lt;p:resizable for="showit" onStop="doIFrame(event, ui)"/&gt;
  </code></pre>
  
  <p>My Javascript proficiency sucks but I am willing to learn. So I don't need more than a clue to get started.</p>