Javascript problem with iframe that's hidden before loaded

Posted by Aistina on Stack Overflow See other posts from Stack Overflow or by Aistina
Published on 2010-04-28T13:54:18Z Indexed on 2010/04/28 14:43 UTC
Read the original article Hit count: 241

I have a page that contains an iframe that gets loaded using Javascript:

index.html

<iframe id="myFrame" width="800" height="600" style="display: none;"></iframe>
<div id="loader"><!-- some loading indicator --></div>

<script type="text/javascript">
function someFunction() {
  var myFrame = document.getElementById('myFrame');
  var loader = document.getElementById('loader');

  loader.style.display = 'block';

  myFrame.src = 'myFrame.html';
  myFrame.onload = function() {
    myFrame.style.display = 'block';
    loader.style.display = 'none';
  };
}
</script>

The page that gets loaded in the iframe contains some Javascript logic which calculates the sizes of certain elements for the purposes of adding a JS driven scrollbar (jScrollPane + jQuery Dimensions).

myFrame.html

<div id="scrollingElement" style="overflow: auto;">
  <div id="several"></div>
  <div id="child"></div>
  <div id="elements"></div>
</div>

<script type="text/javascript">
$(document).load(function() {
  $('#scrollingElement').jScrollPane();
});
</script>

This works in Chrome (and probably other Webkit browsers), but fails in Firefox and IE because at the time jScrollPane gets called, all the elements are still invisble and jQuery Dimensions is unable to determine any element's dimensions.

Is there a way to make sure my iframe is visible before $(document).ready(...) gets called? Other than using setTimeout to delay jScrollPane, which is something I definitely want to avoid.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about iframe