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

Thread: Iframes 100%

  1. #1
    Regular Coder jfreak53's Avatar
    Join Date
    May 2004
    Location
    Guatemala
    Posts
    477
    Thanks
    19
    Thanked 10 Times in 10 Posts

    Iframes 100%

    What I would like to do is to take my IFRAMES and make them 100% height based on the page they contain, I thought maybe there might be a JavaScript code to do this since all the HTML code or CSS Code I've tried doesn't work.

  • #2
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try and go

    <style>

    body{margin:0;}

    </style>

    then try the iframe as

    <iframe src="page.htm" height="100%" width="100%"></iframe>

  • #3
    Regular Coder jfreak53's Avatar
    Join Date
    May 2004
    Location
    Guatemala
    Posts
    477
    Thanks
    19
    Thanked 10 Times in 10 Posts
    Thanks for all your help but it took me almost all night but I found something on the net, it works very well, the one you told me I tried it and it didn't work:

    In the main page that has the Iframe you put this:
    Code:
    <script type="text/javascript">
    /************************************************** ***********************
    This code is from Dynamic Web Coding at http://www.dyn-web.com/
    See Terms of Use at http://www.dyn-web.com/bus/terms.html
    regarding conditions under which you may use this code.
    This notice must be retained in the code as is!
    ************************************************** ***********************/
    
    function getDocHeight(doc) {
    var docHt = 0, sh, oh;
    if (doc.height) docHt = doc.height;
    else if (doc.body) {
    if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;
    if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;
    if (sh && oh) docHt = Math.max(sh, oh);
    }
    return docHt;
    }
    
    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
    if (docHt) iframeEl.style.height = docHt + 30 + "px";
    }
    }
    
    function loadIframe(iframeName, url) {
    if ( window.frames[iframeName] ) {
    window.frames[iframeName].location = url;
    return false;
    }
    else return true;
    }
    </script>
    That goes in the head of the doc, then this is put in every link, like this, example:
    Code:
    <a href="doc.html" onclick="return loadIframe('main', this.href)">
    The onclick is the thing that reloads the doc and tells it what name of iframe to use, but I have found out this onclick is not necesary, just use the normal target="framename", now in each document that you want to load inside the iframe:
    Code:
    <script type="text/javascript">
    function goSetHeight() {
    if (parent == window) return;
    // arg: id of iframe element this doc is to be loaded into
    else parent.setIframeHeight('main');
    }
    </script>
    That's inside the head part of the docs then this is added to the body part like this:
    Code:
    <body onload="goSetHeight()">
    If you can think of something else that's smaller let me know.
    Last edited by liorean; 05-28-2004 at 11:42 AM.


  •  

    Posting Permissions

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