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.
|