Ajax Loader
×
HTML 
<div  id='edits'>
1
<div  id='edits'>
2
  <div name="" id="html" cols="30" rodws="10">&lt;!doctype html>
3
&lt;head>
4
  &lt;title>Document&lt;/title>
5
&lt;/head>
6
&lt;body>
7
  &lt;p>New pad created at $[[Date]]&lt;p>
8
&lt;/body></div>
9
  <div name="" id="css" cols="30" rows="10"></div>
10
  <div name="" id="js" cols="30" rows="10"></div>
11
</div>
12
<div id="outcon"><iframe src="" frameborder="0" id="output" width='100%' height='100%'></iframe></div>
13
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
14
<link rel="stylesheet" href="http://codemirror.net/theme/monokai.css">
15
<script src="http://codemirror.net/lib/codemirror.js"></script>
16
<script src="http://codemirror.net/mode/xml/xml.js"></script>
17
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
18
<script src="http://codemirror.net/mode/js/js.js"></script>
19
<script src="http://codemirror.net/mode/css/css.js"></script>
 
CSS 
#edits {
1
#edits {
2
  display: flex;
3
  flex-direction: column;
4
  position:absolute;
5
  top:0;
6
  left: 5px;
7
  padding:0px 10px;
8
  box-sizing:border-box;
9
  max-height:100vh;
10
  bottom: 10px;
11
  justify-content: center;
12
}
13
#outcon {
14
  position:fixed;
15
  top:10px;
16
  right:10px;
17
  left:35vw;
18
  background: #fff;
19
  display:block;
20
  box-sizing:border-box;
21
  bottom:10px;
22
}
23
#edits > div {
24
  flex: 1;
25
}
26
.CodeMirror {
27
  border-radius: 5px;
28
}
29
.CodeMirror-gutter {
30
}
31
html, body {
32
  height: 100%;
33
  background:brown;
34
}
 
JavaScript 
var csse = document.querySelector("#css"),
1
var csse = document.querySelector("#css"),
2
    js = document.querySelector("#js"),
3
    output = document.querySelector("#output"),
4
    appCss = document.createElement("style"),
5
    cDate = new Date(),
6
    timer;
7
var setval = document.querySelector("#html").textContent;
8
document.querySelector("#html").innerHTML = "";
9
var cmhtmleditor = CodeMirror(document.querySelector("#html"), {
10
      mode: 'htmlmixed',
11
      lineNumbers:true,
12
      theme:'monokai',
13
      value: setval
14
  });
15
var html = cmhtmleditor;
16
var cmcsseditor = CodeMirror(document.querySelector("#css"), {
17
      mode: 'css',
18
      lineNumbers:true,
19
      theme:'monokai',
20
      value: ""
21
  });
22
var css = cmcsseditor;
23
var cmcsseditor = CodeMirror(document.querySelector("#js"), {
24
      mode: 'js',
25
      lineNumbers:true,
26
      theme:'monokai',
27
      value: ""
28
  });
29
var js = cmjseditor;
30
function pushHtml() {
31
  clearTimeout(timer);
32
  timer = setTimeout(function() {
33
             var date = new Date()
34
    var thtml = html.getValue().replace(/\$\[\[DateCreated\]\]/g,cDate.getHours()+":"+cDate.getMinutes()).replace(/\$\[\[Date\]\]/g,date.getHours()+":"+date.getMinutes());
35
    output.contentDocument.write(thtml);
36
    output.contentDocument.close()
37
    appCss.innerHTML = css.value;
38
    output.contentDocument.head.appendChild(appCss);
39
    var appJs = document.createElement("script");
40
    appJs.innerHTML = js.value;
41
    output.contentDocument.body.appendChild(appJs);
42
  },1000)
43
}
44
function pushCss() {
45
  appCss.innerHTML = css.getValue();
46
}
47
pushHtml()
48
cmhtmleditor.on('change',pushHtml)
49
js.addEventListener('input',pushHtml)
50
css.on('change',pushCss)
 

Fields to Input Text Vertical Menu

CSSDeck G+