• Live Demo • Documentation • Download •
var result = "string"; var iframe = document.getElementById('iframe'); if(iframe.contentDocument) doc = iframe.contentDocument; else if(iframe.contentWindow) doc = iframe.contentWindow.document; else doc = iframe.document; doc.open(); doc.writeln(result); doc.close();
Adding a custom framework, libraries, themes or anything is simple as we just build it into the string just like we would a regular web page.
The rest of the code is pretty much just eye candy and some server side stuff to save the fiddles. I will outline the other pieces of the JSFiddle code, which maybe I will add some day if I’m not lazy.
This is where the server side part comes in. But all we’re doing here is saving and retrieving strings from the server. For a fork we duplicate the record, for an update we increment a version number, can’t get much easier than that.
Resizing the Boxes
Some Eye Candy
One last piece to add would be a syntax highlighter for the code boxes. There are plenty out there and it wouldn’t be too difficult to intergrate one of them. Also we would probably also need to add some key press handlers for the tab button to give us nice tab indents rather than switching to another portion of the page.
That pretty much covers it, sometimes it really is quite amazing how much you can accomplish with so little code and it shows you that creativity and ingenuity is just as important as being a solid developer when it comes to ideas. Creating Awesome Effects Using jQuery Hover
Building Collections Efficiently Using jQuery
jQuery Plugin Development Boilerplate
10 Coding Tips to Write Superior jQuery Plugins