Results 1 to 12 of 12
  1. #1

    Dynamically alter Iframe Height ?

    Need some help here...

    How can I do it such that the Iframe height will dynamically increase/decrease with the content loaded into the frame ?

    Thanks



    ps: If you wish to take a look at the page itself, kindly PM me.
    Shawn Ho
    Singapore Web Hosting Talk - http://www.sgwebhostingtalk.com
    Singapore Soccer - http://www.singaporesoccer.com
    EMAIL - shawnho@sgwebhostingtalk.com

  2. #2
    Join Date
    May 2003
    Location
    Veles, Macedonia
    Posts
    241
    1. Do you mean dynamicly at the page loads or when the page is loaded already. No.2 can't be done I guess.

    2. What kind of scripting language do you use. I guess it would be easy to read a value from a database and pass it on to iframe tag.

  3. #3
    Pardon me for my ignorance in HTML please lol

    1. Cause now what i have is the navigation links, and after clicking them the new page loads in the center iframe. So i would like the iframe height to be same as the loaded page and everytime I choose a new page.

    2. Currently site uses PHP/MySQL....
    Shawn Ho
    Singapore Web Hosting Talk - http://www.sgwebhostingtalk.com
    Singapore Soccer - http://www.singaporesoccer.com
    EMAIL - shawnho@sgwebhostingtalk.com

  4. #4
    Join Date
    Dec 2003
    Location
    UK
    Posts
    658
    Can't you use a bit of JavaScript to modify the object's .height & .width properties ?

  5. #5
    Originally posted by monaghan
    Can't you use a bit of JavaScript to modify the object's .height & .width properties ?
    Care to elaborate how to do so ? Im really clueless on this
    Shawn Ho
    Singapore Web Hosting Talk - http://www.sgwebhostingtalk.com
    Singapore Soccer - http://www.singaporesoccer.com
    EMAIL - shawnho@sgwebhostingtalk.com

  6. #6
    Join Date
    May 2003
    Location
    Veles, Macedonia
    Posts
    241
    toonz, i see your problem - you have text in the iframe right? and then it reformats depending on the no. of characters, line feeds, blanks and so on - automaticly.

    So your problem is not how to change the height of the iframe but how to measure in pixels how toll the text will be so you could pass this value either via server-side or client-side scripting (i.e. php or js).

    It's an interesting problem but i guess someone has already solved it. I will try searching a little bit and I hope that some of the more experienced members will spare some thoughts with us. If I come up with something I'll get back.

  7. #7
    Join Date
    Jul 2003
    Location
    Kuwait
    Posts
    5,104
    You have two approaches. The css way (which may or may not work on all browsers due to browser quirks).

    Code:
    <style type="text/css" media="screen">
    iframe {height:expression(frames("myframe").document.body.scrollHeight);
    </style>
    <iframe id="myframe" name="myframe">
    What you are doing there is dynamically setting the height of the iframe based on whatever is contained inside it.

    And the rather interesting way, which really doesn't use an iframe. What you do is create a div and put the iframe inside that div tag. Then, when the page is loaded in the iframe, you replace the entire iframe tag with the contents of the page.

    Sounds a bit weird, but it works

    Code:
    function autoResize() { 
    var dest = document.getElementById('container'); 
    var source = window.frames[0].document.body.innerHTML; 
    dest.innerHTML = source
    } 
    <div id="container"> 
    <iframe onload="autoResize();" src="foo.html" frameborder="no" width="555px" scrolling="no"> 
    </div>
    Try both and see which is the right one for your situation. Welcome to browser quirks.

  8. #8
    Both doesnt work....anyone wanna help me take a look at it ? Will pay an appreciation fee if anyone get it working for me....
    Shawn Ho
    Singapore Web Hosting Talk - http://www.sgwebhostingtalk.com
    Singapore Soccer - http://www.singaporesoccer.com
    EMAIL - shawnho@sgwebhostingtalk.com

  9. #9
    height="100%" width="100%"

  10. #10
    Join Date
    Dec 2003
    Location
    UK
    Posts
    658
    Sorry for the delay, but I had to dig about to find the example, I knew it was somewhere :-)

    This was a bit of code I was working on, it may not be complete or even work properly, but should give you a start. I never finished it as the project was shelved.

    function resize_image {
    var objbb_logo = document.getElementById('bbll');
    var objbb_background = document.getElementById('bb');
    objbb_logo.height = (objbb_background.height);
    };

    with bbll being a graphic on the left and bb being the main body area. The idea was to ensure the graphic was correctly sized. This should be applicable to your IFRAME, but I've not tried it myself (too many of my projects to work on !)

  11. #11
    Join Date
    May 2006
    Location
    Johannesburg
    Posts
    1
    - Thanks to fyrestrtr for pointing me in the right direction -

    Regarding IFRAMES and getting the Height to dynamically increase. I managed to do this by doing the following:

    STEP 1
    Create a css stylesheet or insert the following into your css stylesheet:
    Code:
    .iframe {height:expression(frames("myframe").document.body.scrollHeight);}
    STEP 2
    On the page where you want to display the IFRAME, insert the following:
    Code:
    <iframe id="myframe" src="mypage.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" width="530" height="500" class="iframe"></iframe>
    Replace "mypage.php" with YOUR webpage you want to display. This can be an .htm, .html, .php etc. AND change the width to your desired size. The height tag here is just for some browsers that may not be able to read the .css properly. But the iframe height through the .css does dynamically increase to whatever the contents are in IE

    This method can be used for any content/page you want to display in an IFRAME and have the height dynamically resized accordingly.

    To see a live example of where I use this method, go to nathealth.za.net under the Recommended Links Section where I am displaying a reciprocal link directory. (linkstationpro)

    I'll be honest, I have only tested it on IE, so Firefox and Opera may or may not be displaying it correctly. Anyone using those browsers, I'd love some feedback.


    I hope this helps someone though!

    Best Regards

  12. #12
    Thanks, IamHeSaid, I have been struggling to solve this problem for two days, and even tried some of the other solutions on this page, and still couldn't get it to work. This worked great and this is such a simple solution!

    But here is my problem: I created the first iframe on the page, and it worked perfectly. But then when I created the second iframe on the same page, it got confused (must be the duplicate frame name) and used the length for the second iframe to both Iframes. Because the first inserted page was longer than the second, the content got truncated and supplied with a iframe scrollbar.

    So do any of you have any idea how to expand this solution to multiple iframes on the same page?

    Thx,
    Q

Posting Permissions

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