title: Fancybox iframe dynamically resize
body: <p>After some time I am still having issues with resizing iframe height in FancyBox2.
  I am calling this in my parent:</p>
  
  <pre><code>$(document).ready(function() {
      $('.fancybox').fancybox();      
      $('.showframe').fancybox({
          openEffect : 'elastic',
          closeEffect : 'elastic',
          beforeShow: function(){
              this.width = ($('.fancybox-iframe').contents().find('body').width());
              this.height = ($('.fancybox-iframe').contents().find('body').height());
          }, 
          afterClose : function() {
              location.reload();
              return;
          },
          onUpdate : { autoHeight: true},
          helpers : {
              overlay : {closeClick: false}
          }
      });
  });
  </code></pre>
  
  <p>And it works properly when the iframe is opened, but in the iframe I have a script that allows users to upload images and display a preview of uploaded images, so the height of the iframe changes (depending on the number of photos uploaded), but FancyBox won't "resize the height". I am using this in my "child" iframe to trigger resize:</p>
  
  <pre><code>...some functions here that handle image upload and image display...
  parent.$.fancybox.scrollBox();
  </code></pre>
  
  <p>Now this works only in Firefox while Chrome and IE will show scroll-bars instead of resizing the iframe height. Is there a way to make this cross-browser compatible?</p>
  
  <p>EDIT: I get this code to work in all browsers:</p>
  
  <pre><code>parent.$('.fancybox-inner').height($('#wrap').height()+20);
  </code></pre>
  
  <p>but the problem is that iframe won't center (it will just resize in height, but won't re-center on screen). I've tried <code>parent.$.fancybox.center();</code> and  <code>parent.$.fancybox.reize();</code> and <code>parent.$.fancybox.update();</code> and what-not, but that only works in Firefox.</p>
  
  <p>I've found (by pure luck) that this actually works in all browsers (even IE8):</p>
  
  <pre><code>parent.$('.fancybox-inner').height($('#wrap').height()+30);
  parent.$.fancybox.reposition();
  </code></pre>