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

    Question Automatic iframe height

    Hey guys,

    I've been messing with iframes all day now, and they're driving me crazy. I'm trying to make the iframe automatically adjust to its content, but it's not working. None of the scripts I found on Google made it work.

    I have an iframe on my parent page, that contains dynamic content. When you go to the website, the iframe opens a page with a div tag that's 335px tall. When you click a link on the parent page, the content of the iframe changes and it opens another page, this time containing a div that's only 100px tall.

    So what I want is that the iframe automatically shrinks/grows with the content of the page it displays. Question is: how? I have very little experience with javascript. So far I've been literally copying code from various sites, not knowing what they're saying or doing. I'm making my website this way, because I don't want to make two seperate websites for desktop and mobile. Now I only have to make the 'shell' around the content of my site.

    If anybody could tell me how to make the iframe adjust autmatically, I'd be very thankful

    Here it is (you'll immediately see the problem):
    http://www.kljhamme.be/redalert/LEVLS/

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    As you already have onload="resizeIframe()" try copying the following in the <head> area of your page:

    Code:
    <script type="text/javascript">
    function resizeIframe(iframe) {
        if (iframe) {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
            }
        }
    }
    </script>
    BTW "javascript:" has not been necessary for a long time.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I added the script, but it didn't do anything. Chrome and IE keep rendering the page wrong.

    The weird thing is that Safari (both desktop and mobile) handle the iframe correctly. It resizes the iframe automatically, even without script :s
    Even when I put the script and iframe on another page, it still doesn't render correctly
    http://www.kljhamme.be/redalert/LEVLS/testpage.html

    This is what the entire code looks like now (also updated it on the server):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>LEVLs - design</title>
    <link href="css/layout.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <style type="text/css">
    body {
    	background-image: url(images/Wave-Of-Light.jpg);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-attachment: fixed;
    	background-color: #000;
    }
    body,td,th {
    	font-family: Arial, Helvetica, sans-serif;
    	color: #FFF;
    }
    a:link {
    	color: #FFF;
    }
    a:visited {
    	color: #999;
    }
    a:hover {
    	color: #FF0;
    }
    a:active {
    	color: #FFF;
    }
    </style>
    
    <script type="text/javascript">
    function resizeIframe(bodyframe) {
        if (bodyframe) {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
            }
        }
    }
    </script>
    
    </head>
    
    <body>
    
    <script src="scripts/center.js" type="text/javascript"></script>
    
    <div id="content">
    
      <div id="logo"><img src="images/shadlogo.png" width="300" height="226" /></div>
      <div id="menu"><iframe name="menu" src="menu.html" scrolling="no" style="border:none; overflow:hidden; width:800px; height:35px;" allowTransparency="true" frameborder="0"></iframe></div>
    
    <iframe id="bodyframe" name="bodyframe" src="pages/home.html" scrolling="no" style="border:none; overflow:hidden; width:800px" allowTransparency="true" frameborder="0" onload="resizeIframe()"></iframe>
    
    
    
      <div id="about">
        <iframe src="footer.html" scrolling="auto" style="border:none; overflow:hidden; width:800px; height:23px;" allowTransparency="true" frameborder="0"></iframe>
      </div>
    </div>
    </body>
    </html>
    Last edited by lorre851; 08-28-2012 at 11:35 AM.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You renamed iframe to bodyframe - which is a good idea - but not on this line:

    Code:
    var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the tip, but unfortunately that didn't do anything.
    I stopped working on the main page (to prevent any damage) and put the code on the testpage.

    Rather than changing everything in the script to "bodyframe", I changed the iframe id to "iframe". Still nothing This is what it looks like now:

    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function resizeIframe(iframe) {
        if (iframe) {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
            }
        }
    }
    </script>
    </head>
    
    <body>
    <iframe id="iframe" name="iframe" src="pages/home.html" scrolling="no" style="border:none; overflow:hidden; width:800px" allowTransparency="true" frameborder="0" onload="resizeIframe()"></iframe>
    </body>
    </html>
    http://www.kljhamme.be/redalert/LEVLS/testpage.html

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Seems there's a bit more to this than I found at this page.

    I suspect that the onload attribute only fires once, and you may need to dynamically addEventListener. But perhaps someone else has experience of this.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I lost you at "addEventListener".. Guess I better pick up some javascript course today, trying scripts without knowing anything about them is driving me crazy.

    EDIT: I now /literaly/ copied the code on the demo page, and AGAIN it doesn't work >.<

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    		function setIframeHeight(iframe) {
    			if (iframe) {
    				var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
    				if (iframeWin.document.body) {
    					iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
    				}
    			}
    		};
    
    		window.onload = function () {
    			setIframeHeight(document.getElementById('external-frame'));
    		};
    	
    </script>
    <script async="" type="text/javascript" src="http://d.textsrv.com/?c=QkU6OjoxMTQ3OjUzNDYzOjEzODYxZGE5ZmJiYWViZjlhMWQzZjkwM2EwMjU0NzU4OmE2NTJj&amp;cachebreak=1346155493006&amp;cb=_GPL.dc" id="_GPL_fb7b3"></script>
    </head>
    
    <body>
    <iframe src="pages/home.html" frameborder="0" id="external-frame" width="800" height="200" scrolling="no"></iframe>
    </body>
    </html>
    Last edited by lorre851; 08-28-2012 at 01:10 PM.

  • #8
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I got the following version to work with two test pages and a button to click on. I have to set an initial (minimum) height of 200px each time as otherwise the iframe remains at the tallest height.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    		function setIframeHeight(iframe) {
    			if (iframe) {
    				var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
    				if (iframeWin.document.body) {
    					iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
    				}
    			}
    		};
            
            function updateIt() {
                var iframe = document.getElementById('external-frame');
                iframe.height = 200;        // a minimum setting
                iframe.onload = function () {
                    setIframeHeight(this);
                }
                iframe.src = ((iframe.src).indexOf("colourscheme.html") + 1) ? "lorem.html" : "colourscheme.html";
            }
    
    		window.onload = function () {
    			setIframeHeight(document.getElementById('external-frame'));
    		};
    	
    </script>
    <!--<script async="" type="text/javascript" src="http://d.textsrv.com/?c=QkU6OjoxMTQ3OjUzNDYzOjEzODYxZGE5ZmJiYWViZjlhMWQzZjkwM2EwMjU0NzU4OmE2NTJj&amp;cachebreak=1346155493006&amp;cb=_GPL.dc" id="_GPL_fb7b3"></script>-->
    </head>
    
    <body>
        <button onclick="updateIt()">Update it</button>
    <iframe src="lorem.html" frameborder="1" id="external-frame" width="800" height="200" scrolling="no"></iframe>
    </body>
    </html>
    I think the secret is to dynamically attach the load() event on each occasion, before changing the iframe's source.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #9
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Hi lorre851,
    It's seem you haven't problem about call event so I will focus about resize code.

    Place this code into you function that you call it on frame loaded.
    Code:
    var Tmp = document.getElementById("bodyframe");
    Tmp.style.height = Tmp.contentDocument.body.clientHeight + "px";
    //check function has been call.
    alert(Tmp.style.height);


  •  

    Tags for this Thread

    Posting Permissions

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