Just Try It
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.
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.
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
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:
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.
._(n) puts n inside angle brackets
.__(n) gets the contents of the nth textarea
nl(n) adds a section name and new lines
(From How JQuery Works Tutorial)
You can add external library references by putting the full script reference in the html textarea:
and then putting the code you want in the script textarea:
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:
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.
._(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:
|All times are GMT +1. The time now is 06:45 PM.|
Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.