www.webdeveloper.com
Results 1 to 11 of 11

Thread: IFrame resize to content height

  1. #1
    Join Date
    Sep 2010
    Posts
    11

    IFrame resize to content height

    Hello,

    I have a webpage with an IFrame in it. The content for the IFrame could change per page and with it size. I don't want scrollbar's inside the IFrame but rather for the whole page. To accomplish this I must resize the height of the IFrame (width = fixed). But I can't seem to accomplish this.

    The links within the Iframe load the new content but I have to access the parent document to be able to resize the IFrame height. Anyone any idea how I can resize the iframe from within javascript in the IFrame.

    Thanks in advance.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Sep 2010
    Posts
    11
    Seen that link multiple times before, but that didn't work.

    But I found a version that looks good @
    http://www.webdeveloper.com/forum/sh...=iframe+resize

    I am able to resize the window now, although it still has some strange behaviour (in Firefox I get a scrollbar now and then and I often have large blank space under/within the IFrame)

  4. #4
    Join Date
    Sep 2010
    Posts
    11
    I got this now:

    Code:
    window.resizeframe = function (iframeName){
    	var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
    	if (iframeEl) {
    	 iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
    
          var x,y;
          var test1 = document.body.scrollHeight;
          var test2 = document.body.offsetHeight
          if (test1 > test2) // all but Explorer Mac
          { y = document.frames[iframeName].document.body.scrollHeight;; }
          else // Explorer Mac;
          //would also work in Explorer 6 Strict, Mozilla and Safari
          {  y = document.body.offsetHeight; }
    	 var new_h = y; 
    	 iframeEl.style.height = new_h + "px";
    	}
    }
    Only it does not work in FF. It gives me a scrollbar within my IFrame, which I do not want. Any suggestions?

    Code:
    document.getElementById(iframeName).contentDocument.body.offsetHeight
    does not work.

  5. #5
    Join Date
    Jun 2007
    Posts
    667
    See if this works for you:
    Code:
    <script type='text/javascript'>
    
    function sizeToMyContent( ifRef, setW, setH, fMargin )
    {
     var ifDoc, margin = typeof fMargin === 'number' ? fMargin : 16;
     
     try
     { 
      ifDoc = ifRef.contentWindow.document.getElementsByTagName("body")[0];
     }
     catch( e ){ ifDoc = null; }
     
     if( ifDoc )
     {
      if( setH ) 
       ifRef.height = ifDoc.scrollHeight + margin; 
     
      if( setW ) 
       ifRef.width = ifDoc.scrollWidth + margin;
     }
      
    }
    
    </script>
    
    <iframe src='myfile.htm' onload='sizeToMyContent(this, true, true);' ></iframe>

  6. #6
    Join Date
    Sep 2010
    Posts
    11
    Thanks for your reply, but unfortunately it does not work. It sets the iframe height to 150.

    ps: This is the Iframe:

    Code:
    <iframe id="leftiframe" src="<?=$page?>" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%;">
    </iframe>
    Last edited by WhatJac; 09-14-2010 at 10:20 AM.

  7. #7
    Join Date
    Jun 2007
    Posts
    667
    Need to see a live demo.

  8. #8
    Join Date
    Sep 2010
    Posts
    11
    Live demo is at: http://muzieknew.wajow.com

    please note that I am still currently editing the code to try to get it to work

  9. #9
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by WhatJac View Post
    Live demo is at: http://muzieknew.wajow.com

    please note that I am still currently editing the code to try to get it to work
    I don't quite understand why the size was reported as it was, but the changed code below was tested on a ripped copy of your site.
    Chrome and IE were complaining of cross-domain access but it may have been the way I was testing it.
    Just install it as before and remove any other resizer installed on any page.
    You should use the Firefox error console to fix other script errors occurring on your site.
    Code:
    <script type='text/javascript'>
    
    function sizeToMyContent( ifRef, setW, setH, fMargin )
    {
     var ifDoc, margin = typeof fMargin === 'number' ? fMargin : 16;
     
     try
     { 
      ifDoc = ifRef.contentWindow.document.documentElement;
     }
     catch( e ){ ifDoc = null; }
     
     if( ifDoc )
     {    
      if( setH ) 
       ifRef.height = ifDoc.scrollHeight + margin; 
     
      if( setW ) 
       ifRef.width = ifDoc.scrollWidth + margin;
     }
      
    }
    
    </script>

  10. #10
    Join Date
    Sep 2010
    Posts
    11
    Alright I will try. I know about the other errors, but the site is currently under development. I'll get back to you soon.

  11. #11
    Join Date
    Sep 2010
    Posts
    11
    Wow man, this seems to work!

    I only had to add an

    Code:
       ifRef.height = 0;
    To make sure that it also shrinks in size. Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles