Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Copy iFrame height from another iFrame at resize?

    Hey Guys!
    I have fairly good skills in Javascript but there is one thing I just can't seem to crack. My problem is such...

    I have two iFrames aligned beside each other. Both with dynamic content. However, there is one iFrame that is the one that gets most updated (height-wise) and that is the left iFrame.

    I have tried to adjust the right iFrame to have the exact height that the left iFrame has when the left one gets it's content updated, but with no luck what so ever.

    How can i resize the right iFrame to the same height as the left one gets when it's updated with new content and at?

    Sooo... What I mean is: How can I make the right iFrame inherit the left iFrames height when the left iFrame is updated?

    I am using this script to resize the iFrames when new content is loaded into them:

    Let's call the iFrames:

    Left One: "m1"
    Right One: "m2"

    <script language="JavaScript">
    <!--
    function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
    newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
    newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
    }
    //-->
    </script>



    I am in a serious deadline trouble and would be so greatful for any quick and reliable solutions for this problem.

    Thank you guys!
    Regards,
    Richard

  • #2
    New Coder
    Join Date
    Aug 2008
    Location
    Colfax, California USA
    Posts
    64
    Thanks
    3
    Thanked 5 Times in 5 Posts
    I'm trying to figure out the same thing look here.

    I think though that your solution can be done with alittle more css and a little bit of javascript.

    Put both iframes in the same div container:
    Code:
    <div id="container"><div id="frame1"></div><div id="frame2"></div>
    The CSS code:
    Code:
    #container {height:auto;}
    #frame1 {height:100&#37;;}
    #frame2 {}
    and heres a javascipt I found that might help you dramtically change the iframe2 size based on content:
    Code:
    " 
    function resizeIframe(iframeID) { 
    if(self==parent) return false; /* Checks that page is in iframe. */ 
    else if(document.getElementById&&document.all) /* Sniffs for IE5+.*/ 
    
    var FramePageHeight = framePage.scrollHeight + 10; /* framePage 
    is the ID of the framed page's BODY tag. The added 10 pixels prevent an 
    unnecessary scrollbar. */ 
    
    parent.document.getElementById(iframeID).style.height=FramePageHeight; 
    /* "iframeID" is the ID of the inline frame in the parent page. */ 
    } 
    " 
    and run it on load 
    
    "<body id="framePage" onload="resizeIframe('idTopFrame')">"
    Last edited by rhinodog8; 08-18-2008 at 09:18 PM.

  • Users who have thanked rhinodog8 for this post:

    Twinster (08-19-2008)

  • #3
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks!
    That totally helped me out in a major way!
    I have, however, now another problem that I am kind of stuck with.

    I am making a new thread about it so it's not getting lost in all this...

    Best,
    Richard


  •  

    Posting Permissions

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