[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Dynamically Resize Height of Iframe Based On Source

Posted on 2004-11-01
26
Medium Priority
?
376 Views
Last Modified: 2010-05-18
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.
0
Comment
Question by:thecode101
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 12
  • 6
  • 5
  • +1
26 Comments
 
LVL 13

Accepted Solution

by:
cLFlaVA earned 1000 total points
ID: 12467114
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
 
LVL 25

Assisted Solution

by:devic
devic earned 1000 total points
ID: 12467236
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12468032
<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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12468078
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
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12468139
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
 
LVL 3

Author Comment

by:thecode101
ID: 12475054
GwynforWeb, yours is not working.

 cLFlaVA,
Is there anything I need to add to the iframe's page?
0
 
LVL 25

Expert Comment

by:devic
ID: 12475084
thecode101, and what's about my example?
0
 
LVL 3

Author Comment

by:thecode101
ID: 12475107
In the process of trying it.
0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12475325
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
 
LVL 3

Author Comment

by:thecode101
ID: 12475510
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
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12475590
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
 
LVL 3

Author Comment

by:thecode101
ID: 12475628
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
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12475678
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
 
LVL 3

Author Comment

by:thecode101
ID: 12475804
Ok, I looked at the javascript error. It says access denied. Does it matter that the two pages are on different servers?
0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12475825
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
 
LVL 3

Author Comment

by:thecode101
ID: 12475860
Darn, that sucks.
0
 
LVL 3

Author Comment

by:thecode101
ID: 12476014
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
 
LVL 3

Author Comment

by:thecode101
ID: 12476041
As long as no one has any further comments, I will split the points between cLFlaVA and devic.
0
 
LVL 25

Expert Comment

by:devic
ID: 12476071
thecode101, can you put on other server some your code?
0
 
LVL 3

Author Comment

by:thecode101
ID: 12476102
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
 
LVL 25

Expert Comment

by:devic
ID: 12476161
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
 
LVL 3

Author Comment

by:thecode101
ID: 12476248
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
 
LVL 25

Expert Comment

by:devic
ID: 12476279
unfortunately I don't know CF, but I belive yes :)
0
 
LVL 3

Author Comment

by:thecode101
ID: 12476304
I love CF so simple hehe.

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

<cfoutput>#Content#</cfoutput>
0
 
LVL 25

Expert Comment

by:devic
ID: 12476327
:) congratulations!
0
 
LVL 3

Author Comment

by:thecode101
ID: 12476337
Thank you, and thanks for your help. I have given the points based on the orginial question.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question