SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: IFrame Resize

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IFrame Resize

    Hi there,

    I found a javascript code online which automatically resizes an IFRAME based on the content loaded into it. Mostly, it works as expected but there is one slight problem and I wonder if anyone could help me resolve it.

    The code is here:
    Code JavaScript:
     
    <script type="text/javascript">
     
    /***********************************************
    * IFrame SSI script II-  Dynamic Drive DHTML code library ([url=http://www.dynamicdrive.com]Dynamic Drive DHTML(dynamic html) & JavaScript code library[/url])
    * Visit DynamicDrive.com for hundreds of original DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
     
    //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
    //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
    var iframeids=["star_content"]
     
    //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
    var iframehide="yes"
     
    var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
    var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
     
    function resizeCaller() {
    var dyniframe=new Array()
    for (i=0; i<iframeids.length; i++){
    if (document.getElementById)
    resizeIframe(iframeids[i])
    //reveal iframe for lower end browsers? (see var above):
    if ((document.all || document.getElementById) && iframehide=="no"){
    var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
    tempobj.style.display="block"
    }
    }
    }
     
    function resizeIframe(frameid){
    var currentfr=document.getElementById(frameid)
    if (currentfr && !window.opera){
    currentfr.style.display="block"
    if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
    currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
    else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
    currentfr.height = currentfr.Document.body.scrollHeight;
    if (currentfr.addEventListener)
    currentfr.addEventListener("load", readjustIframe, false)
    else if (currentfr.attachEvent){
    currentfr.detachEvent("onload", readjustIframe) // Bug fix line
    currentfr.attachEvent("onload", readjustIframe)
    }
    }
    }
     
    function readjustIframe(loadevt) {
    var crossevt=(window.event)? event : loadevt
    var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
    if (iframeroot)
    resizeIframe(iframeroot.id);
    }
     
    function loadintoIframe(iframeid, url){
    if (document.getElementById)
    document.getElementById(iframeid).src=url
    }
     
    if (window.addEventListener)
    window.addEventListener("load", resizeCaller, false)
    else if (window.attachEvent)
    window.attachEvent("onload", resizeCaller)
    else
    window.onload=resizeCaller
     
    </script>

    As you can see, the IFRAME I am resizing automatically is called "star_content" - This frame exists on a page with a set of links below it, which determine what content is to be loaded into it.

    The content being loaded into it is Daily, Monthly and Yearly horoscopes. The longest being the Yearly one. Now when I click the yearly one, the iframe extends as expected... but if I go from the yearly one back to the Daily or Monthly one, it doesn't shrink again so I end up with a huge gap.

    I hope I'm explaining this correctly. I can't show you the page itself because it's a closed site, still in development and I am under a non disclosure contract. However, here is the IFRAME HTML.

    Code HTML4Strict:
    <iframe id="star_content" name="star_content" width="600px" scrolling="no" frameborder="0" src="http://localhost/aquarius_today.php"></iframe>

    And here is the HTML for the links that change the IFRAME content.

    Code HTML4Strict:
    <a href="aquarius_yesterday.php">Yesterday</a>  |  Today  |  <a href="aquarius_tomorrow.php">Tomorrow</a><br />
    Daily  |  <a href="aquarius_monthly.php">Monthly</a>  |  <a href="aquarius_yearly.php">Yearly</a>  |  <a href="aquarius_financial.php">Financial Horoscope</a>

    So to sumarise, what I want to do is have the iframe automatically resize to fit the content that has been loaded within it. It's doing that when it needs to extend the height of the frame but it's not then reducing the height when it goes back to something smaller.

    Is there a way I can fix this?

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Location
    Bs. As. - Argentina
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI CBResources, i think this could be happening because when you go back the event "onload" or "load" do not fires, the page you are going back to was allready loaded and the event will not fire.


    One solution may be having a function that checks every 2 secs for exemple if de .src of the iframe is the same, if not, execute the functions that resize the iframe.


    See you

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CBResources View Post
    Hi there,

    I found a javascript code online
    That's always hazardous. I would remove all traces of that code and then it's as simple as this:
    Code:
    <iframe src='myfile.htm' id='if1' onload='setIframeHeight( this.id )'></iframe>
    
    
    <script type='text/javascript'>
    
    function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
    {
     var ifDoc, ifRef = document.getElementById( iframeId );
    
     try
     {   
      ifDoc = ifRef.contentWindow.document.documentElement;  
     }
     catch( e )
     { 
      try
      { 
       ifDoc = ifRef.contentDocument.documentElement;  
      }
      catch(ee)
      {   
      }  
     }
     
     if( ifDoc )
     {
      ifRef.height = 1;  
      ifRef.height = ifDoc.scrollHeight;
      
      /* For width resize, enable below.  */
      
      // ifRef.width = 1;
      // ifRef.width = ifDoc.scrollWidth; 
     }
    }
    
    </script>
    Tab-indentation is a crime against humanity.


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
  •