Changes:
Added doctype declaration list - defaults to quirks.
Test Button replaces old Run button.
Take It with you - no change.
Run button now opens results in a new window.
You can get just the content you added in the
“Take it with you” window, or the full source
of you code in the “Run” window,
Internal changes to anonymous function and justtryit object.
justtryit functions:
._(n) : puts n inside angle brackets
.__(n) : gets the contents of the nth textarea
.nl(n) : adds a section name and new lines
.clean() : clears the module level res
.add(n) : appends n to res
.dt (n) : appends nth doctype def to res
.write(n) : writes n to a new window.
Here is the updated code:
Code:
<!doctype html>
<html>
<head>
<title>
Just Try It
</title>
<style type='text/css'>
.html, .css {width:550px;height:150px;}
.code, .result {width:550px;height:300px;}
</style>
</head>
<body>
<table>
<tr>
<td>
<div>HTML</div>
<textarea><p><a href="http://albumnized.net46.net">albumnized</a></p>
<textarea id="ta1">Play in the sandbox.</textarea></textarea>
</td><td>
<div>CSS</div>
<textarea>a {font:normal normal 16px/16px verdana;color:red;}
#ta1 {width:350px;height:250px;background:navy;color:cyan;}</textarea>
</td>
</tr><tr>
<td>
<div>JavaScript</div>
<textarea>setTimeout(function(){
document.getElementsByTagName("a")[0].style.color="green";
var a = document.getElementsByTagName("a")[0];
a.innerHTML = a.innerHTML.toUpperCase();
setTimeout(function(){
document.getElementsByTagName("textarea")[0].value+="\nWHEEE!";},1000);
},1000);</textarea>
</td><td>
<div>Result</div>
<iframe></iframe>
</td>
</tr>
</table>
<button> >>> Test </button>
<button> >>> Take It With You </button>
<button> >>> Run </button>
[
<label for="dtype">doctype</label>
<select id="dtype">
<option selected="true">Quirks</option>
<option>html5</option>
<option>4.01 strict</option>
<option>4.01 transitional</option>
<option>4.01 frameset</option>
<option>xhtml strict 1.0</option>
<option>xhtml transitional 1.0</option>
<option>xhtml framset 1.0</option>
<option>3.2 final</option>
</select>
]
<script type="text/javascript">
(function(){
// just try it needs 3 textareas, 1 iframe, and 2 buttons to work.
document.getElementsByTagName("textarea")[0].className = "html";
document.getElementsByTagName("textarea")[1].className = "css";
document.getElementsByTagName("textarea")[2].className = "code";
document.getElementsByTagName("iframe")[0].className = "result";
var justtryit={
res:"",
clear:function(){justtryit.res=""},
add:function(n){justtryit.res+=n;return this;},
__:function(n){justtryit.res+=document.getElementsByTagName("textarea")[n].value;return this;},
_:function(n){justtryit.res+="<"+n+">";return this;},
nl:function(n){justtryit.res+="\n\n"+["<!-- html -->","/* css */","// script"][n]+"\n";return this;},
dt:function(n){
justtryit.add([
'',
'<!DOCTYPE html>',
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">',
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">',
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">',
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">'
][n]);
return this;
},
write:function(n){
n=n.replace(/(<.*?>)/g,"$1\n");
var a = window.open("about:blank");
a.window.document.open();
a.window.document.write(n);
a.window.document.close();
}
};
document.getElementsByTagName("button")[0].onclick = function(){
justtryit.clear();
justtryit.dt(document.getElementById("dtype").selectedIndex)._("html")._("head")._("style").__(1)._("/style")
._("/head")._("body")
.__(0)._("script").__(2)._("/script")
._("/body")._("/html");
document.getElementsByTagName("td")[3].innerHTML ="<div>Result</div><iframe></iframe>";
document.getElementsByTagName("iframe")[0].className = "result";
document.getElementsByTagName("iframe")[0].contentWindow.document.open();
document.getElementsByTagName("iframe")[0].contentWindow.document.write(justtryit.res);
document.getElementsByTagName("iframe")[0].contentWindow.document.close();
};
document.getElementsByTagName("button")[1].onclick = function(){
justtryit.clear();
justtryit.dt(document.getElementById("dtype").selectedIndex).nl(0).__(0).nl(1).__(1).nl(2).__(2);
justtryit.write("<textarea rows='25' cols='80'>"+justtryit.res.replace(/<\/textarea/g,"<textarea")+"</textarea>");
};
document.getElementsByTagName("button")[2].onclick = function(){
justtryit.clear();
justtryit.dt(document.getElementById("dtype").selectedIndex)._("html")._("head")._("style").__(1)._("/style")
._("/head")._("body")
.__(0)._("script").__(2)._("/script")
._("/body")._("/html");
justtryit.write(justtryit.res);
}
})();
</script>
</body>
</html>
Thanks,