Permalink
Browse files

Demo for Nettuts

  • Loading branch information...
0 parents commit cabfd7bb4bc6fa78cf8678736a6f43a1ab9bf9d3 @JeffreyWay JeffreyWay committed Nov 21, 2011
Showing with 100 additions and 0 deletions.
  1. +55 −0 iframe.html
  2. +45 −0 style.css
@@ -0,0 +1,55 @@
+<!doctype html>
+<html>
+<head>
+ <title></title>
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<div class="container grid">
+ <form>
+ <h2>HTML</h2>
+ <textarea id="html"></textarea>
+
+ <h2>CSS</h2>
+ <textarea name="" id="css"></textarea>
+ </form>
+</div>
+
+<div class="output grid"></div>
+
+
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
+
+<script>
+
+$(function() {
+ // equal-height columns.
+ $('.grid').css('height', $(window).height());
+
+ var $frame = $('<iframe></iframe>').appendTo('.output'),
+ doc = $frame[0].contentWindow.document,
+ body = $('body', doc),
+ styleTag = $('head', doc).append('<style></style>').children('style');
+
+ $('textarea').focus(function() {
+ var $this = $(this);
+
+ $this.keyup(function() {
+ if ($this.attr('id') === 'html') {
+ body.html( $this.val() );
+ } else {
+ // CSS was added
+ styleTag.text( $this.val() );
+ }
+ });
+ });
+
+});
+
+
+</script>
+
+</body>
+</html>
@@ -0,0 +1,45 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-family: sans-serif;
+}
+
+textarea {
+ width: 100%;
+ margin: 20px auto 50px;
+ height: 200px;
+
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ border-color: #999;
+}
+
+.container {
+ background: #e3e3e3;
+ border-right: 1px solid white;
+}
+
+.grid {
+ width: 50%;
+ float: left;
+ overflow: hidden;
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 30px 50px;
+}
+
+.output {
+ border-left: 1px solid #e3e3e3;
+ overflow: hidden;
+}
+
+.output iframe {
+ border: none;
+ width: 100%;
+}

0 comments on commit cabfd7b

Please sign in to comment.