Shadow and Followscroll  Command Reference

Go to the boughner.us

Introduction

This command reference lists the commands that can be used to control the shadow effect and scrolling of popups in overLIB. Read the core module documentation for more information about other ways to customize overLIB.

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

<script type="text/script" src="overlib.js"></script>
<script type="text/javascript" src="overlib_shadow.js">
   </script>
<script type="text/javascript" src="overlib_followscroll.js">
   </script>

You only have to make sure that the Shadow and Followscroll plugins are loaded after the core module.

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

Download the Shadow and Follow Scroll modules as a zip file

How it works

The dropshadow effect is achieved by placing all relevant code into the normal overDiv container that is used to hold regular popups. A schematic representation of what is being done is shown in Figure 1 below:

Schematic of how the drop shadow effect works
Figure 1. A schematic illustration of the dropshadow effect.

Two absolutely, positioned DIV containers are written to the overDiv 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 overLIB popup content. To avoid any future potential problems, the shadow layer and the content layer are explicitly given z-index values of 0 and 1, respectively. Note that these values are relative to the overDiv 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, and Opera v7.

Netscape 4.x has difficulty correctly displaying popups with a drop shadow that also use CSSCLASS styling. Upon investigation it was found that the problem was traced to the use of inline style rules that were placed on the two nested DIV containers that were employed to achieve the dropshadow effect. When these inline style rules were moved to a STYLE block in the HEAD section the popups displayed without any problems. This led to the following workaround to this problem for Ns4.x. As this plugin loads, and if the browser happens to be Netscape 4.x, then the following lines are written to the document (note that they have been broken up here for easier reading):

document.write('<style type="text/css">\n<!--\n');
document.write('#backdrop, #PUContent {' + 
  'position: absolute; left: '+fac*ol_shadowx+'px;' + 
  'top: '+fac*ol_shadowy+'px; }\n');
document.write('-->\n<' + '\/style>');

where the variable fac is set equal to ol_shadowAdjust, which has a default value of 2. If these lines are ignored, then you can't access either of these nested DIV containers. Using the 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 ol_shadowAdjust by including the statement ol_shadowAdjust=xx before the dropshadow module is loaded. A convenient place to put this would be before you load the core module itself. You don't want to make this value too large because it will affect how the MOUSEOFF and NOCLOSE options behave.

NOTE: The code for this module has been modified to work with the Hideform plugin

Shadow commands

SHADOW example
Indicates whether a shadow effect should be applied to a popup. 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: ol_shadow
SHADOWCOLOR color
Specifies the color (a string value) that the shadow should have. Default value is '#CCCCCC'
Variable: ol_shadowcolor
SHADOWIMAGE url()
A background image which is normally used to simulate a semi-transparent shadow. Default value is no image (' ')
Variable: ol_shadowimage
SHADOWOPACITY percent opacity
A number between 0 and 100. This command is only valid for IE and Mozilla running on a Windows machine and 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%. The proposed CSS3 standards mention an "opacity" property of the layerObject.style object and the code has been written to include support for this property if it is ever implemented.
Variable: ol_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 the popup. Default value is 5.
Variable: ol_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 the popup. Default value is 5.
Variable: ol_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; 
  color: #666666;
}
.capfontClass {
  font-family: Arial, sans-serif; 
  font-size: 14px; 
  font-weight: bold; 
  color: #ffffff;
}
.capfontClass A {
  color: #ffffff; 
  font-size: 9px;
}
.fgClass { background-color: #FFFFFF; }
.bgClass { background-color: #B6A29B; }
-->
</STYLE>
   

Scrolling commands

The next two commands will only be applied if the popup is STICKY, is not DRAGGABLE, and has either one of the RELX/RELY commands applied. It will stay in the same relative position as given by the RELX and/or RELY commands.

FOLLOWSCROLL example
When used on a command line, indicates that a popup 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. This scrolling occurs as the scrollbars are moved with your mouse.
Variable: ol_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: ol_followscrollrefresh

Back to top

.


Thank you for visiting boughner.us - Come back again soon.