SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to auto Resize the iframe

    Hi all,

    I hve inserted a html file into another html through iframe,

    the inserted html file contains an accordion, the problem is the iframe is not variying its height according to that accordion in the inserted page. Some one please guide me how to auto resize the iframe according to the accordion.

    Thanks & Regards,
    Dhilip. R

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One alternative is to proceed as follows:
    > Give your iFrame an ID
    > Insert a script in your child page that will execute when the page is loaded:
    >> var AccordionHeight = document.getElementById(objectID).offsetHeight;
    >> window.parent.document.getElementById(iframeID).style.height = AccordionHeight +'px';

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Tommi,

    I Thank you very much for your quick reply, am very much new to javascript, can u please send me the code or an example with a demo.

    Thanks & Regards,
    Dhilip. R

  4. #4
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, so here is the most basic example I can provide:
    >> Create a new file called demo1.html, and paste the following source code into it
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My Parent</title>
    </head>

    <body>
    <iframe id="myIFrame" style="border:solid thin; height:50px; width:100px;" src="demo2.html"></iframe>
    </body>
    </html>

    >> Create a second file called demo2.html, and paste the following source code into it
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <body>
    <div id="accordion">
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line<br />
    new line
    </div>
    <script>
    var AccordionHeight = document.getElementById('accordion').offsetHeight;
    window.parent.document.getElementById('myIFrame').style.height = AccordionHeight + 20 +'px';
    </script>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •