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
    Feb 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    controlling iframe with JS

    I have three iframes laid out side by side and I have a script that I found to resize the righthand iframe to size of the document loaded. I need the other two to resize to 100% height based on whatever the righthand iframe resizes to so that they can all meet a footer at the bottom of the page. In Safari it works fine to set the height in the iframe tag to 100%, but in firefox, the left and center frames do not resize (staying around 2-300px deep). I believe the solution is to set a timeout so all the frames can load and then resize the left and middle, but my code is not working any suggestions?

    here is the first code:
    Code:
    <script type="text/javascript">
    
    /***********************************************
    * IFrame SSI script- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
    * 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=["rightContent"]
    
    //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 dyniframesize() {
    var dyniframe=new Array()
    for (i=0; i<iframeids.length; i++){
    if (document.getElementById){ //begin resizing iframe procedure
    dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
    if (dyniframe[i] && !window.opera){
    dyniframe[i].style.display="block"
    if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //ns6 syntax
    dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight+FFextraHeight; 
    else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //ie5+ syntax
    dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
    }
    }
    //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"
    }
    }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", dyniframesize, false)
    else if (window.attachEvent)
    window.attachEvent("onload", dyniframesize)
    else
    window.onload=dyniframesize
    
    </script>
    here is the second:
    Code:
    <script type="text/javascript">
    
    function resizeIframe()
    {
    	document.getElementById("leftContent").style.height = "900px";
    	setTimeout ( "setSize()", 2000 );
    	}
    
    function setSize() 
    {
    	document.getElementById("leftContent").style.height = "100%"; 
    	}
    </script>

  • #2
    New Coder
    Join Date
    May 2003
    Location
    MI
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    might be your changeframeSrc function

    I'm not sure I understand your function "resizeIframe()".

    I usually test whether a frame is fully loaded like this:

    Code:
    function changeframeSrc(){ 
    
         if(frames[0]){
            //this changes the frame source to another page, but you could do whatever:
    	 frames[0].location='page03.htm';}
    
         else{setTimeout("changeframeSrc()",100);}
    
          }
          changeframeSrc();

    Ellen

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    if the frames are src'd to a different domain, you cannot tell how "bog" the content is.


    you will likely need to set the style.position of the iframe to "absolute", "fixed", or "relative' to get pixel widths working in firefox.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

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