Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Resizing an Iframe based on its content's height

Status
Not open for further replies.
okiiyama

okiiyama

IS-IT--Management
Jan 3, 2003
269
US
Is it possible to continuously adjust (I'm using setInterval) an iframe's height based upon the content within the iframe so that there would be no need for the iframe's y-scrollbar?
Here is my code so far:
Code: 
<script type="text/javascript">
	function changeWindowSize() {
		i = document.getElementById("ifr")
		i.style.height = i.document.body.offsetHeight;
	}
</script>
<table cellspacing="0" cellpadding="0" width="100%">
<tr><td width="100%" align="center">
<iframe id="ifr" src="[URL unfurl="true"]http://www.google.com"[/URL] marginwidth=0 marginheight=0 frameborder=0 scrolling="no" style="height: 600px; width: 850px;" onload="setInterval('changeWindowSize()', 2000);"></iframe>
</td></tr></table>

This example works for the mainpage, but if you click on the "news" link, the iframe doesn't resize to fit the entire content. It seems to resize to just fit what is 'viewable'. Any ideas on how to make it so the iframe's height would extend to the iframe's content, making it so that the iframe's y-scrollbar would be unneccesary?

Thanks.
 
Sort by date Sort by votes
Why do you u use a interval. Window.onresize should work!
Try this code:

<html>
<head>

<script type="text/javascript">
window.onload = changeWindowSize();
window.onresize = changeWindowSize();

function changeWindowSize()
{
var totalWidth;
if (document.body)
totalWidth = document.body.clientWidth;

}
</script>
</head>

<body>

<iframe id="ifr" src=" marginwidth=0 marginheight=0 frameborder=0 scrolling="no" style="height: 600px; width: 850px;"></iframe>

</body>
</html>
 
Upvote 0 Downvote
My explanation was probably poor, hopefully this is a better one:

I don't want a y-scrollbar for my iframe, I also dont want to specify a height of 30000px for the iframe to cover all bases so to say. What I want is for the iframe's height to grow and shrink based on the iframe's source page's actual height. So if the src page has a height of 1600px, I would like to set the height of the iframe to 1600px. That way the only y-scrollbar will be on the Iframe's parent page.

Also, I thought that setInterval would be necessary because from the parent page, I don't know when the iframe's src has changed. And by that I mean when a user clicks on a link that resides on the iframe's src page.

I hope this is a little more clear, but its possible I'm just S.O.L.

Thanks.
 
Upvote 0 Downvote
What browser are you viewing this in. I viewed your code from the top in IE6 and I only had one scrollbar, I'm assuming the browser y-scrollbar cause the content was larger than the screen.

[monkey][snake] <.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
416
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
314
rogerte
rogerte
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
306
Rayj0000
Rayj0000
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
324
JScannell
JScannell
TheLazyPig
  • Locked
  • Question
Limit rows based on column value
Replies
0
Views
91
TheLazyPig
TheLazyPig

Part and Inventory Search

Sponsor

Back
Top