Something I made a LONG time ago and thought was worth putting here.
A Pen by Tim Samoff on CodePen.
<header> | |
<h1>Real-Time HTML/CSS Editor</h1> | |
<h2>Put something between the tags or replace them altogether...</h2> | |
</header> | |
<div class="container grid"> | |
<form> | |
<h3>HTML</h3> | |
<textarea id="html" class="edit"><h1></h1></textarea> | |
<h3>CSS</h3> | |
<textarea id="css" class="edit">h1 { | |
}</textarea> | |
</form> | |
</div> | |
<div class="output grid"> | |
<iframe></iframe> | |
</div> |
Something I made a LONG time ago and thought was worth putting here.
A Pen by Tim Samoff on CodePen.
(function() { | |
$(".grid").height($(window).height()); | |
var contents = $("iframe").contents(), | |
body = contents.find("body"), | |
styleTag = $("<style></style>").appendTo(contents.find("head")); | |
$("textarea.edit").keyup(function() { | |
var $this = $(this); | |
if ($this.attr("id") === "html") { | |
body.html($this.val()); | |
} else { | |
// it had to be css | |
styleTag.text($this.val()); | |
} | |
}); | |
})(); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
body { | |
background: none !important; | |
height: 100%; | |
margin: 20px; | |
padding: 0; | |
font-family: Arial; | |
font-weight: bold; | |
} | |
h1, | |
h2 { | |
text-align: center; | |
} | |
h1 { | |
font-size: 2em; | |
} | |
h3 { | |
margin-top: 20px; | |
} | |
textarea { | |
background: #fff !important; | |
width: 100%; | |
margin: 0 20px 0 0; | |
height: 200px; | |
border-radius: 5px; | |
border-color: #555; | |
font-family: "Source Code Pro", monospace; | |
font-size: 1em; | |
resize: none; | |
} | |
textarea:hover { | |
background: #fff !important; | |
} | |
textarea:focus { | |
outline: none; | |
background: #fff !important; | |
} | |
.grid { | |
width: 50%; | |
float: left; | |
overflow: hidden; | |
box-sizing: border-box; | |
padding: 0 30px 0 0; | |
} | |
.edit { | |
background: #fff !important; | |
padding: 5px; | |
} | |
.output { | |
background: #fff; | |
border-left: 1px solid #f3f3f3; | |
overflow: hidden; | |
padding: 0 20px; | |
margin: 20px 0; | |
} | |
.output iframe { | |
border: none; | |
width: 100%; | |
height: 100%; | |
overflow: hidden; | |
} | |
.output iframe::-webkit-scrollbar { | |
display: none; | |
} |