Skip to content
This repository

Including iframes at panels #37

stefslam opened this Issue · 5 comments

2 participants

stefslam Steve Schwartz

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.

Steve Schwartz

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.


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.

Steve Schwartz

@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.


thanks, i will check that out further more

Steve Schwartz

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

Steve Schwartz JangoSteve closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.