Creating the floating panels

The beginning of the HTML file for this extension contains the standard document header information and a title tag that puts the words Script Editor in the title bar of the floating panels.

To create the HTML file header:

  1. Create a new blank document.
  2. Enter the following:
    <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Script Editor</title><script language="JavaScript">

The extension defines two floating panels that display either (no script selected) if the user has not selected a script marker or the JavaScript code that underlies a selected script marker. The following code defines these two floating panels, or layers, called blanklayer and scriptlayer:

To create the two floating panels:

  1. Add the following code after the header in the HTML file:
    <body><div id="blanklayer" style="position:absolute; width:422px; ¬height:181px; z-index:1; left: 8px; top: 11px; ¬visibility: hidden"><center><br><br><br><br><br>(no script selected)</center></div><div id="scriptlayer" style="position:absolute; width:422px; ¬height:181px; z-index:1; left: 8px; top: 11px; ¬visibility: visible"><form name="theForm"><textarea name="scriptCode" cols="80" rows="20" wrap="VIRTUAL" ¬onBlur="updateScript()"></textarea></form></div></body></html>
  2. Save the file as scriptEditor.htm in the Configuration/Floaters folder.

Both div tags use the style attribute to specify the position (absolute), size (width:422px and height:181px), and default visibility setting (visible) of the floating panels. The blanklayer panel uses the center attribute and a series of break (br) tags to position the text in the center of the panel. The scriptlayer panel creates a form with a single textarea to display the selected JavaScript code. The textarea tag also specifies that when an onBlur event occurs, indicating that the selected code has changed, the updateScript() function is called to write the changed text back to the document.