Solved

Dynamically Resize Height of Iframe Based On Source

Posted on 2004-11-01
363 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
Question by:thecode101
    26 Comments
     
    LVL 13

    Accepted Solution

    by:
    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
    0
     
    LVL 31

    Expert Comment

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

    Expert Comment

    by:GwynforWeb
    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
    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
    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
    thecode101, and what's about my example?
    0
     
    LVL 3

    Author Comment

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

    Expert Comment

    by:cLFlaVA
    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
    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
    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
    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
    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
    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
    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
    Darn, that sucks.
    0
     
    LVL 3

    Author Comment

    by:thecode101
    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
    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
    thecode101, can you put on other server some your code?
    0
     
    LVL 3

    Author Comment

    by:thecode101
    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
    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
    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
    unfortunately I don't know CF, but I belive yes :)
    0
     
    LVL 3

    Author Comment

    by:thecode101
    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
    :) congratulations!
    0
     
    LVL 3

    Author Comment

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Hire Freelancers to Complete JavaScript Projects

    Source the talented Expert Exchange community
    for top quality work on your JavaScript projects.

    Hire the best. Collaborate easily. Get quality work.

    When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    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…

    856 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

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now