This command reference lists the commands that can be used to control the Shadow effect and Followscroll feature in coolTip. Read the core module documentation for more information about ways to customize coolTip.

Remember that commands are always in uppercase (case-sensitive) and can have none or up to two parameter values.

To include these support modules just include the following statements in the HEAD section of your document:

<SCRIPT TYPE="text/javascript" SRC="cCore.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" SRC="cShadow.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" SRC="cFollowscroll.js"></SCRIPT>

You only have to make sure that the cShadow.js and cFollowscroll.js modules are loaded after the core module.

Download the Shadow and Follow Scroll modules as a zip file.

The Shadow effect is achieved by placing all relevant code into the normal ctDiv container that is used to hold a regular coolTip content. This means that only one containing DIV layer must be tracked. A schematic representation of what is being done is shown in Figure 1 below:

Figure 1. A schematic illustration of the Shadow effect.

Two absolutely, positioned DIV containers are written to the ctDiv container. These two DIV containers are displaced from one another by the amounts of the shadowx/y offsets. The first DIV container contains the shadow layer and the second one contains the actual coolTip content. To avoid any future potential problems, the shadow and content layers are given explicit z-index values of 0 and 1, respectively. Note that these values are relative to the ctDiv container object, which serves as the positioning context for these two layers. One caveat with this approach is that because the layers are nested, the referencing becomes fairly complex for Netscape 4.x and one shouldn't try to make changes unless they are comfortable working with nested DIV containers in Netscape 4.x. The referencing scheme is considerably simplified for Netscape 6/7/Mozilla, IE, Safari, and Opera v7.x.

Netscape 4.x has difficulty correctly displaying popups that also use CSSCLASS styling. This problem is due to the use of inline style rules. When these styling rules are moved to a STYLE block in the HEAD section the coolTips display without any problems. This led to a workaround to this problem for Ns4.x. Just inlcude the following lines in your HEAD section.

<script type="text/javascript">
<!--
var fac=2;
if (olNs4) {
document.write('<style type="text/css">\n<!--\n');
document.write('#backdrop, #PUContent {' +
 'position: absolute; '+
 'left: '+fac*cd_shadowx+'px; ' + 
 'top: '+fac*cd_shadowy+'px; }\n');
document.write('-->\n<' + '\/style>');
}
//-->
</script>

These lines should follow the links shown in section 1 above. If these lines are ignored, then you can't access either of these nested DIV containers. Using a factor of 2, allows shadow offsets up to 10 pixels in either direction. If you find that the popup is being clipped off or that you have a partial shadow, just increase the value for fac.

SHADOW example

Indicates whether a shadow effect should be applied to a coolTip. Default is no shadow effect (value 0). When this parameter occurs on the command line, it switches the current state of the associated default variable to its opposite state.
Variable: cd_shadow

SHADOWCOLOR color

Specifies the color (a string value) that the shadow should have. Default value is '#CCCCCC'
Variable: cd_shadowcolor

SHADOWIMAGE url()

A background image which is normally used to simulate a semi-transparent shadow. Default value is no image (' ')
Variable: cd_shadowimage

SHADOWOPACITY percent opacity

A number between 0 and 100. This command is only valid for IE and Mozilla, running on a Windows machine or for Safari on a MacIntosh. It is not available in Netscape 4.x, IE on a MacIntosh because the browser feature which is used to implement this feature has not been implemented for the MacIntosh machine, or for the Opera v7 browser. Default effect is the same as 100%.
Variable: cd_shadowopacity

SHADOWX x-offset

A number which gives the X displacement of the shadow. Positive values move the shadow to the right, while negative values move it to the left. This movement is relative to the upper left hand corner of coolTip. Default value is 5.
Variable: cd_shadowx

SHADOWY y-offset

A number which gives the Y displacement of the shadow. Positive values move the shadow downward, while negative values move the shadow upward. This movement is relative to the upper left hand corner of coolTip. Default value is 5.
Variable: cd_shadowy

This example uses the following style rules in the HEAD section:

<STYLE TYPE="text/css">
<!--
.fontClass {
  font-family: 'Comic Sans MS';
  font-size: 12px;
}
.capfontClass {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}
.capfontClass A {
  color: #ffffff;
  font-size: 9px;
}
.fgClass {background-color: #FFFFCC;}
.bgClass {background-color: #333399;}
-->
</STYLE>

FOLLOWSCROLL example

When used on a command line, indicates that a coolTip should follow any scrolling of the document in the browser window. Default value is to not scroll (0). This command switches the current state of the associated default variable to its opposite state. Scrolling will occur if the scrollbars are moved with your mouse.
Variable: cd_followscroll

FOLLOWSCROLLREFRESH msecs

A number, in milli-seconds (1000 is about 1 sec), that indicates how often a check is made to see whether the document has been scrolled. Default value is 100 milli-seconds.
Variable: cd_followscrollrefresh