Resize iframe on window resize

I have a page that contains a 100px height header and below it an iframe that should take up the rest of the window's height.  I'm using javascript (jquery) to handle resizing the iframe to fit the window when the window is resized, however, it seems that it only resizes in one direction -- when I enlarge the window.  What's interesting is when I change the line "$('#extContent').css('height',$(document).height()-100);'   to   '$('#extContent').css('height',$(document).height()-125);'    (change the '100' to '125'), it works correctly, however, is choppy/slow when resizing (plus I get the 25px whitespace at the bottom which I'd rather not have).  Using the code below, why won't it resize when the window shrinks?  What should be changed?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Frame Test</title>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.thickbox.css" />
</head>
<body style="margin:0px">
<script language="javascript">
function resizeIframe() {
	$('#extContent').css('height',$(document).height()-100);
};
var resizeTimer = null;
$(document).ready(function(){
	$(window).bind('resize',function() {
		if (resizeTimer) clearTimeout(resizeTimer);
		resizeTimer = setTimeout(resizeIframe, 100);
	});
	
	// Call resizeIframe at page load to set the iframe height
	resizeIframe();
});
</script>
<table cellspacing="0" cellpadding="0" style="width:100%;height:100px;border-bottom:1px solid #000"><tr><td>Page Header</td></tr></table>
<IFRAME NAME="extContent" id="extContent" SRC="http://www.microsoft.com" ALIGN="top" WIDTH="100%" HSPACE="0" VSPACE="0" frameborder="0"></IFRAME>
</body>
</html>

Open in new window

LVL 1
josh2780Asked:
Who is Participating?
 
JohnSixkillerConnect With a Mentor Commented:
Hi, try
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
	html, body {
		height:	100%;
		width:	100%;
		margin:	0;
		padding:0;
	}
</style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Frame Test</title>
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript">
	window.onresize = resize_iframe;	
 
	function resize_iframe(){		
		$('#extContent').css('height',$("#wrapper").height()-100); // 104 to avoid scrollbars due to paddings and borders
	}
</script>
</head>
<body style="margin:0px" onload='resize_iframe()'>
 
<div id='wrapper' style='width:100%;height:100%;'>
	<table cellspacing="0" cellpadding="0" style="width:100%;height:100px;border-bottom:1px solid #000"><tr><td>Page Header</td></tr></table>
	<IFRAME NAME="extContent" id="extContent" SRC="http://www.google.com" ALIGN="top" WIDTH="100%" HSPACE="0" VSPACE="0" frameborder="0"></IFRAME>
</div>
</body>
</html>

Open in new window

0
 
josh2780Author Commented:
That's it!  Thanks.  I'd be interested to know what did the trick...  the wrapper div?
0
 
JohnSixkillerCommented:
The timer was not neccesary. I used wrapper div to get proper available height for an iframe. HTML, BODY class is for wrapper DIV to expand to 100% of available height.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.