CodingForums.com - Autoresize Iframe inside Show hide Javscript PLEASE HELP

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Autoresize Iframe inside Show hide Javscript PLEASE HELP (http://www.codingforums.com/showthread.php?t=272235)

Autoresize Iframe inside Show hide Javscript PLEASE HELP

Hi Iam new here. I got a login so i could ask all of you this question. I appoligies in advance for my bad english.
Can someone please tell me why the following code does not work. The iframe and the show hide option do work on there own but when combined the iframe show a tiny litte box.

If someone know i would be delighted! :D

<html>
<HEAD>
<link rel="stylesheet" type="text/css" Href="../exscript/hideunhide.css" />
.hidden { display: none; }
.unhidden { display: block; }

<link rel="stylesheet" type="text/css" Href="../exscript/Bomenbestand.css" />
IMG.ondergrond {position:fixed; left:-150; top:-150px; z-index:-1;}

.transbox {background-color:#ffffff; opacity:0.75; filter:alpha(opacity=90); /* For IE8 and earlier */}

table.center {margin-left:auto; margin-right:auto;}
table, th, td {border: 0px solid black;}
table, th, td {-moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px;}

table.transbox {SCROLLBAR-ARROW-COLOR: #A9A9A9; SCROLLBAR-BASE-COLOR: #FFFFFF;}
table.transbox {border-spacing: 0px; padding: 10px; }
td.padding {padding: 5px;}
td.transbox {padding: 15px;}

A:link {text-decoration: none; color: black;}
A:visited {text-decoration: none; color: black;}
A:active {text-decoration: none; color: black;}
A:hover {text-decoration: underline; color: red;}

div.bold {font-weight:bold;}

<script type="text/javascript" src="../exscript/hideunhide.js"></script>
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}

<script type="text/javascript" src="../exscript/autoiframeresize.js"></script>
function autoResize(id){
var newheight;
var newwidth;

if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}

document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}

</HEAD>

<body>

<TABLE BORDER="1" CLASS="transbox" WIDTH="100%">
<TR><TD>
<a href="javascript:unhide('learnHTML1');"> EIK (QUERCUS)</a>
<div id="learnHTML1" class="hidden"><iframe src="EIK/Eik.html" WIDTH="100%" id="iframe1" onLoad="autoResize('iframe1');"></iframe> </div>
</TD></TR>

<TR><TD>
<a href="javascript:unhide('learnHTML2');"> EIK (QUERCUS)</B></a>
<div id="learnHTML2" class="hidden"><iframe src="EIK/Eik.html"></iframe></div>
</TD></TR>
</TABLE>

<iframe src="EIK/Eik.html" WIDTH="100%" id="iframe2" onLoad="autoResize('iframe2');"></iframe>

</body>
</html>

Quote:

Code:

document.getElementById(id).height= (newheight) + "px";

document.getElementById(id).width= (newwidth) + "px";

You are appending 'px' to the height attribute, which it does not expect.
Try either of the following:

Using height/width attributes:

Code:

document.getElementById(id).height = newheight;

document.getElementById(id).width = newwidth;

Using CSS

Code:

document.getElementById(id).height = (newheight) + "px";

document.getElementById(id).width = (newwidth) + "px";

Also you can lose if(document.getElementById)

Logic Ali,

The script still does not work.
Thanks a ton for you're reply! :)
I have changed the .js and got rid of the "px". The outcome in my browser is the exact same as when before. When i combine the two scripts it only shows the iframe as i tiny little square.

Thanks for explaning the css bit.

function autoResize(id){
var newheight;
var newwidth;

{
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}

document.getElementById(id).height = newheight;
document.getElementById(id).width = newwidth;
}

Assuming your framed document has a strict doctype:

Code:

newheight=document.getElementById(id).contentWindow.document.documentElement.scrollHeight;

newwidth=document.getElementById(id).contentWindow.document.documentElement.scrollWidth;