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.
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 50
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    auto resize iframe height

    Hi there,

    I am looking to retrieve the hieght of the browser window, so that when my index page loads, it will automatically resize an iframe that i have to fill the remaining hieght of the window.



    The image above shows the location of the iframe, and the problem that i am facing. Currently, the height of the iframe is hardcoded. On my laptop screen the iframe looks as if it fills the remaining 100% of the height. However, when viewing this page on my 17in monitor, there is now an ugly white space. I would like to be able to dynamically change the height of the iframe, so that it can fill up that white space with more iframe height.

    (1) shows the current hard-coded height of the iframe, and (2) shows the height that i would like to be able to retrieve using javascript.

    If i can get this value, then i assume all i then need to do is to substract the number of pixels that are taken up by the image, and the two nav bars at the top. Hopefully this would then give me the iframe filling up all available white space.

    The code i have currently to set the iframe height is:

    Code:
    	<script type="text/javascript">
    	
    	function setIframeHeight(iframeName) {
    	  var iframeWin = window.frames[iframeName];
    	  var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
    	  if ( iframeEl && iframeWin ) {
    	  iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
    	  //var docHt = getDocHeight(iframeWin.document);
    	  // need to add to height to be sure it will all show
    	  iframeEl.style.height = 100 + "%";
    	  alert(document.height);
    	  }
    	}	
    	</script>
    	
    </head>
    
    <body onload="setIframeHeight('ifrm');">
    So, I am now able to change the height of the iframe when the page loads, i just now need to hopefully be able to get the value from (2) in the image, to make it all work out nicely.

    Is this possible? Any help or advice will be greatly appreciated!

    Thanks in advance

  • #2
    New Coder
    Join Date
    Jan 2006
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great!

    I managed to find a solution to my problem

    The new code that gets the browswer window height (depending on the browser client) and updates the iframe height is:

    Code:
    	<script type="text/javascript">
    		function setIframeHeight(iframeName) {
    		  //var iframeWin = window.frames[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 docHt = getDocHeight(iframeWin.document);
    		  // need to add to height to be sure it will all show
    		  var h = alertSize();
    		  var new_h = (h-148);
    		  iframeEl.style.height = new_h + "px";
    		  //alertSize();
    		  }
    		}
    
    		function alertSize() {
    		  var myHeight = 0;
    		  if( typeof( window.innerWidth ) == 'number' ) {
    		    //Non-IE
    		    myHeight = window.innerHeight;
    		  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    		    //IE 6+ in 'standards compliant mode'
    		    myHeight = document.documentElement.clientHeight;
    		  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    		    //IE 4 compatible
    		    myHeight = document.body.clientHeight;
    		  }
    		  //window.alert( 'Height = ' + myHeight );
    		  return myHeight;
    		}
    	</script>
    	
    </head>
    
    <body onload="setIframeHeight('ifrm');">
    Incase anyone else has the same probs.

    Now, for a different question...

    Is it possible to auto detect changes to the browser window height? For example, if someone resizes the window with the mouse, or in the case of FF if someone opens a new tab, (in my case anyway, when there is only one 'tab', then the tab navbar is not shown... so if a new tab is created then the tab navbar is shown, which slightly reduces the overal window height), or even if someone does a quick find on the page?

    Would it then be possible to detect any changes and auto update the ifram window again?

    I think gmail is all js, and responds to when the browser is resized... but dunno if thats similar to what i want to do

    Thanks in advance

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <body onload="setIframeHeight('ifrm');" onresize="setIframeHeight('ifrm');">
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New Coder
    Join Date
    Jan 2006
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Lol, so simple!

    Thanks for helping me out

  • #5
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cross bowser iframe auto-resize script

    This is a very good script

  • #6
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Cross bowser iframe auto-resize script

    This is a very good script



    Code:
    <html>
    <script type="text/javascript">
    function autoIframe(frameId){
    try{
    frame = document.getElementById(frameId);
    innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
    objToResize = (frame.style) ? frame.style : frame;
    objToResize.height = innerDoc.body.scrollHeight + 10;
    }
    catch(err){
    window.status = err.message;
    }
    }
    </script>
    
    
    <body>
    
    <iframe id="tree" name="tree" src="tree.htm" onload="if (window.parent && window.parent.autoIframe) {window.parent.autoIframe('tree');}"></iframe>
    
    </body>
    
    </html>

  • #7
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs down Problem with Mozilla Firefox 1.5

    Hello,

    i use AnthonyB script but it doesn't work in Mozilla Firefox 1.5.0.6, when i use function document.getElementById, I receive [null] object, i test it in Explorer 7 and Opera and there it works correctly.

    Can anyone help me?

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    are you sure you have assigned an ID, not just a 'name' attribute.

    They are different but IE is IE
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, it was the problem. I defines just name in iframe tag. You are really expert!

  • #10
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hye im really basics on java script ¿where do i have to replace the name or the id of my iframe? or ¿Based on this code, what should be the name of my iframe?.

    and

    how does it look the code of my iframe.

    it looks like this.

    <iframe src="Bienvenido.html" width="697" height="455" id="main" name="main" frameborder="0" scrolling="auto" >Su navegador no soporta Iframe, intenta con una versión mas nueva. Promo Club. </iframe>

  • #11
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    by the way the only thing i need its a basic java to load a page inside my iframe adjusting the height of each page. the width its not a problem.

    And sorry for my bad english. thats also a problem learning java :S

  • #12
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i keep writing because im desperate i never publish opn forums until i have tried the last option no one its working, i have searched for tutorials, basic java, tried overa 1000 codes an nothing.

    I hope this forum save my life.

    and sorry for multiple replay but i wanna let clear im not one of those guys just keep asking i always search before posting

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Where are you calling autoIframe()? Did you read post #3? auto resize iframe height
    Seriously good things never come to impatient people. Just wait like everyone else until you get an answer. Don't keep posting.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry not everybody is an expert like u .

    i keep writing because im desperate i never publish opn forums until i have tried the last option no one its working, i have searched for tutorials, basic java, tried overa 1000 codes an nothing.

    Did you read post #3? http://www.codingforums.com/showpost...52&postcount=3

    yes ive tried that to. thanks

    suggestions

  • #15
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    (ashamed) Sorry really but Im eating thanks to my page. I havent sleep. Im sorry I never meant to be a fool on java. Im trying to learn.

    BUT I DID IT&#161;&#161;&#161;&#161;&#161; I just need this code work on Firefox thanks. I wont post anymore.

    well heres the code i found whats wrong?&#161;&#161;&#161;&#161;

    <script type="text/javascript">

    /***********************************************
    * IFrame SSI script II- &#169; 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=["main"]

    //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>

    </head>

    <iframe id="main" name="main" src="Bienvenido.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:697px ; display:none"></iframe>


  •  
    Page 1 of 4 123 ... LastLast

    Posting Permissions

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