Using Javascript on the Content of an iframe <p>I have a page with some tabbed content on it. A couple of the tabs contain iframes and I use a handy little script to resize the iframes to suit their content. It's</p> <pre><code>function autoResize(id){ var newheight; if(document.getElementById){ newheight=document.getElementById(id).contentWindow.document.body.scrollHeight; } newheight=(newheight)+40; // Makes a bit of extra room document.getElementById(id).height= (newheight) + "px"; } </code></pre> <p>Today I have added a little jQuery script to stop the tabbed area showing until it is fully loaded. This stops the tabs doing an unsightly little jump when the loading is complete. This is the script:</p> <pre><code>$(document).ready(function(){ $("#tabber").hide(); $("#loading").hide(); $("#loading").fadeIn(1000); }); $(window).load(function(){ $("#loading").hide(); $("#tabber").fadeIn(300); }); </code></pre> <p>The loading div contains a loading icon and the tabber div is the entire content of the tabbed area.</p> <p>This script is also stopping the iframe resizing working. In order to understand it better I added another script:</p> <pre><code>function checkResize(id){ var win=document.getElementById(id).contentWindow.document.body.scrollHeight; alert(win); </code></pre> <p>Sure enough, "win" comes up as zero. If I delete the $("#tabber").hide() line, "win" shows a sensible number for the height of the iframe.</p> <p>Is there another way of making the two things compatible?</p> <p>Vlad produced the solution: I had to use the jQuery version of visibility=hidden instead of the jQuery version of display:none. That doesn't actually exist in jQuery so I found out from <a href="http://stackoverflow.com/questions/9614622/equivalent-of-jquery-hide-to-set-visibility-hidden">another StackOverflow question</a> how to write my own functions to do it.</p> <p>The final script is</p> <pre><code>(function($) { $.fn.invisible = function() { return this.each(function() { $(this).css("visibility", "hidden"); }); }; $.fn.visible = function() { return this.each(function() { $(this).css("visibility", "visible"); }); }; }(jQuery)); $(document).ready(function(){ $("#tabber").invisible(); $("#loading").hide(); $("#loading").fadeIn(1000); }); $(window).load(function(){ $("#loading").hide(); $("#tabber").visible(); }); </code></pre> <p>My thanks to Vlad, and also RAS, for taking the trouble to look at my question and give their ideas.</p>