"editor"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 lang='en' 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/Diakogiannis/pen/XdpjEJ?limit=all&page=12&q=editor" /> <style class="cp-pen-styles">* { margin:0; padding:0; } body { font-family:tahoma; color:white; box-sizing: border-box; } #wrapper { width:100%; height:100%; box-sizing: border-box; } nav { width:100%; background:green; height:60px; } nav section, nav ul { display:inline-block; } #logo { position:relative; width:15%; text-align:center; height:30px; bottom:20px; margin-left:2%; box-sizing: border-box; } #buttonDiv { position:absolute; width:20%; text-align:center; right:0px; margin-right:2%; top:10px; height:30px; } #buttonDiv button { width:50%; border-radius:10px; background:#fff; color:#000; font-size:1.2em; height:40px; border:none; transition:all 0.2s linear; } #buttonDiv button:hover { background:#000; color:#fff; cursor:pointer; } #toggles { margin-left:7%; padding:0; text-align:center; list-style-type: none; width:50%; height:100%; } #toggles li { float:left; font-size:1.2em; margin-top:0px; padding:0; width:25%; box-sizing: border-box; height:100%; transition:background 0.3s linear; } #toggles li:hover { background:darkgreen; cursor:pointer; } .codeContainer { float:left; margin:0; padding:0; border-right:1px solid black; box-sizing: border-box; width:50%; } .codeContainer textarea { width:100%; height:100%; border:none; font-family:monotype; font-size:1.2em; padding:2%; box-sizing: border-box; } .codeContainer textarea:focus { outline:none; } h3 { color:black; float:right; margin-right:3%; margin-top:5px; } #cssContainer, #javascriptContainer { display:none; } iframe { display:block; height:100%; width:80%; margin:auto; box-sizing: border-box; border:none; } li.active { background:darkgreen; } h5 { display:block; width:100%; margin-top:20px; } h2 { display:block; width:100%; }</style></head><body> <body> <section id='wrapper'> <nav id="menu"> <section id="logo"><h2>CodeEditor</h2></section> <section id="buttonDiv"><button id="runButton">Run</button></section> <ul id="toggles"> <li class="active" id="html"><h5>HTML</h5></li> <li id="css"><h5>CSS</h5></li> <li id="javascript"><h5>JavaScript</h5></li> <li id="result" class="active"><h5>Result</h5></li> </ul> </nav> <section class="codeContainer" id="htmlContainer"> <h3>HTML</h3> <textarea id="htmlCode">Example Code</textarea> </section> <section class="codeContainer" id="cssContainer"> <h3>CSS</h3> <textarea id="cssCode">Example Code</textarea> </section> <section class="codeContainer" id="javascriptContainer"> <h3>JavaScript</h3> <textarea id="javascriptCode">Example Code</textarea> </section> <section class="codeContainer" id="resultContainer"> <h3>Result</h3> <iframe id="inlineFrame"></iframe> </section> </section> </body> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >$(document).ready(function() { calculateHeight('.codeContainer'); $('#css').on('click',containerShow); $('#html').on('click',containerShow); $('#javascript').on('click',containerShow); $('#result').on('click',containerShow); $('#runButton').on('click',runShow); }); function getWidth() { return $('.active').length; } function calculateHeight(selector) { var windowHeight = $(window).height(), menuHeight = $('#menu').height(), codeContainerHeight = windowHeight - menuHeight; var some = $(selector).height(codeContainerHeight); return some; } function containerShow() { $(this).toggleClass('active'); $('#' + $(this).attr('id') + 'Container').toggle(); var count = getWidth(); $('.codeContainer').css('width',100/count + '%'); } function runShow() { $('iframe').contents().find('html').html('<style>'+$('#cssCode').val() + '</style>'+($('#htmlCode').val())); document.getElementById('inlineFrame').contentWindow.eval($('#javascriptCode').val()); } //# sourceURL=pen.js </script> </body></html>

Related: See More

BLK• Design System
HTML Editor WYSIWYG Interface
Text editor toolbar

Questions / Comments: