adjust iframe height based on the content

Question

I am using the following script to adjust the iframe height automatically.

function autoIframe(frameId) {
  try {
    frame = document.getElementById(frameId);
    innerDoc = (frame.contentDocument) ?
               frame.contentDocument : frame.contentWindow.document;
    objToResize = (frame.style) ? frame.style : frame;
    objToResize.height = innerDoc.body.scrollHeight + 10 + 'px';
  }
  catch (err) {
    window.status = err.message;
  }
}

I have three jquery tabs and iframes in first two tabs(myiframe1 and myiframe2)

I am calling the above code at onload of the iframes like.

<iframe id="myiframe1" width="100%" onload="autoIframe('myiframe1');"
        scrolling="auto" frameborder="0" src="mypath1">
</iframe>

<iframe id="myiframe2" width="100%" onload="autoIframe('myiframe2');"
        scrolling="auto" frameborder="0" src="mypath2">
</iframe>

This works fine in google chrome and IE8. But in firefox, the iframe in first tab(visible tab) has the height as per the content and the iframe in second tab is not set with the proper height. The height of the second tab is set to 10px.

What may the problem here?

Answer 1

you can try this:

select the tab of the iframe you want to resize first (so when it became visible it gets an height) then select the first (current) tab again:

$('#tabs').tabs('select', 2);
// adjust second tab iframe height here 
$('#tabs').tabs('select', 1);

(probably the height of the invisible/unselected tab content is 0 so resizing won't work).

Answer 2

display:none elements have a height of 0 iirc, but jquery offers a way to "not hide but move tab-content out of screen".

You can find documentation/example here:

jquery ui docs - tabs - faq