Expandable iframes help

Lysine · 04-01-2007, 12:40 AM

Well my layout is coded in DIVS and i have added the code for expandable ifarmes but ONLY the main content box will expand and the login box wont. I dont have a clue what the problem is This is my index.php The JS at the bottom of the page is the one which expands but the one at the top dont.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>I are teh leet</title>
<link href="http://www.thishabbo.net/usersystem/user/skin.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="toppanel">
</div>
<div id="mainbox">
	<div id="topboxrow">
		<div id="ribbon">
		</div>
	</div>
	<div id="middleboxrow">
<div id="topbit">
 <center><a href="navigation.php">Navigation</a> | <a href="navigation.php">Navigation</a> | <a href="navigation.php">Navigation</a> | <a href="navigation.php">Navigation</a> | <a href="navigation.php">Navigation</a></center> 
</div>

		<div id="secondboxtop">
			<div id="banner">
			</div>
		</div>
		<div id="secondboxmiddle">
			<div id="rightcol">
				<div id="rightcoltop">
				</div>
				<div id="rightcolmid">
				<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body bgcolor="#ffffff">
<p><script type="text/javascript">
            //<![CDATA[
            window.onload = function() {
                var f = document.getElementById("login");
                function resize() {
                    var h = "";
                    var w = "";
                    if (f.contentDocument) {
                        h = f.contentDocument.documentElement.offsetHeight + 20 + "px";
                        // can't find anything for Opera and Firefox that works for the width. OffetWidth doesn't work right either.(f.contentDocument.documentElement,"").getPropertyValue("width");
                    } else if (f.contentWindow) {
                        h = f.contentWindow.document.body.scrollHeight + 5 + "px";
                    } else {
                        return;
                    }
                    f.setAttribute("height",h);
                    f.parentNode.setAttribute("height",h);
                }
                if (window.addEventListener) {
                    f.onload = resize;
                } else if (f.attachEvent) {
                    f.attachEvent("onload", resize);
                } else {
                    return;
                }
                resize();
            }
            //]]>
                    </script>
<iframe name="login" id="login"  src="login.php" 
width="175" height="" scrolling"no" frameborder="0"></iframe>
</body>
</html>  
<head> 
<title>Home</title> 
<style type="text/css"> 
a { 
font-size: 10px; 
color: #000000; 
} 
a:link { 
text-decoration: none; 
color: #000000; 
} 
a:visited { 
text-decoration: none; 
color: #000000; 
} 
a:hover { 
text-decoration: underline; 
color: #000000; 
} 
a:active { 
text-decoration: none; 
color: #000000; 
} 
body,td,th,p { 
font-family: Verdana; 
font-size: 10px; 
color: #000000; 
} 
.12 { color: red; } 
.11 { color: navy; } 
.10 { color: ; } 
.9 { color: darkorchid; } 
.8 { color: darkorchid; } 
.7 { color: darkorchid; } 
.6 { color: darkorchid; } 
.5 { color: green; } 
.4 { color: green; } 
.3 { color: green; } 
.2 { color: green; } 
.1 { color: black; } 
input { 
    font-family: Tahoma, Arial; 
    font-size: 8pt; 
    font-weight: bold; 
    width: 100; 
    color: #000000; 
    background-color: #FFFFFF; 
    border: 1px solid #000000; 
} 
select { 
    background-color: #ffffff; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 8pt; 
    color: #000000; 
    width: 100; 
    border: 1px solid #000000; 
} 
textarea { 
background-color: #ffffff; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 8pt; 
    color: #000000; 
    width: 100; 
    border: 1px solid #000000; 
} 

</style> 
<meta http-equiv=\"Refresh\" content=\"30; URL=http://www.thishabbo.net/usersystem/user/login.php\"/>
</head> 
<body bgcolor="transparent"> 
</body> 
</html>

				</div>
				<div id="rightcolbot">
				</div>
			</div>
			<div id="leftcol">
				<div id="contentbar">
				</div>
				<div id="contentboxtop">
				</div>
				<div id="contentboxmid">
				<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body bgcolor="#ffffff">
<p><script type="text/javascript">
            //<![CDATA[
            window.onload = function() {
                var f = document.getElementById("mainframe");
                function resize() {
                    var h = "";
                    var w = "";
                    if (f.contentDocument) {
                        h = f.contentDocument.documentElement.offsetHeight + 20 + "px";
                        // can't find anything for Opera and Firefox that works for the width. OffetWidth doesn't work right either.(f.contentDocument.documentElement,"").getPropertyValue("width");
                    } else if (f.contentWindow) {
                        h = f.contentWindow.document.body.scrollHeight + 5 + "px";
                    } else {
                        return;
                    }
                    f.setAttribute("height",h);
                    f.parentNode.setAttribute("height",h);
                }
                if (window.addEventListener) {
                    f.onload = resize;
                } else if (f.attachEvent) {
                    f.attachEvent("onload", resize);
                } else {
                    return;
                }
                resize();
            }
            //]]>
                    </script>
<iframe name="mainframe" id="mainframe"  src="sitecontent/main.html" 
width="410" height="" scrolling"no" frameborder="0"></iframe>
</body>
</html>				</div>
				<div id="contentboxbot">
				</div>
			</div>
		</div>
		<div id="secondboxbottom">
		</div>
	</div>
	<div id="bottomboxrow">
	</div>
</div>
</body>
</html>

+ rep for anyone who helps.

~~Dentafrice1~~ · 04-01-2007, 12:45 AM

You need one to do multiple boxes one sec.

Code:

<script type="text/javascript">
var iframeids=["mainframe", "login"]
var iframehide="yes"
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}
function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}
function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}
function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
</script>