User Guide

Script Editor: a floating panel extension 231

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

<textarea name="scriptCode" cols="80" rows="20" wrap="VIRTUAL" ¬

onBlur="updateScript()"></textarea>

</form>

</div>

</body>

</html>

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.

Writing the JavaScript code

The JavaScript code for the Script Editor consists of one floating panel function that

Dreamweaver calls,

selectionchanged(), and one user-defined function, updateScript().

selectionChanged(): is a Script marker selected?

The

selectionChanged() function determines if a Script marker has been selected in Design

view. A Script marker appears in Design view if there is a JavaScript routine in the

BODY section of

a document and if Scripts is checked on the Invisible Elements section of the Preferences dialog

box. The following figure shows a Script marker icon:

Script marker