Code Box Editor

General

A code box where users can edit code and preview their results all on the same page. A great way to offer your code snippets to your visitors.

Notes

Created by: Carole Nickerson
Posted: April 5, 2006

Source Code

Paste this source code into the designated areas.

Head

Paste this code into the HEAD section of your HTML document.

Body

Paste this code into the BODY section of your HTML document


<div align="center">
<table style="width:600px;border:solid 1px #959492;background:#ebebea">
<tr><td valign="top">
<form name="form1" method="post">
<textarea name="code" wrap="soft" onclick="focus(this.code)" style="border:solid 1px #b9b8b6;padding:5px;width:300px;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.<br><br>
<a href="http://www.thenetter.com/scripts/" target="_new">More Free Scripts</a>
</textarea>
</form>
</td><td valign="top">
<iframe src="about:blank" name="preview" style="height:300px;width:300px;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>
</div>

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

General

Notes

Source Code

Head

Body

Leave a Response

Attention JavaScript Coders

Whitepapers and More