Writing the javascript code – Adobe Extending Dreamweaver CS4 User Manual

Page 230

Advertising
background image

224

EXTENDING DREAMWEAVER CS4

Floating panels

<!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 absolutely positioned (AP) elements, called

blanklayer

and

scriptlayer

:

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.

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().

Advertising
This manual is related to the following products: