Ajax Loader
HTML 
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
1
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
2
 
3
<div id="wrap">
4
 
5
  <!-- Code Editors -->
6
  <section id="code_editors">
7
    <div id="html" class="code_box">
8
      <h3>HTML</h3>
9
      <textarea name="html"></textarea>
10
    </div>
11
    <div id="css" class="code_box">
12
      <h3>CSS</h3>
13
      <textarea name="css"></textarea>
14
    </div>
15
    <div id="js" class="code_box">
16
      <h3>JavaScript</h3>
17
      <textarea name="js"></textarea>
18
    </div>
19
  </section>
20
21
  <!-- Sandboxing -->
22
  <section id="output">
23
    <iframe></iframe>
24
  </section>
25
26
</div>
27
 
28
<script src="http://codemirror.net/lib/codemirror.js"></script>
29
 
30
<!-- For HTML/XML -->
31
<script src="http://codemirror.net/mode/xml/xml.js"></script>
32
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
33
 
34
<!-- For CSS -->
35
<script src="http://codemirror.net/mode/css/css.js"></script>
36
 
37
<!-- For JS -->
38
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
 
CSS 
* {
1
* {
2
  -webkit-box-sizing: border-box;
3
  -moz-box-sizing: border-box;
4
  box-sizing: border-box;
5
}
6
 
7
html, body {
8
  width: 100%; height: 100%;
9
}
10
 
11
#wrap {
12
  width: 100%;
13
  height: 100%;
14
}
15
 
16
/* Code Editors */
17
 
18
#code_editors {
19
  position: absolute;
20
  top: 0; left: 0; bottom: 0; right: 60%;
21
}
22
 
23
#code_editors .code_box {
24
  height: 33%; width: 100%;
25
  position: relative;
26
}
27
.code_box h3 {
28
  font-size: 13px;
29
  height: 30px;
30
  padding: 5px 10px; margin: 0;
31
  background: linear-gradient(#707070, #555);
32
  color: white;
33
  border-top: 1px solid #8F8F8F;
34
  border-bottom: 1px solid #202020;
35
  z-index: 10;
36
}
37
.code_box textarea {
38
  position: absolute;
39
  left: 0; right: 0; top: 30px; bottom: 0;
40
  resize: none; border: 0;
41
  padding: 10px;
42
  font-family: monospace;
43
}
44
.code_box textarea:focus {
45
  outline: none;
46
  background: #EFEFEF;
47
}
48
 
49
/* Output Area */
50
#output {
51
  position: absolute;
52
  left: 40%; top: 0; right: 0; bottom: 0;
53
  border: 5px solid #444;
54
  border-left-width: 10px;
55
  overflow: hidden;
56
}
57
 
58
#output iframe {
59
  width: 100%; height: 100%;
60
  border: 0;
61
}
 
JavaScript 
(function() {
1
(function() {
2
3
  // Base template
4
  var base_tpl =
5
      "<!doctype html>\n" +
6
      "<html>\n\t" +
7
      "<head>\n\t\t" +
8
      "<meta charset=\"utf-8\">\n\t\t" +
9
      "<title>Test</title>\n\n\t\t\n\t" +
10
      "</head>\n\t" +
11
      "<body>\n\t\n\t" +
12
      "</body>\n" +
13
      "</html>";
14
15
  var prepareSource = function() {
16
    var html = html_editor.getValue(),
17
        css = css_editor.getValue(),
18
        js = js_editor.getValue(),
19
        src = '';
20
21
    // HTML
22
    src = base_tpl.replace('</body>', html + '</body>');
23
24
    // CSS
25
    css = '<style>' + css + '</style>';
26
    src = src.replace('</head>', css + '</head>');
27
28
    // Javascript
29
    js = '<script>' + js + '<\/script>';
30
    src = src.replace('</body>', js + '</body>');
31
32
    return src;
33
  };
34
35
  var render = function() {
36
    var source = prepareSource();
37
38
    var iframe = document.querySelector('#output iframe'),
39
        iframe_doc = iframe.contentDocument;
40
41
    iframe_doc.open();
42
    iframe_doc.write(source);
43
    iframe_doc.close();
44
  };
45
46
47
  // EDITORS
48
49
  // CM OPTIONS
50
  var cm_opt = {
51
    mode: 'text/html',
52
    gutter: true,
53
    lineNumbers: true,
54
  };
55
56
  // HTML EDITOR
57
  var html_box = document.querySelector('#html textarea');
58
  var html_editor = CodeMirror.fromTextArea(html_box, cm_opt);
59
60
  html_editor.on('change', function (inst, changes) {
61
    render();
62
  });
63
64
  // CSS EDITOR
65
  cm_opt.mode = 'css';
66
  var css_box = document.querySelector('#css textarea');
67
  var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);
68
69
  css_editor.on('change', function (inst, changes) {
70
    render();
71
  });
72
73
  // JAVASCRIPT EDITOR
74
  cm_opt.mode = 'javascript';
75
  var js_box = document.querySelector('#js textarea');
76
  var js_editor = CodeMirror.fromTextArea(js_box, cm_opt);
77
78
  js_editor.on('change', function (inst, changes) {
79
    render();
80
  });
81
82
  // SETTING CODE EDITORS INITIAL CONTENT
83
  html_editor.setValue('<p>Hello World</p>');
84
  css_editor.setValue('body { color: red; }');
85
86
87
  // RENDER CALL ON PAGE LOAD
88
  // NOT NEEDED ANYMORE, SINCE WE RELY
89
  // ON CODEMIRROR'S onChange OPTION THAT GETS
90
  // TRIGGERED ON setValue
91
  // render();
92
93
94
  // NOT SO IMPORTANT - IF YOU NEED TO DO THIS
95
  // THEN THIS SHOULD GO TO CSS
96
97
  /*
98
    Fixing the Height of CodeMirror.
99
    You might want to do this in CSS instead
100
    of JS and override the styles from the main
101
    codemirror.css
102
  */
103
  var cms = document.querySelectorAll('.CodeMirror');
104
  for (var i = 0; i < cms.length; i++) {
105
106
    cms[i].style.position = 'absolute';
107
    cms[i].style.top = '30px';
108
    cms[i].style.bottom = '0';
109
    cms[i].style.left = '0';
110
    cms[i].style.right = '0';
111
    cms[i].style.height = '100%';
112
  }
113
  /*cms = document.querySelectorAll('.CodeMirror-scroll');
114
  for (i = 0; i < cms.length; i++) {
115
    cms[i].style.height = '100%';
116
  }*/
117
118
}());
 

Building Your Own CSSDeck

CSSDeck G+