Form Help DOM/JavaScript

Form Help Unobtrusive DOM/JavaScript Code

Linking to the external DOM/JavaScript file

Put a link to the Unobtrusive DOM/JavaScript file in the <head></head> section of the web page.

Definitions of the highlighted markup:: <head></head> This markup element contains the <script></script> element that holds the relative path to the DOM/JavaScript file.; src="scripts/formhelp.js" This markup attribute of the <script></script> element contains the relative path to the external source (src) location of the DOM/JavaScript file.

Important Note: All files must always be kept within the main project folder to maintain their associations as written in the code.

```
<head>
```

  <script type="text/javascript" src="scripts/formhelp.js"></script>

```
</head>
```

top

Employ this Unobtrusive DOM/JavaScript to initiate Context-Sensitive Form Help.

The external DOM/JavaScript code sets a hook to the rel attribute value of "help" in the <a></a> element with its href attribute to open the Context-Sensitive help web page (HelpExample.htm) within the Form Help Method web page.

The following code block contains three functions:

function addLoadEvent(func) This function enables more than one script to register and load in a web page.
function formhelp() This function sets the rel attribute as the hook to the anchor link which points to the external help file.
function popUp(winURL) This function provides the trigger to open the external help file in a new window.

This DOM/JavaScript code block is kept in a formhelp.js file in the scripts folder in the same project folder with the:
- Form Help Method web page
- Context-Sensitive help web page
- images folder
- C.S.S. stylesheet files
Notice the rel attribute with its value of "help" and its relationship to the anchor ("a") element href attribute which in the markup points to the external help file.
This is the hook that the DOM/JavaScript needs to follow and open a new window containing the Context-Sensitive help.
You can also set the:
- width and height of the new Context-Sensitive help window;
- add a status bar to it (highly recommended);
- give the user the ability to resize the new Context-Sensitive help window if they choose to do so;
- add scrollbars to it.
These additions to the function are shown in the window.open(winURL,"popup", ...), line 39 in the following code block.
If scripting is turned off in the browser the Context-Sensitive help page when activated will gracefully open in a new, full sized window.

/* start multiple load function - design by Simon Willison */

```
function addLoadEvent(func) {
```
```
  var oldonload = window.onload;
```

  if (typeof window.onload != 'function') {

```
    window.onload = func;
```
```
  } else {
```
```
    window.onload = function() {
```
```
      if (oldonload) {
```
```
        oldonload();
```
```
      }
```
```
      func();
```
```
    }
```
```
  }
```
```
}
```
```
addLoadEvent(window.onload);
```
```
addLoadEvent(function() { 
```

/* add more code here to run on page load if necessary */

```
});
```
```
/* end multiple load function */
```
```
 
```
```
/* start window.onload = function() */
```
```
window.onload = function() {
```

  if (!document.getElementsByTagName) return false;

    var lnks = document.getElementsByTagName("a");

```
    for (var i=0; i<lnks.length; i++) {
```

  if (lnks[i].getAttribute("rel") == "help") {

```
    lnks[i].onclick = function() {
```
```
      popUp(this.getAttribute("href"));
```
```
      return false;
```
```
      }
```
```
    }
```
```
  }
```
```
}
```
```
/* end formhelp() function */
```
```
 
```
```
/* start popUp(winURL) function */
```
```
function popUp(winURL) {
```

  window.open(winURL,"popup","width=460,height=680,status=yes,resizable=yes,scrollbars=yes,screenX=600,screenY=200,top=200,left=600");

```
}
```
```
/* end popUp(winURL) function */
```

top

Form Help DOM/JavaScript

skip to content

link state symbols

topics

A Help Authoring Guide

Form Help Unobtrusive DOM/JavaScript Code

Linking to the external DOM/JavaScript file

Employ this Unobtrusive DOM/JavaScript to initiate Context-Sensitive Form Help.

The following code block contains three functions: