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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Autoresize Iframe inside Show hide Javscript PLEASE HELP

    Hi Iam new here. I got a login so i could ask all of you this question. I appoligies in advance for my bad english.
    Can someone please tell me why the following code does not work. The iframe and the show hide option do work on there own but when combined the iframe show a tiny litte box.

    If someone know i would be delighted!

    <html>
    <HEAD>
    <link rel="stylesheet" type="text/css" Href="../exscript/hideunhide.css" />
    .hidden { display: none; }
    .unhidden { display: block; }


    <link rel="stylesheet" type="text/css" Href="../exscript/Bomenbestand.css" />
    IMG.ondergrond {position:fixed; left:-150; top:-150px; z-index:-1;}

    .transbox {background-color:#ffffff; opacity:0.75; filter:alpha(opacity=90); /* For IE8 and earlier */}

    table.center {margin-left:auto; margin-right:auto;}
    table, th, td {border: 0px solid black;}
    table, th, td {-moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px;}

    table.transbox {SCROLLBAR-ARROW-COLOR: #A9A9A9; SCROLLBAR-BASE-COLOR: #FFFFFF;}
    table.transbox {border-spacing: 0px; padding: 10px; }
    td.padding {padding: 5px;}
    td.transbox {padding: 15px;}

    A:link {text-decoration: none; color: black;}
    A:visited {text-decoration: none; color: black;}
    A:active {text-decoration: none; color: black;}
    A:hover {text-decoration: underline; color: red;}

    div.bold {font-weight:bold;}



    <script type="text/javascript" src="../exscript/hideunhide.js"></script>
    function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
    item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
    }


    <script type="text/javascript" src="../exscript/autoiframeresize.js"></script>
    function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
    newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
    newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
    }



    </HEAD>

    <body>

    <TABLE BORDER="1" CLASS="transbox" WIDTH="100%">
    <TR><TD>
    <a href="javascript:unhide('learnHTML1');"> EIK (QUERCUS)</a>
    <div id="learnHTML1" class="hidden"><iframe src="EIK/Eik.html" WIDTH="100%" id="iframe1" onLoad="autoResize('iframe1');"></iframe> </div>
    </TD></TR>

    <TR><TD>
    <a href="javascript:unhide('learnHTML2');"> EIK (QUERCUS)</B></a>
    <div id="learnHTML2" class="hidden"><iframe src="EIK/Eik.html"></iframe></div>
    </TD></TR>
    </TABLE>

    <iframe src="EIK/Eik.html" WIDTH="100%" id="iframe2" onLoad="autoResize('iframe2');"></iframe>

    </body>
    </html>

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
    You are appending 'px' to the height attribute, which it does not expect.
    Try either of the following:

    Using height/width attributes:
    Code:
    document.getElementById(id).height = newheight;
    document.getElementById(id).width = newwidth;
    Using CSS
    Code:
    document.getElementById(id).height = (newheight) + "px";
    document.getElementById(id).width = (newwidth) + "px";
    Also you can lose if(document.getElementById)

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Logic Ali,

    The script still does not work.
    Thanks a ton for you're reply!
    I have changed the .js and got rid of the "px". The outcome in my browser is the exact same as when before. When i combine the two scripts it only shows the iframe as i tiny little square.

    Thanks for explaning the css bit.

    function autoResize(id){
    var newheight;
    var newwidth;

    {
    newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
    newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height = newheight;
    document.getElementById(id).width = newwidth;
    }

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Assuming your framed document has a strict doctype:

    Code:
    newheight=document.getElementById(id).contentWindow.document.documentElement.scrollHeight;
    newwidth=document.getElementById(id).contentWindow.document.documentElement.scrollWidth;


  •  

    Posting Permissions

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