Field Help DOM/JavaScript

Field Help Unobtrusive DOM/JavaScript Code

Linking to the external DOM/JavaScript file

The link to the source (src) external DOM/JavaScript file (fieldhelp.js) is applied in the <head></head> section of the Field Help Method web page shown below.
Notice that this is a relative link to the scripts folder where the fieldhelp.js file is kept.
Important Note: All files must always be kept within the main project folder.

```
<head>
```

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

```
</head>
```

top

The DOM/JavaScript Code

Use this Unobtrusive DOM/JavaScript to initiate Context-Sensitive Field Help.

Below is the external DOM/JavaScript code which opens and closes the Context-Sensitive help text below each field name when triggered by a user activating a field help icon.

The code contains three functions:
1. function addLoadEvent(func) This function enables more than one script associated to the web page to load and perform as intended.
2. function init() This function sets the initial display of the help container to none, and then establishes a relationship beween a field image id and a div help container id.
3. function openClose(objElement) This function provides the toggle switch to open the help, and then close it again.

After the Field Help Method web page loads, the DOM/JavaScript orders the browser to hide all Context-Sensitive help with the objHelp.style.display = 'none' instruction.
When a user clicks or activates a field help icon, the objHelp.style.display = 'none' changes to objHelp.style.display = 'block'.
This opens the Context-Sensitive help section beneath a field name.

/* start addLoadEvent(func) function - allows scripts to load/register gracefully - 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(init);
```
```
addLoadEvent(function() { 
```

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

```
addLoadEvent(openClose(objElement));
```
```
});
```
```
/* end multiple script load function */
```
```
 
```

/* start init function - design by Gez Lemon */

```
function init()
```
```
{
```

  var objImage = document.getElementsByTagName('img');

```
  var objHelp, objAnchor, objClone;
```
```
 
```

  for (var iCounter=0; iCounter<objImage.length; iCounter++)

```
  {
```

    if (objImage[iCounter].className == 'help')

```
    {
```

      objHelp = document.getElementById('container' + objImage[iCounter].id);

      objAnchor = document.createElement('a');

      objClone = objImage[iCounter].cloneNode(true);

```
 
```

      objAnchor.setAttribute('href', '#');

      objAnchor.onclick = function() {return openClose(this);};

```
      objAnchor.appendChild(objClone);
```
```
      objHelp.style.display = 'none';
```
```
 
```

      objImage[iCounter].parentNode.replaceChild(objAnchor, objImage[iCounter]);

```
    }
```
```
  }
```
```
}
```
```
/* end function init() */
```
```
 
```

/* start openClose(objElement) function - design by Gez Lemon */

```
function openClose(objElement)
```
```
{
```

  var objHelp = document.getElementById('container' + objElement.firstChild.id);

```
 
```
```
  if (objHelp)
```
```
  {
```

      if (objHelp.style.display == 'none')

```
      {
```

        objHelp.style.display = 'block';

```
      }
```
```
      else
```
```
      {
```
```
        objHelp.style.display = 'none';
```
```
      }
```
```
  }
```
```
  return false;
```
```
}
```

/* end function openClose(objElement) */

top

Field Help DOM/JavaScript

skip to content

link state symbols

topics

A Help Authoring Guide

Field Help Unobtrusive DOM/JavaScript Code

Linking to the external DOM/JavaScript file

The DOM/JavaScript Code

Use this Unobtrusive DOM/JavaScript to initiate Context-Sensitive Field Help.