ok, quite aware of fact there few questions on here regarding changing iframes' height based on content inside it, nothing seems work. have tried everything, nothing seems work, , need quick. in advance.
sorry code not being neat
code here
body { width: 100vw; height: 100vh; margin: 0px; padding: 0px; background-color: #e1e1e1; } @keyframes spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } h1 { margin: 0px; } #hbody { width: 100vw; height: 100vh; //overflow: hidden; } #hubcontain { width: 85%; margin: auto; min-height: 100%; position: relative; box-sizing: border-box; } #navbardiv { width: 100%; height: 15%; min-width: 950px; left: 0; top: 0; float: left; position: relative; box-sizing: border-box; padding: 0px; display: block; margin: auto; z-index: 2; text-align: center; } #navhead { text-align: left; font-size: 50px; font-family: abadi mt condensed bold; font-weight: bold; padding: 2px 0px 2px 0px; } #mainc { width: 100%; position: relative; box-sizing: border-box; /*height: -webkit-calc(100% - 15% - 32px); height: -moz-calc(100% - 15% - 32px);*/ float: left; top: 0; } #mainc iframe { width: 100%; //height: 100%; border: none; padding: 0px; } ul { list-style-type: none; padding: 0px; margin: 0px; //display: block; background-color: #efefef; position: relative; border-radius: 3px; box-shadow: 8px 5px 10px #cccccc; } ul li { display: inline-block; } ul li { padding: 16px; display: block; margin: 0px; font-size: 18px; font-family: pt sans; text-decoration: none; font-weight: bold; letter-spacing: 2px; } ul ul { display: none; top: 100%; padding: 0px; margin: 0px; z-index: 1000; position: absolute; background-color: #d5d5d5; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } ul ul li { display: block; } ul ul li:nth-last-child(1) { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } iframe { z-index: 1; padding: 0px; margin: 0px; } /* * { outline: 2px solid blue; //animation: spin 2s infinite linear; } */<!doctype html> <html> <head> <title> tbd </title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=pt+sans" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script type="text/javascript"> function changeframesize() { var iframe = document.getelementbyid("mainframe"); var frameheight = getcomputedstyle(iframe.contentdocument.body); var heightchange = parsefloat(frameheight.scrollheight); iframe.style.height = heightchange; console.log(iframe.style.height); }; function checkkey(e) { var key = e.keycode; if(key === 85) { changeframesize(); }; }; window.addeventlistener("keydown", checkkey); $(document).ready(function() { $("html, body").animate({scrolltop: '0px'}, 0); $("#dropdownli").mouseenter(function() { $("li ul").stop().slidedown(); }); $("#dropdownli").mouseleave(function() { $("li ul").stop().slideup(); }); $("#firstul > li").mouseenter(function() { $(this).stop().animate({ backgroundcolor: "#d4d1d1" }, 250); }); $("#firstul > li").mouseleave(function() { $(this).stop().animate({ backgroundcolor: "#efefef" }, 250); }); $("#dropdownli ul li").mouseenter(function() { $(this).stop().animate({ backgroundcolor: "#a9a9a9" }, 250); }); $("#dropdownli ul li").mouseleave(function() { $(this).stop().animate({ backgroundcolor: "#d5d5d5" }, 250); }); }); </script> </head> <body id="hbody"> <div id="hubcontain"> <div id="navbardiv"> <div id="navbar"> <h1 id="navhead"> tbd </h1> <ul id="firstul"> <li> <a href="index.html" target="mainframe">home</a> </li> <li> <a href="binfo.html" target="mainframe">background information</a> </li> <li> <a href="contact.html" target="mainframe">contact</a> </li> <li> <a href="tprocess.html" target="mainframe">thought process</a> </li> <li id="dropdownli"> <a href="#">layouts</a> <ul> <li> <a href="lpages.html" target="mainframe">landing pages</a> </li> <li> <a href="mlayouts" target="mainframe">main layouts</a> </li> <li> <a href="ttenlayouts.html" target="mainframe">top 10 layouts</a> </li> </ul> </li> </ul> </div> </div> <div id="mainc"> <iframe src="index.html" id="mainframe" name="mainframe"></iframe> </div> <div id="footerc"> </div> </div> </body> </html>
i used code in dynamicdrive.com provide, here's link: http://dynamicdrive.com/dynamicindex17/iframessi2.htm used in site long time , worked fine. easy set up.
it not use jquery js, doesn't work in opera browser understand , not work if content load on iframe other domain.
the js not long rather short can study if want, although don't need understand use or set up.
Comments
Post a Comment