Just Try It is not pretty, just functional. Yes, the idea of the layout and inspiration is from jsfiddle
Also, yes it can be broken, but its nice to have a light-weight way to try out code.
Just Try It is a small client side testing sandbox for html/css/ and javascript.
It's obviously no
jsfiddle., nor even a
w3scools try it now, but there are no server calls required.
Just Try It works both locally from the desktop and also from a web host.
The iframe is where all of the user provided html/css/javascript is run, isolating it from the
containing page.
A new iframe is created at each run to bypass all same-origin issues when the iframe is loaded from a remote url.
How to use:
1) Put your html in the html textarea
2) css goes in the css textarea
3) javascript goes in the javascript textarea
4) Click the ">>>Run" button and the reults will be shown in the iframe.
The ">>>Take it with me" button opens a new window with your code in a textarea.
There is example code in the textareas that you can obviously remove.
Click the run button to see what a run looks like.
You can set up custom error reporting by throwing something like this into the top of the html textarea:
Code:
<div id="info"> </div>
<script type="text/javascript">
window.onerror = function (msg, url, num) {
document.getElementById("info").innerHTML=msg + ';' + url + ';' + num + "<br>";
return true;
}
</script>
Obvious extensions are adding document declaration options - it's quirks mode right now. Change it
by adding the doctype declaration before the html.
something like ._("!doctype html"), or just create options the user can select from.
I feel like I should say sorry for the justtryit function names, but they're short, distinct, and tucked away.
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
Finally,
(From
How JQuery Works Tutorial)
You can add external library references by putting the full script reference in the html textarea:
<a href="http://jquery.com/">jQuery</a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
and then putting the code you want in the script textarea:
Code:
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
All in all, I hope someone finds this useful.
Just Try It works with all modern browsers: ie,ff,safari,chrome,opera.
Tested on vista.
Here's the Just Try It Code in full:
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> >>> Run </button>
<button> >>> Take It With You </button>
<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=""},
__: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;}
};
document.getElementsByTagName("button")[0].onclick = function(){
justtryit.res="";
justtryit._("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.res="";
justtryit.nl(0).__(0).nl(1).__(1).nl(2).__(2);
var a = window.open("about:blank");
a.window.document.open();
a.window.document.write("<textarea rows='25' cols='80'>"+justtryit.res.replace(/<\/textarea/g,"<textarea")+"</textarea>");
a.window.document.close();
};
})();
</script>
</body>
</html>
Thanks,
Before you post, read our: 
