Coding Techniques used for The Lord's Prayers

The Lord's Prayers web page was written partly to test the programming interface described in the Page Notes manual. Page Notes Manual and Reference Significant aspects of this effort include dynamically modified style rules, the use of page notes to build specialized drop-down menus, an onload handler that coordinates with the Page Notes onload handler, and the use of textured backgrounds.

Changing the style rules for lexical annotations

Each entry in the lexicon consists of a couple of adjacent spans enclosed in a paragraph.  The left span is of class term and the right is of class dfn.  The enclosing paragraph is of type lexical-entry and has its own id.

 eisenegkhV  lead, bring, carry     

Each word in each prayer (e.g., e.g.,  lead) is regarded as a translation of a corresponding Greek word, is annotated with the Greek word's corresponding lexical entry, and has class ple (for plain English).  

• To display just the English variants of a prayer word, use these rules:
      .ple { nskin: note-box }
      .term { display: none }
      .dfn { display: inline }
  When the annotation is displayed, the entire lexical entry is placed in the note-box, but only the English definition list is displayed.
• To display only the originating Greek term for the prayer word, use these rules:
      .ple { nskin: note-box }
      .term { nskin: note-box; display: inline }
      .dfn { display: none }
  The entire lexical entry is again placed into the note-box, but only the Greek term shows up.  However, the English definition is still available because each term is annotated with its following definition (via this.nextSibling).

• Finally, to display the entire lexical entry, use this rule:
      .ple { nskin: greek-and-english }
      .term { nskin: pending; display: inline }
      .dfn { display: inline }
  The two spans of the lexical entry are loaded into the two-variable greek-and-english box.  The term's annotation is redundant and so is disabled by marking its skin as pending.  The entries in the greek-and-english box appear the opposite order from that of the lexical entry as a result of using numbered variables:

Using page notes to build drop-down menus

Each of the five menus is annotated with a variable-free skin with buttons.  When the mouse pauses on a menu, the corresponding button list is displayed.  Each text label on each gold text button is further annotated with relevant historical information, and the active style for the text is darker.  Annotations without destination links are used to darken highlighted text on the gray buttons.  Each of the five main menus is also given a brighter active style. 

Each button has an associated selected and unselected style that responds to the onclick event in a manner that is entirely analogous to the active and inactive styles associated with onmousepause events.

Which list a button belongs to is determined by its onclick handler.  For example, buttons other than the lexical annotation buttons all lbelong to the same list and are handled by the SetPrayer function (so logically, the notes buttons also represent "prayers"). 

The SetPrayer function first changes the currently selected button.  This involves obtaining the name of the clicked-on button from its visible button text and changing the global variable currentPrayerBtn accordingly; it also involves changing the button syntax of the two buttons to visibly reflect their changed status. 

Finally, SetPrayer changes the currently selected prayer by setting the innerHTML of the currentPrayerGoesHere object to that of the current prayer.

Onload events

The Lords Prayers page contains an onload event handler that

• calls the Page Notes onload event handler

• Sets the lexical annotation option to "Greek and English"

• Sets the "current prayer" to the Overview presentation

• Highlights the notes menu

• Displays the credits on the Overview presentation

Use of background images

Some of the note boxes use finely textured background images to enliven their color.  It's basically the same principle as expressionist paintings:

Active "notes" menu	Light gray-on-blue polka dots
English translations	Light aqua-on-gray polka dots
Contextual notes	Warm light gray plaid
Document body	Warm gray plaid