Thursday, February 7, 2008

iFrame inside a Table inside a CSS Div - CONTINUED

OK, so I figured out that iFrames do not automatically adjust to their content, they stay a set size! That is why I was having problems getting the iFrame to adjust the size of the table and then the CSS Div...

So, I found some javascript that fixes that problem!

This guy has the solution on his blog:
http://neverbow.blogspot.com/2006/12/let-iframe-auto-adjust-its-height.html

Here's the gist of it, look on his blog for the full story:

Use javascript function below, to let iframe adjust its height automatically.

function SetCwinHeight(){
var cwin=document.getElementById("cwin");
if (document.getElementById){
if (cwin && !window.opera) {
if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
cwin.height = cwin.contentDocument.body.offsetHeight;
else if(cwin.Document && cwin.Document.body.scrollHeight)
cwin.height = cwin.Document.body.scrollHeight;
}
}
}

Then, add html code of iframe. Don't foreget the attribute "onload". Of course, the id of iframe should match "cwin" in the function SetCwinHeight:

<iframe width="778" align="center" height="200" id="cwin" name="cwin" onload="Javascript:SetCwinHeight()" frameborder="0" scrolling="no"></iframe>

At the end, recommend a function used to get the object of a html element.

function GetObj(objName){
if(document.getElementById){
return eval('document.getElementById("' + objName + '")');
}else if(document.layers){
return eval("document.layers['" + objName +"']");
}else{
return eval('document.all.' + objName);
}
}


OK, it works great! Except for one thing...

Now when I open it, the page height auto-adjusts, but now my iframe content moves up in the iframe and some of it is cut off, but only in Firefox and Camino browsers...

Man, what a headache!!!

Hopefully I'll figure out how to fix it... I'll update later.

No comments:

Post a Comment