I need to build a small website as a school assignment everything is done except for a page i am using as a container for the whole site... i made a page with an hidden div that contains a dynamic iframe(iframe that resizes by the size of the content inside) when you press a button the hidden div shows itself and reveals the content of the site and when you click on the button again the same div hide itself again. the problem is that whenever i place the dynamic iframe code in that div the dynamic iframe doesn't work and it shows only the top part of the iframed page. here's the code: <html> <head> <meta http-equiv='content-type' content='text/html; charset=UTF-8' /> <title>project</title> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> </style> <script type="text/javascript"> function resettoggle() { var e = document.getElementById('container'); e.style.display = 'none'; } function toggle_visibility(id) { var e = document.getElementById('container'); if(e.style.display == 'none') e.style.display = 'block'; else e.style.display = 'none'; } </script> <script language="JavaScript"> <!-- function calcHeight() { //find the height of the internal page var the_height= document.getElementById('the_iframe').contentWindow. document.body.scrollHeight; //change the height of the iframe document.getElementById('the_iframe').height= the_height; } //--> </script> </head> <body> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <div align="center"> <label> <input type="button" value="Enter" ONCLICK="toggle_visibility('container')";> </label> </div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <div id="container" align="center" style="display:none;"> <iframe name="the_iframe" onLoad="calcHeight();" scrolling="no" width="100%" id="the_iframe" src="main page.html" frameborder="0" allowtransparency="true"></iframe> </div> </body> </html> Code (markup): any help will be appreciated. thank you, LinkTree
<html> <head> <meta http-equiv='content-type' content='text/html; charset=UTF-8' /> <title>project</title> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> </style> <script type="text/javascript"> function resettoggle() { var e = document.getElementById('container'); e.style.display = 'none'; } function toggle_visibility(id) { var e = document.getElementById('container'); e.style.display = (e.style.display == "none") ? "block" : "none"; var obj = document.getElementById('the_iframe'); if (document.getElementById) { if (obj && !window.opera) { if (obj.contentDocument && obj.contentDocument.body.offsetHeight) obj.height = obj.contentDocument.body.offsetHeight + 20; else if(obj.Document && obj.Document.body.scrollHeight) obj.height = obj.Document.body.scrollHeight + 20; } } e.style.height = obj.height + "px"; } </script> </head> <body> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <div align="center"> <label> <input type="button" value="Enter" ONCLICK="toggle_visibility('container')";> </label> </div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <div id="container" align="center" style="display:none;"> <iframe name="the_iframe" scrolling="no" width="100%" id="the_iframe" src="main page.html" frameborder="0" allowtransparency="true"></iframe> </div> </body> </html> HTML:
Thank you! you made it work. but now there is a different problem... the dynamic iframe is resetting itself only once the Enter button is clicked and not really in a dynamic way... do you have a solution for that? thank you very much again, LinkTree
<html> <head> <meta http-equiv='content-type' content='text/html; charset=UTF-8' /> <title>project</title> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> </style> <script type="text/javascript"> function resettoggle() { document.getElementById('container').style.display = 'none'; } function toggle_visibility(id) { var iframeObj = document.getElementById('the_iframe'); var containerObj = document.getElementById(id); containerObj.style.display = (containerObj.style.display == "none") ? "block" : "none"; reset_iframe(); } function reset_iframe() { var iframeObj = document.getElementById('the_iframe'); if (document.getElementById) { if (iframeObj && !window.opera) { if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight) iframeObj.height = iframeObj.contentDocument.body.offsetHeight + 20; else if(iframeObj.Document && iframeObj.Document.body.scrollHeight) iframeObj.height = iframeObj.Document.body.scrollHeight + 20; } } if(iframeObj.height) document.getElementById('container').style.height = iframeObj.height + "px"; } </script> </head> <body> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <div align="center"> <label> <input type="button" value="Enter" ONCLICK="toggle_visibility('container')"; /> </label> </div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <div id="container" align="center" style="display:none;"> <iframe name="the_iframe" scrolling="no" width="100%" id="the_iframe" src="main page.html" frameborder="0" allowtransparency="true" onLoad="reset_iframe()"></iframe> </div> </body> </html> Code (markup):