"codeeditor"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/austinkregel/pen/GHmjD?depth=everything&order=popularity&page=100&q=iframe&show_forks=false" /> <style class="cp-pen-styles"> *{ margin:0; padding:0; } body{ background:darkred; } .body:before { background-image: -webkit-gradient(radial, 50%, 0, 50%, 95, color-stop(20%, rgba(0, 0, 0, 0)), color-stop(95%, #000000)); background-image: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 20%, #000000 95%); background-image: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 20%, #000000 95%); background-image: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 20%, #000000 95%); background-image: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 20%, #000000 95%); position: absolute; content: ""; z-index: -1; opacity: 0.9; height: 100%; width: 100%; left: 0; top: 0; } .body:after { background: url("https://s.cdpn.io/1715/noise-1.png"); position: absolute; content: ""; z-index: 0; opacity: 0.8; height: 100%; width: 100%; left: 0; top: 0; } #html{ width:32%; height:300px; position:absolute; top:30px; left:10px; } #css{ resize:none; width:32%; height:300px; position:absolute; top:30px; left:34% ; } #js{ resize:none; width:32%; height:300px; position:absolute; top:30px; left:67%; } iframe{ position:absolute; top:350px; width:100%; height:300px; background:white; } #button{ position:absolute; top:0; } .html{ position:absolute; z-index:10; color:gray; font-size:14px; border:solid thin gray; padding-left:2px; padding-right:2px; top:35px; left:29%; } .css{ position:absolute; z-index:10; color:gray; font-size:14px; border:solid thin gray; padding-left:2px; padding-right:2px; top:35px; left:63%; }.js{ position:absolute; z-index:10; color:gray; font-size:14px; border:solid thin gray; padding-left:2px; padding-right:2px; top:35px; left:92%; }</style></head><body> <div class="body"></div> <br /><button id="button">Click me load the iFame</button> <div id="html"><html> <head> <title>Generated on KBcomp.co</title> </head> <body> <!-- Stick your html here --> <div class="Yes"> This is all test stuff </div> <div id="script"> </div> </body> </html> </div> <p class="html">html</p> <div id="css"> *{ margin:0; padding:0; } .yes{ background:black; padding:10px; color:white; } </div> <p class="css">css</p> <div id="js"></div> <p class="js">javascript</p> <br /> <iframe id="preview"></iframe> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js'></script> <script >var html = ace.edit("html"); html.setTheme("ace/theme/eclipse"); html.getSession().setMode("ace/mode/html"); var css = ace.edit("css"); css.setTheme("ace/theme/eclipse"); css.getSession().setMode("ace/mode/css"); var js = ace.edit("js"); js.setTheme("ace/theme/eclipse"); js.getSession().setMode("ace/mode/javascript"); html.getSession().setUseWrapMode(true); css.getSession().setUseWrapMode(true); js.getSession().setUseWrapMode(true); html.on("blur", function(){ var html2 = html.getSession().getValue(); // HTML code var content = $("#preview").contents().find("body"); // iframe id is 'preview' content.html(html2); }); css.on("blur",function(){ var cssStyle = $("#preview").contents().find("head").find("style"); var csVal = css.getSession().getValue(); var cssLink = "<style>" + csVal + "</style>"; // cssVal contains css code var head = $("#preview").contents().find("head"); cssStyle.text(cssLink); }); js.on("blur",function(){ var script = $("#preview").contents().find("head").find("script"); var jsCode = js.getSession().getValue(); var jss = jsCode; script.text(jss); }); $('#button').click(function() { var head = $("#preview").contents().find("head"); var html2 = html.getSession().getValue(); // HTML code var content = $("#preview").contents().find("body"); // iframe id is 'preview' content.html(html2); var cssVal = css.getSession().getValue(); var cssLink = "<style>" + cssVal + "</style>"; // cssVal contains css code head.html(cssLink); var script = $("#preview").contents().find("#script"); var jsCode = js.getSession().getValue(); var jss ="<script>"+jsCode+"</scr"+"ipt>" ; script.html(jss); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: