overLib - REF-based positioning in overlibmws

REFerence-based Positioning with the overlibmws
core commands: REF, REFC, REFP, REFX, REFY

maintained by Foteos Macrides at Macrides Web Services
Discuss these examples, seek help, and offer suggestions
for REF support via the overlibmws Support Group.

REF (ol_ref) is the name and/or id of an anchor (link), image, or iframe, or the id of any other element to be used as the reference object for positioning the popup. Note that with the modern browsers virtually any element in the body of the document can have an id attritute, and its value can be used for REF-based positioning of the popups (with the "pre-modern" Netscape 4.x, the id attribute can be used for this purpose only in positioned divs, and it uses only the name attribute in anchors and images for such positioning).

REFC (ol_refc) defines the corner of the reference object, and REFP (ol_refp) the corner of the popup, which should be positioned relative to each other. The allowable values are 'UL' (Upper Left), 'UR', (Upper Right), 'LL' (Lower Left), and 'LR' (Lower Right). The values can be lower case, and must be specified as strings (i.e., quoted). The defaults are normally 'UL'. For example, if REFC is its default 'UL' and REFP is set to 'LL' then the lower left corner of the popup will be positioned at the upper left corner of the reference object. In the case of anchors, the default value of 'UL' is the only value supported for REFC in Netscape 4.x, and for all supported browsers it references the upper left corner of the first character in textual anchor content (including space above the character associated with the line height) even if there is wrapping in a string used as anchor content such that the wrapped portion is to the left of the first character. If the anchor content is an image, use that image as the reference object.

REFX (ol_refx) specifies any horizontal displacement (unquoted number indicating pixels) desired between the reference object's and popup's corners. Positive values move the popup to the right, and negative to the left. The default normally is 0. The popup will not overrun the left or right margin of the window unless NOJUSTX is set. REFY (ol_refy) indicates any desired vertical displacement, with positive numbers to move the popup down, and negative numbers for up. This default also is normally 0. The popup will not overrun the top or bottom margin of the window unless NOJUSTY is set. In the preceding paragraph the anchor was assigned a name and id value of "link1" for use with REF, and in the following example we use that together with REFY to position a popup at the lower left corner of the anchor content:

<a onmouseover="return overlib('REFY,16, (UL UL)', REF,'link1', REFY,16, WRAP);" onmouseout="return nd();" href="javascript:void(0);">REFY,16, (UL UL)</a>

The image at left has name and id attributes with the value "penguins" so that we can use it as a reference for positioning popups:

<a onmouseover="return overlib('Don\'t<br>Push!', REF,'penguins', REFP,'UR', WRAP);" onmouseout="return nd();" href="javascript:void(0);">UL UR</a>

For images, we need not leave REFC as its default but can vary that as well. For example, we could use:

<a onmouseover="return overlib('SPLASH!!!', REF,'penguins', REFC,'LR', 'REFP,'LL', WRAP);" onmouseout="return nd();" href="javascript:void(0);">LR LL</a>

Note that the anchors with name and id attributes need not have href attributes, and can be placed around content or be used with a transparent character such as a non-breaking space (<a name="foo" id="foo"> </a>) to create references anywhere in the document. This can be useful for positioning popups before or after form elements or other non-anchor objects such that the positioning works for Netscape 4.x in addition to the modern browsers. One also can use a small transparent gif image in this manner. But for the modern browsers one can simply assign id attributes to form elements such as select, input, button, or textarea, and use those for positioning.

On failure to find a specified reference object or inability to use it for positioning, the popup instead will be positioned so as to be centered within the current window display (i.e., the REF specification will be negated and instead MIDX,0,MIDY,0 will be used).

These examples use overlibmws and its commands.

In the following examples, popups are displayed with respect to reference objects consisting of a positioned div (layer) with a nested layer, as well as an anchor and an image within layers. The layers can have transparent backgrounds so that they blend into the document, but are colored here to make the corners visible.

<div id="innerLayer" style="position:absolute;
width:300px; height: 210px; z-index:3; left: 10px;
top: 90px; background-color: #FFFF00;
layer-background-color: #FFFF00;
border: 1px #000000 none">

<a name="nbspAnchor"
id="nbspAnchor"> </a>

Image:

Positioned relative to
div (outerLayer)	div (innerLayer)	ANCHOR (nbspAnchor)	IMAGE (swingImage)
UL UL (REFX,30)	UL LL	UL LL	UL LL
UR UR (REFX,-30)	UR UR	UL LR	UR LR
LL LL (REFX,10, REFY,-10)	LL UL	UL UL (REFY,16)	LL UL
LR LR (REFY,-30)	LR UL (REFX,-75)	UL UR (REFY,16)	LR UL (REFY,-10)