Code Box Editor Javascript

Javascripts > Javascript Forms > Code Box Editor

Script Title: Code Box Editor

Description: Tiny javascript which can be added to any webpage or blog and allows you to present your html, javascript & css code to your visitors in a more functional way, allowing them to play with & preview codes right on the same page.

Example: Available

This is a great way to display code snippets to your visitors, allowing them to make changes and preview those changes all from the same page - keeping them on your site longer. Just replace this text within the script with whatever code you want to have displayed to your visitors. Click on the 'Generate Code' button to launch preview. More great scripts at <a href=http://www.java-scripts.net>Java-Scripts.net</a><br><br>

Copy the following code between the <BODY></BODY> tags of your html page.

<table style="width:560px;border:solid 1px #959492;background:#ebebea"> <tr><td valign=top> <form name="form1" method="post" action=""> <textarea name="code" wrap="soft" onclick="focus(this.code)" style="border:solid 1px #b9b8b6;padding:5px;width:260px;height:300px;scroll:auto;"> This is a great way to display code snippets to your visitors, allowing them to make changes and preview those changes all from the same page - keeping them on your site longer. Just replace this text within the script with whatever code you want to have displayed to your visitors. Click on the 'Generate Code' button to launch preview. More great scripts at <a href=http://www.java-scripts.net>Java-Scripts.net</a><br><br> </textarea> </form> </td><td valign=top> <iframe src="about:blank" name="preview" style="height:300px;width:260px;border:solid 1px #b9b8b6;background:#ffffff" frameborder=0> </iframe> </td> </tr> </table> <button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Generate Preview</button> <button onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Clear All</button> <button onClick="window.location.href=window.location.href">Reload</button>

Graphxkingdom
Thousands of free Icons, Clipart & Themes!

Free-Backgrounds
Hundreds of eye-popping Backgrounds & Textures

Java-scripts.net
Cool and easy effects with cut-and-paste Javascripts!