title: jQuery - Change Iframe height in the onclick event of a button inside the iframe
body: <p>Right now i am working on a simple HTML/jQuery script where i want to change the iframe height when i'm clicking on a button which is loaded by the iframe it self.</p>
  
  <p>Take a look at my code:</p>
  
  <p>index.php:</p>
  
  <pre><code>&lt;div id="outerdiv"&gt;
      &lt;iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no"    target="_parent"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>iframe.php:</p>
  
  <pre><code> &lt;HTML&gt;
   &lt;head&gt;
   &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
      &lt;script type="text/javascript"&gt;
      $("#SuperWebF1").click(function(){
  
          $('#inneriframe, #outerdiv', window.parent.document).css({"height":"450px"});
  
      })
      &lt;/script&gt;
   &lt;div style="display:block;height:300px;"&gt;
      &lt;h3&gt;The iframe content&lt;/h3&gt;  
          &lt;button type="button" id="SuperWebF1"&gt;Click me to resize the holding Iframe!&lt;/button&gt;
    &lt;/div&gt;        
  </code></pre>
  
  <p>Here is a demo of the index.php: <a href="http://beta.sportsdirect.bg/test/" rel="nofollow">http://beta.sportsdirect.bg/test/</a></p>
  
  <p>When you open it you'll see the button which is loaded by the iframe.
  When you click the button the iframe is not changing height!</p>
  
  <p>Why, is there a mistake?</p>
  
  <p>Can you help me make this thing work ?</p>
  
  <p>Thanks in advance!</p>