Code Box Editor Tested in IE7, IE6.0, Netscape7.02, Netscape8.1, Opera8.52, Firefox1.5.0.1 and AOL Explorer1.2

Today is . Page created 04/08/06, Updated 01/31/07

Code Box Editor

<p><font face="arial,helvetica,georgia"size="4"color="#ba55dc">T</font>
<font face="arial,helvetica,georgia"size="2"color="#fff0f5">his 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 "<font color="#ff0000">Generate Code</font>" button to launch preview.<br><br>
<font color="#ba55dc">
[ <a href="http://javascript.internet.com/forms/code-box-editor.html" target="_blank">Get Code Here</a> ]</font>

<p><SCRIPT LANGUAGE="JavaScript">
<!--

//Script created by Ronny Drappier, http://sipreal.com
//Visit http://javascriptkit.com for this script

today=new Date();
    y0=today.getFullYear();

// end hiding --->
</SCRIPT>

<palign="center"><font face="georgia,arial,helvetica"size="-2"color="#ba55dc">
Copyright © Consigliere Ltd., All Rights Reserved. 2001-<SCRIPT LANGUAGE="JavaScript">
  
</SCRIPT></font></p>
<br>
</div>

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.

W e have tested the code in IE7.0, IE6.0, Firefox1.5.0.1, Opera8.52, Netscape7.02, Netscape8.0.4 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

D epending on your knowledge of HTML and javascripts, this is an easy one (1) part copy and paste code that goes anywhere in the <BODY> section you want it to appear. For all intensive purposes, there are "No" reconfigurations other than for cosmetic reasons to blend more into your site.

<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 where the code(s) will go

</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>

For your Information: As you can notice in the above code, we have the button section sectioned off from start to end. Reason being is quite simple. The default has the buttons as shown at the bottom of the effect. If you want the buttons on top of the effect, just cut and paste the above section as shown below at the top of the code instead of at the bottom of the code.

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]