Dynamically Resize Height of Iframe Based On Source

I would like to be able to dynamically resize the height of the iframe based on the height of the source document. I have access to both the source document and the actually document. I need for it to work correctly in Mozilla, Netscape, and IE. The width of the iframe will always be 540, no matter the width of the source. The height is the only variable that will change. The source page is a calendar and will be dynamically updated as events are entered the height of the calendar page will increase, which is why the height of the iframe will increase as well. I hope that makes sense, if not let me know. Thanks for your help.
LVL 3
thecode101Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

cLFlaVACommented:
The only way I've found the way to do this is by the following:

1)  The source page (the page that will appear in your iframe:  Surround the entire contents (directly inside the body tags) with a div and give the div an id:

<body>
<div id="main">
...stuff here...
</div>
</body>

2)  in the body's onload event, place the following:

<body onload="parent.document.getElementById('i').height = document.getElementById('main').scrollHeight;">

Where 'i' is the id of the iframe in the main document and 'main' is the id of the main div that you just created.
So, your code (in every source document) should look like this:

<html>
<head><title>stuff</title></head>
<body onload="parent.document.getElementById('i').height = document.getElementById('main').scrollHeight;">
<div id="main">
...stuff here...
</div>
</body>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GwynforWebCommented:
<script>
function reSizeFrame(){
 if (document.all){
   frameWidth = top.i1.document.body.scrollWidth
   frameHeight = top.i1.document.body.scrollHeight
  }
  else
  {
   frameWidth = top.i1.innerWidth
   frameHeight = top.i1.innerHeight
  }

 document.getElementById('i1').style.height=frameHeight
}
</script>

<IFRAME name="i1" src='ABC.htm' onload="reSizeFrame()"></ifram
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

GwynforWebCommented:
sorry I mean this

<script>
function reSizeFrame(){
 if (document.all)
   frameHeight = top.i1.document.body.scrollHeight
 else
   frameHeight = top.i1.document.height
}

 document.getElementById('i1').style.height=frameHeight
}
</script>

<IFRAME name="i1" src='ABC.htm' onload="reSizeFrame()"></iframe>
0
GwynforWebCommented:
oh for heavens sake it is this (typo)

<script>
function reSizeFrame(){
 if (document.all)
   frameHeight = top.i1.document.body.scrollHeight
 else
   frameHeight = top.i1.document.height
document.getElementById('i1').style.height=frameHeight
}
</script>

<IFRAME name="i1" src='ABC.htm' onload="reSizeFrame()"></iframe>
0
thecode101Author Commented:
GwynforWeb, yours is not working.

 cLFlaVA,
Is there anything I need to add to the iframe's page?
0
devicCommented:
thecode101, and what's about my example?
0
thecode101Author Commented:
In the process of trying it.
0
cLFlaVACommented:
thecode101-

Nope, the code in each of the pages that will load into the iframe will be just fine.  You just need to give the IFRAME an appropriate ID and then reference that ID in each subsequent page.
0
thecode101Author Commented:
cLFlaVA,
I copied exactly what you had on to my source page and changed the iframe name to "i", and it didn't work. Does it matter that there are several other div statements on that source page?

devic,
That didn't work for me. Does there need to be any div statements on the source page?
0
cLFlaVACommented:
Not sure how it didn't work.  Here's my WORKING example:

mainpage.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>new document</title>

<script language="javascript" type="text/javascript">
<!--

-->
</script>

<style type="text/css">

</style>

</head>

<body>

<a href="sub1.html" target="the_iframe">Sub 1</a> | <a href="sub2.html" target="the_iframe">Sub 2</a> | <a href="sub3.html" target="the_iframe">Sub 3</a><br />
<iframe id="the_iframe" name="the_iframe" src="sub1.html"></iframe>

</body>

</html>



sub1.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>new document</title>

<script language="javascript" type="text/javascript">
<!--

-->
</script>

<style type="text/css">

</style>

</head>

<body onload="parent.document.getElementById('the_iframe').height = document.getElementById('main').scrollHeight;" style="background-color: yellow;">
<div style="height: 200px;" id="main"></div>
</body>

</html>



sub2.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>new document</title>

<script language="javascript" type="text/javascript">
<!--

-->
</script>

<style type="text/css">

</style>

</head>

<body onload="parent.document.getElementById('the_iframe').height = document.getElementById('main').scrollHeight;" style="background-color: red;">
<div style="height: 600px;" id="main"></div>
</body>

</html>


sub3.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>new document</title>

<script language="javascript" type="text/javascript">
<!--

-->
</script>

<style type="text/css">

</style>

</head>

<body onload="parent.document.getElementById('the_iframe').height = document.getElementById('main').scrollHeight;" style="background-color: blue;">
<div style="height: 400px;" id="main"></div>
</body>

</html>
0
thecode101Author Commented:
All of your

<div style="height: 200px;" id="main"></div>

have a predetermined height. Maybe this is why it is working? I can not have a predetermined height on the source page because these pages are dynamically updated and the height of the pages will vary from time to time.
0
cLFlaVACommented:
I just replaced them with this:

<div id="main">text at the bottom</div>

And

<div id="main"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />text at the bottom</div>

And

<div id="main"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />text at the bottom</div>


Still worked.
0
thecode101Author Commented:
Ok, I looked at the javascript error. It says access denied. Does it matter that the two pages are on different servers?
0
cLFlaVACommented:
aha, yes, yes it does.  

This is a JS security feature.  A page on one server cannot alter/access properties/content of a page that exists on another server.

:(
0
thecode101Author Commented:
Darn, that sucks.
0
thecode101Author Commented:
Ok, so as far as points, clFlaVA and devic both your ways work (assuming the page is on the same server). GwynforWeb this method was not working when I tested it with Firefox 1.0. Thanks to all of your for your help and expertise.
0
thecode101Author Commented:
As long as no one has any further comments, I will split the points between cLFlaVA and devic.
0
devicCommented:
thecode101, can you put on other server some your code?
0
thecode101Author Commented:
Unfortunately I can't. The reason I am trying to use an iframe in the first place is because I have a coldfusion page and an asp page and I am trying to use both together. We only have one server that supports ASP and one server that supports ColdFusion.
0
devicCommented:
ok, that seems to be as another question, but anyway...

what's about to read the page on the fly, and put html as part of your page, without any iframe?

here an example in ASP:
===================================
<%
Function GetContent(url)
    Dim xmlHttp
    Set xml = Server.CreateObject("MSXML2.ServerXMLHTTP")
    xml.Open "GET", url, True
    Call xml.Send()

      If xml.readyState <> 4 Then
        xml.waitForResponse 3
    End If
   
     If Err.Number <> 0 Then
    Else
         If (xml.readyState <> 4) Or (xml.Status <> 200) Then
              xml.Abort
              strData = "Problem communicating with remote server..."
         Else
              strData = xml.ResponseText
         End If
    End If
    GetContent = strData
End Function
%>

<%=GetContent("http://oldlook.experts-exchange.com/")%>
0
thecode101Author Commented:
Hmmm, an interesting idea, that would work if it was in ColdFusion. I'll repost a new question or try to find the answer. Thanks.
0
devicCommented:
unfortunately I don't know CF, but I belive yes :)
0
thecode101Author Commented:
I love CF so simple hehe.

<cfhttp
  method="GET"
  resolveurl="Yes"
  url="http://www.urlofpage.com">
<cfset Content = cfhttp.FileContent>

<cfoutput>#Content#</cfoutput>
0
devicCommented:
:) congratulations!
0
thecode101Author Commented:
Thank you, and thanks for your help. I have given the points based on the orginial question.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

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.