<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/botlab/pen/jbZpGX?depth=everything&order=popularity&page=38&q=editable&show_forks=false" />
<style class="cp-pen-styles">* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
color:#000000;
margin:0px;
font-size:100%;
}
#ads {
background-color: #ffffff;
height: 104px;
width:100%;
margin-top:0px;
min-width:903px;
}
.container {
background-color:#f1f1f1;
width:100%;
overflow:auto;
position:absolute;
top:100px;
bottom:0;
height:auto;
min-height:250px;
min-width:550px;
}
.textareacontainer, .iframecontainer {
float:left;
height:100%;
width:50%;
}
.textarea, .iframe {
height:100%;
width:100%;
padding:15px;
}
.textarea {
padding-right:7px;
}
.iframe {
padding-left:7px;
}
.headerText {
width:auto;
float:left;
font-family:verdana;
font-size:1em;
line-height:2;
}
.seeResult {
float:right;
font-size:15px;
background-color:#555555;
color:#ffffff;
border:1px solid #555555;
padding:0 15px;
line-height:1.45;
width:auto;
cursor:pointer;
box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.seeResult:hover {
background-color:#ffffff;
color:#000000;
}
.seeResult:active {
background-color:#f1f1f1;
}
.textareawrapper {
width:100%;
height:92%;
background-color: #ffffff;
box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.iframewrapper {
width:100%;
height:92%;
-webkit-overflow-scrolling: touch;
background-color: #ffffff;
box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
#textareaCode {
background-color: #ffffff;
font-family: consolas,"courier new",monospace;
font-size:15px;
height:100%;
width:100%;
padding:8px;
resize: none;
border:none;
}
#iframeResult, #iframeSource {
background-color: #ffffff;
height:100%;
width:100%;
}
.footerText {
position:absolute;
bottom:0;
font-family:verdana;
font-size:0.8em;
width:100%;
padding-right:15px;
text-align:right;
height:20px;
overflow:hidden;
}
.footerText a {
color:#000000;
}
.footerText a:hover {
text-decoration:none;
}
#tryitLeaderboard {
overflow:hidden;
text-align:center;
margin-top:5px;
}
@media screen and (max-width: 768px) {
.container {
top:100px;
}
.footerText {
display:none;
}
}
@media screen and (max-width: 728px) {
#tryitLeaderboard {
margin-top:0;
}
.container {
top:60px;
}
}
@media screen and (max-width: 467px) {
.container {
top:50px;
}
}
@media only screen and (max-device-width: 768px) {
#textareaCode {
padding:5px;
}
.iframewrapper {
overflow: auto;
}
.container {
min-width:320px;
}
.textarea, .iframe {
height:97%;
}
@media screen and (orientation:portrait) {
.textareacontainer, .iframecontainer {
height:50%;
float:none;
width:98%;
}
.textarea, .iframe {
height:97%;
padding:15px;
}
}
}
@media screen and (max-height: 700px) {
.footerText {
display:none;
}
}</style></head><body>
<html lang="en-US">
<head>
<title>Tryit Editor v2.6</title>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/trystyle.css">
<script type='text/javascript'>
</script>
<script>
if (window.addEventListener) {
window.addEventListener("resize", browserResize);
} else if (window.attachEvent) {
window.attachEvent("onresize", browserResize);
}
var xbeforeResize = window.innerWidth;
function browserResize() {
var afterResize = window.innerWidth;
if ((xbeforeResize < (970) && afterResize >= (970)) || (xbeforeResize >= (970) && afterResize < (970)) ||
(xbeforeResize < (728) && afterResize >= (728)) || (xbeforeResize >= (728) && afterResize < (728)) ||
(xbeforeResize < (468) && afterResize >= (468)) ||(xbeforeResize >= (468) && afterResize < (468))) {
xbeforeResize = afterResize;
googletag.cmd.push(function() {
googletag.pubads().refresh([gptAdSlots[0]]);
});
}
}
</script>
<script type="text/javascript">
function submitTryit() {
var text = document.getElementById("textareaCode").value;
var ifr = document.createElement("iframe");
ifr.setAttribute("frameborder", "0");
ifr.setAttribute("id", "iframeResult");
document.getElementById("iframewrapper").innerHTML = "";
document.getElementById("iframewrapper").appendChild(ifr);
var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(text);
ifrw.document.close();
}
</script>
<style>
</style>
</head>
<body>
<div id='tryitLeaderboard'>
<!-- TryitLeaderboard -->
</div>
<div class="container">
<div class="textareacontainer">
<div class="textarea">
<div style="overflow:auto;">
<div class="headerText">Edit This Code:</div>
<button class="seeResult" type="button" onclick="submitTryit()">See Result »</button>
</div>
<div class="textareawrapper">
<textarea autocomplete="off" class="code_input" id="textareaCode" wrap="logical" spellcheck="false"><!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</textarea>
<form autocomplete="off" style="margin:0px;display:none;">
<input type="hidden" name="code" id="code" />
<input type="hidden" id="bt" name="bt" />
</form>
</div>
</div>
</div>
<div class="iframecontainer">
<div class="iframe">
<div style="overflow:auto;">
<div class="headerText">Result:</div>
</div>
<div id="iframewrapper" class="iframewrapper">
</div>
</div>
</div>
<div class="footerText">Try it Yourself - © <a href="https://www.w3schools.com">w3schools.com</a></div>
</div>
<script>submitTryit()</script>
<script>
var voices=window.speechSynthesis.onvoiceschanged = function() {
// voices = window.speechSynthesis.getVoices();
voices = window.speechSynthesis.getVoices();
console.log(voices);
return voices;
}
var utterance = new SpeechSynthesisUtterance('I feel it\'s likely to be distracting.');
console.log(voices);
utterance.voice = voices[4];
speechSynthesis.speak(utterance);</script>
</body>
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 100%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" style="background: #def;" name="ta" wrap="hard" spellcheck="false">' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = '<h3>Welcome to the real-time HTML editor!<\/h3>\n' +
'<p>Type HTML in the textarea above, and it will magically appear in the frame below.<\/p>';
// I don't want this stuff to appear in the box at the top because I feel it's likely to be distracting.
var extraStuff = '<div style="position:absolute; margin:.3em; bottom:0em; right:0em;"><small>\n Created by <a href="http://www.squarefree.com/" target="_top">Jesse Ruderman<\/a> and hosted by <a href="http://www.dreamhost.com/rewards.cgi?jesseruderman" target="_top">DreamHost<\/a>.\n<\/small><\/div>';
//# sourceURL=pen.js
</script>
</body></html>
