Contents included this document are

Creating

Note Alert is a Dreamweaver (DW) command application that allows web page developers to insert code on their web pages so that when the page is first viewed, a small notification layer is displayed to the user. The main purpose of this note layer is to provide a means to show a company logo and small bits of information such as links to a Facebook or Twitter page. A small X button on the right side allows the user to dismiss the notification. However, it will reappear again when the page is loaded again.

Once the application is installed in DW, it is accessed via Commands -> Goodies -> Create Note Alert by ReB ..., which opens the UI shown below.

UI for Note Alert App

Fig. 1 - View of "Create Note Alert ..." UI (v1.8.x)

Note this UI can also be accessed by clicking on the Note Alert icon (Note Alert Icon) shown in the Goodies panel.

When the UI is first shown, the cursor is focused in the witdh field ready to accept a value to be supplied by the user. If no value is speicifed, then the Note Alert layer will wrap around it's content and be no wider than its contents (including margins, border, and padding). This field allows one to make the width larger is so desired. The default vertical positioning is along the bottom edge of the browser's window. And default horizontal positioning is to the left of side of the browser window, with an offset shown in the small window to that button's immediate right or zero offset if there is no value. Selecting the center option will show an alert box if there is no width specified, indicating that a width needs to be given. Up to three separate span elements can be provided to provide content for the Note Alert layer, which are in addition to the logo and the closing X button. The span's content can included HTML markup. Since a <SPAN> tag is used for inline content, the content should only contain inline elements.

The checkbox next to Reload Earlier Settings allows the user to reset the UI with values used in a previous call to the App. This information is kept at the top of the file rb_NA_App.js file within the rbNA directory in the data structure rbIData, which the user should probably not modify.

Once the "OK" is clicked, the application inserts code into the web page and creates a style sheet (rbNA.css) in the directory rbNA located where the web page is located. If DW does show any changes, it means that the content has already been inserted on the page. The style sheet can be edited by the web developer to stylizes it to his/her liking, after this application has been run once. This App will not overwrite the files in rbNA, and creates it if it doesn't already exists.

On a normal web page, the code for calling the Note Alert layer is placed just before the closing </body> tag. On template-based pages, it is inserted just before the last <!-- InstanceEndEditable --> tag. If, as a web developer, you are not comfortable with that placement, then create another editable region on your web page that lies as close to the closing </body> tag as possible so that the code may be placed there. In addition, if there is a <script> block in this editable region, the call for creating Note Alert is placed just before the closing </script> tag.

The small X button that appears in the Note Layer is a png image that is 12 pixels wide by 10 pixels high. This information can be used to position this image more towards the vertical middle of the layer, if the user so wishes.

Template-based pages

When attempting to insert a Note Layer on a template-based page in Code View, the user may get the following error message:

Lock region error message

Fig. 2 - Error message on a template-based page.

If this error message is displayed, just click on the Note Alert icon again. By the time this error message appears all of the files in the rbNA directory have been written and all that is needed when the UI is reshown, is select the Reload Previous Settings checkbox and then OK. Everything that was entered previously will be reset and displayed again. The reason for this error message is not understood at the present time because no changes have been made in the underlying source code. This error doesn't occur when Note Alert is inserted when the page is in Design View.

Removing

The code inserted by this application can be removed via Commands -> Goodies -> Remove Note Alert ... which displays the following UI. (Or by clicking on the remove Note Alert icon (Note Alert Remove Icon) shown in the Goodies panel.)

UI for removal of cookie notification

Fig. 3 - View of "Remove Note Alert . . ." UI

If the checkbox about removing the directory rbNA is checked, then that directory and all of its content are also removed, and thus any customizing that has been done to the Note Layer. If the user wishes to retain the directory rbNA, then just leave this checkbox unchecked and it will be left alone. Only the code inserted into the web page is removed.

Data Structure

The information in this section is meant for Advanced users. It explains how the data filled in the UI shown is Fig. 1 is stored in the file rb_NA_app.js stored in the directory rbNA. That data is contained in the object rbIData which has the following structure:

Format of the object rbIData
Property Initial Value    Final Value

  uLyrWidth    0   layer width in pixels or auto
  uVPos   -1   top (0) or bottom (1)
  uHPos   -1   left (0), center (1), right (2)
  uHPosLeftValue   -1   left offset (% allowed)
  uHPosRightValue   -1   right offset (% allowed)
  uImgPath    '' (Null string)   relative path to logo image
  uImgTitle    '' (Null string)   optional title for logo
  uSpan_1,uSpan_2,uSpan_3    '' (Null string)   escape-encoded content
  uSpanCls_1,uSpanCls_2,uSpanCls_3    '' (Null string)   x | class-name

   Any colons (:) used in the span contents are converted to a pipe (|) to make extracting data from rbIData easier.

In the last row, x is the index of the item in the select list for class value. If the first one is filled in then it will be -1.

An advanced user can modify these values as long as he/she adheres to the restrictions shown in the above table.