#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2005
    Posts
    65
    Rep Power
    10

    Positioning an iframe in a table with document.createElement("iframe")


    I'm trying to put an iframe in a table cell in such a way that the width of the table is constant but the depth expands and contracts according to the content of the iframe page.

    So far I have managed to sort out the iframe and get it to display content as I need it in the top page , but I can't seem to position it in the table cell. (it sits below the table or doesn't display)

    Any help gratefully received as I'm note sure where I am going wrong.


    PHP Code:
    <head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Untitled Document</title>

    <
    script type="text/javascript">

    function 
    getDocHeight(doc) {
        
    doc doc || document;
        var 
    body doc.bodyhtml doc.documentElement;
        var 
    height Math.maxbody.scrollHeightbody.offsetHeighthtml.clientHeighthtml.scrollHeighthtml.offsetHeight );
        return 
    height;
    }
    function 
    setIframeHeight(id) {
        var 
    ifrm document.getElementById(id);
        var 
    doc ifrm.contentDocumentifrm.contentDocumentifrm.contentWindow.document;
        
    ifrm.style.visibility 'hidden';
        
    ifrm.style.height "0px"// 10px - reset to minimal height in case going from longer to shorter doc
        
    ifrm.style.height getDocHeightdoc ) + "px";// 10px
        
    ifrm.style.visibility 'visible';
    }

    function 
    initFrame() {
     var 
    iframe document.createElement("iframe");
     
    iframe.setAttribute('id'"ifrm1");
     
    iframe.setAttribute('src''test.asp'); 
     
    document needed
     iframe
    .setAttribute('width''170');
     
    iframe.setAttribute('height''0');
     
    iframe.setAttribute('frameBorder''0');
     
    iframe.setAttribute('scrolling''no');
     
    iframe.setAttribute('onload' ,"setIframeHeight(this.id)");
     
    document.body.appendChild(iframe);
    }

    </script>

    </head>
    <body bgcolor="#00f">
    <table width="800" border="1">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>
        <script type="text/javascript">initFrame();</script>
        <!--If I put the initFrame code here (but not as a function) I get the iframe but its displayed below the table and not in the correct cell-->
        <noscript>
    <p>Please activate Javascript</p>
    </noscript>
    <iframe width = "0" height = "0" style = "visibility:hidden; display:none;">
    <p>Your browser don't support inline frames.</p>
    </iframe>
    </p>
    </td>
      </tr>
    </table>
    </body> 
    Edit - Fixed it!

    PHP Code:
    <script type="text/javascript">

    function 
    getDocHeight(doc) {
        
    doc doc || document;
        var 
    body doc.bodyhtml doc.documentElement;
        var 
    height Math.maxbody.scrollHeightbody.offsetHeighthtml.clientHeighthtml.scrollHeighthtml.offsetHeight );
        return 
    height;
    }
    function 
    setIframeHeight(id) {
        var 
    ifrm document.getElementById(id);
        var 
    doc ifrm.contentDocumentifrm.contentDocumentifrm.contentWindow.document;
        
    ifrm.style.visibility 'hidden';
        
    ifrm.style.height "0px";
        
    ifrm.style.height getDocHeightdoc ) + "px";
        
    ifrm.style.visibility 'visible';
    }

    function 
    shortlist1(){
    var 
    link "test.asp"
    var iframe document.createElement('iframe');
    iframe.frameBorder=0;
    iframe.setAttribute('width''170'); 
    iframe.setAttribute('height''0');
    iframe.setAttribute('id'"shortlist");
    iframe.setAttribute("src"link);
    iframe.setAttribute('scrolling''no');
    iframe.setAttribute('frameBorder''0');
    iframe.setAttribute('onload' ,"setIframeHeight(this.id)");
    document.getElementById("shortlist1").appendChild(iframe);
    }
    </script>

    <div id="shortlist1"></div>
    <script type="text/javascript">
    shortlist1();
    </script> 
    Last edited by dwair; November 7th, 2013 at 10:54 AM. Reason: added solution

IMN logo majestic logo threadwatch logo seochat tools logo