• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 11055
  • Last Modified:

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

0
josh2780
Asked:
josh2780
  • 2
1 Solution
 
JohnSixkillerCommented:
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now