Including iframes at panels #37

stefslam opened this Issue Mar 26, 2012 · 5 comments


None yet
2 participants

Hi, thanks for this awesome plugin.

I would like to solve an issue that is bugging me for quite some time now.

I just want to load some iframes at the panels with 100% height. I mean to show the whole content of the iframe.
The content is always dynamic and the height is different in every occasion.
Is it possible and how?

Let me tell you what i have dome and what problem i face.

I have included the following codes

  1. Css just for the width.

    iframe { display:block; width:100%; border:none; }

  2. This is a function to resize the iframe

function sizeFrame(frameId) {

var F = document.getElementById(frameId);
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight; //IE6, IE7 and Chrome
alert(frameId + " -> " + F.height );/**/

  1. The panel

div id="tab-container" class='tab-container'>

     <ul class='etabs'>
       <li class='tab'><a href="#panel-1"><span>TAB 1</span></a></li>
       <li class='tab'><a href="#panel-2"><span>TAB 2</span></a></li>

<div class='panel-container'>

    <div id="panel-1">
             <iframe id="the_frame1" src="testframe1.php" onLoad='sizeFrame("the_frame1"); ></iframe>

    <div id="panel-2">
             <iframe id="the_frame2" src="testframe2.php" onLoad='sizeFrame("the_frame2"); ></iframe>


If the contents of the two iframes differ with their heights (that is if their heights are different) then the panel that contains the second loaded iframe has twice the height of the iframe and just shows empty lines.

I think that this happens because the panels resizes itself and with the function i added it resizes twice.

P.S. The same happens for more than two panels with iframes

I explained it as best as i could for now. If there is any misunderstanding or anything blury, just tell me to explain some more.

Any help is appreciated.


JangoSteve commented Apr 2, 2012

I think you have accurately pinpointed what's causing the problem. In the future, I may add a setting to turn off automatic resizing of the panels when the tabs are changed so that you can avoid conflicts like this. For now, you can turn animate to false, as the panels are only smoothly resized for the animation, so turning the animation off skips the panel resize that easytabs does.

stefslam commented Apr 9, 2012

Hi, I set animate: false, but it did not solve the problem. I am thinking of using another tab script because of this. But I really like this script. If it is easy to point where i should look to turn off the automativ resizing that would be awesome.


JangoSteve commented Apr 9, 2012

@stefslam setting animate: false will turn off the resizing. If you're still getting the resizing, then either animate isn't set to false or it's not easytabs that's doing the resizing. You can see on line 517 that if animate is false, then the resizing doesn't happen.

stefslam commented Apr 9, 2012

thanks, i will check that out further more


JangoSteve commented May 9, 2013

Closing this to help clean up open issues. Please let me know if it's still an issue.

@JangoSteve JangoSteve closed this May 9, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment