Dropshadows, Draggable, and Secondary popups
with the overlibmws DHTML Popup Library
 
 maintained by Foteos Macrides at Macrides Web Services
Discuss these examples, seek help, and offer suggestions
for support via the overlibmws Support Group.
 
High Noon     2:00 p.m.      4:00 p.m.     Take a spin.     Semi Clear     6:00 p.m.     8:00 p.m.


The dropshadow in these examples uses a second, simultaneously controlled overlibmws positioned div container (layer):
<div id="backdrop" style="position:absolute; visibility:hidden; z-index:999"></div>
This backdrop container will be created by overlibmws and need not be declared in the document, but do not use its id for another element.  The handling of two layers simultaneously allows class-based styling together with a shadow for all of the browsers supported by overlib, as well as use of the BACKGROUND command.
These examples use the overlibmws_shadow.js plugin module from the overlibmws distribution and its commands.  Some also use the overlibmws_draggable.js plugin module for the DRAGGABLE command toggle.
The additional commands, parameters and variables for the dropshadow are
SHADOW (ol_shadow) toggle for whether to add a dropshadow (default 0),
SHADOWX, pixels (ol_shadowx) for the horizontal shadow displacement (default 5),
SHADOWY, pixels (ol_shadowy) for the vertical shadow displacement (default 5),
SHADOWCOLOR, color (ol_shadowcolor) for the shadow color (default '#666666'),
SHADOWIMAGE, picture (ol_shadowimage) URL for an image shadow (default '').
SHADOWOPACITY, percentage (ol_shadowopacity) for the opacity (default 60) of the shadow (100 is solid; 0 turns off the feature and thus also yields a solid shadow).
The opacity feature is handled only for IE on PCs and for Gecko-engine browsers.  For SHADOWX or SHADOWY, positive pixel values yield displacements to the right or down, negative to the left or up, respectively.  A semi-transparent image (semitrans.gif) is used in some of these examples, and is included in the overlibmws distribution.  It can reside anywhere pointed to via SHADOWIMAGE (ol_shadowimage).

This is an example of secondary popups invoked from within a primary overlib popup which has a dropshadow and is draggable.  The example uses the overlibmws_overtwo.js plugin module, which has its own overlibmws positioned div container (layer):
<div id="overDiv2" style="position:absolute; visibility:hidden; z-index:1002"></div>
This overDiv2 container will be created by overlibmws and need not be declared in the document, but do not use its id for another element.  A backdrop2 positioned div (with z-index:1001) also is created automatically for any secondary popups which have shadows, complementary to the backdrop positioned div for any primary popups with shadows (see above).  Secondary popups are invoked via overlib2() calls within the content of the overlib() call for the primary popup.  The primary popup must be STICKY.  Secondary popups that are tooltips (not sticky) are closed by nd2() calls.  Sticky secondary popups are closed via internal cClick2() calls when their Close link in the caption is clicked, or on moving the cursor onto and then off of the secondary popup if NOCLOSE or MOUSEOFF was included in the overlib2 call.  Note that dragging for a primary popup is suspended whenever a secondary popup is being displayed, and is re-asserted when the secondary popup is closed.  Sticky secondary popups can be draggable, as are the two sticky secondaries in this example.
 
 The text and caption alignments for the secondary popups in this example were achieved with the following, class-based CSS written in a style block:
.olfgcenter {background-color:#ffcccc; text-align:center;}
.olcgcenter {background-color:#5555bb; text-align:center;}
.olfgright {background-color:#ffcccc; text-align:right;}
.olcgright {background-color:#5555bb; text-align:right;}

The example uses REFerence-based positioning for the secondary popups, with the following javascript definitions written in a script block:
// Create an Array for the secondary popup calls:
var myArray = new Array();

// For the STICKY secondary popup call with (default) left alignment:
myArray[0]=
 'name="normal" id="normal" '
+'onmouseover="return overlib2(INARRAY,0, CAPARRAY,0, WIDTH,200, '
+'REF,\'normal\', REFC,\'UR\', REFP,\'LL\', REFX,5, REFY,10, BASE,2, '
+'SHADOW, SHADOWCOLOR,\'#6699cc\', DRAGGABLE, '
+'FGCOLOR,\'#ffcccc\', CGCOLOR,\'#5555bb\', STICKY, MOUSEOFF, '
+'STATUS,\'Normal alignment\');"'
+'onmouseout="nd2();"';

// For the tooltip secondary popup call with center alignment:
myArray[1] =
 'name="center" id="center" '
+'onmouseover="return overlib2(INARRAY,1, CAPARRAY,1, WIDTH,200, '
+'REF,\'center\', REFC,\'UR\', REFP,\'LL\', REFX,5, REFY,10, BASE,2,, '
+'SHADOW, SHADOWCOLOR,\'#6699cc\', '
+'FGCLASS,\'olfgcenter\', CGCLASS,\'olcgcenter\', AUTOSTATUS);" '
+'onmouseout="nd2();"';

// For the tooltip secondary popup call with right alignment:
myArray[2] =
 'name="right" id="right" '
+'onmouseover="return overlib2(INARRAY,2, CAPARRAY,2, WIDTH,200, '
+'REF,\'right\', REFC,\'UR\', REFP,\'LL\', REFX,15, REFY,10, BASE,2, '
+'SHADOW, SHADOWCOLOR,\'#6699cc\', '
+'FGCLASS,\'olfgright\', CGCLASS,\'olcgright\', AUTOSTATUS,);"'
+'onmouseout="nd2();"';

// For the sticky secondary popup call with BUBBLE command:
myArray[3] =
 'name="bubble" id="bubble" '
+'onmouseover="return overlib2(INARRAY,3, '
+'REF,\'bubble\', REFC,\'UR\', REFP,\'LL\', REFY,5, '
+'STICKY, NOCLOSE, TIMEOUT,5000, OFFDELAY, 1000, DRAGGABLE, '
+'BUBBLE, BUBBLETYPE,\'quotation\', TEXTSIZE,\'12px\', '
+'FILTER, FILTERSHADOW,2, FILTERSHADOWCOLOR,\'#009800\', '
+'STATUS,\'Bubble popup\');"'
+'onmouseout="nd2();"';

// For the INARRAY commands (the ol_texts Array is created by overlibmws.js):
ol_texts[0] =
 'Normal alignment<br>Review CSS in the<br>'
+'<a title="Go to Section 5 of the Command Reference" '
+'href="commandRef.html#cascading-style-sheets">Command Reference</a>';
ol_texts[1] = 'Center alignment';
ol_texts[2] = 'Right alignment';
ol_texts[3] =
 'Wow, a <a title="Go to Section 7 of the Command Reference" '
+'href="commandRef.html#bubble">quotation bubble</a>!!!';

// For the CAPARRAY commands (the ol_caps Array is created by overlibmws.js):
ol_caps[0] = 'NORMAL';
ol_caps[1] = 'CENTER';
ol_caps[2] = 'RIGHT';

// For the primary popup's lead argument:
var myText =
 'This example has three links demonstrating the alignment of captions '
+'and text in secondary popups via simple style sheets.&nbsp; The fourth '
+'link demonstrates a secondary bubble popup.<br>'
+'<ul>'
+'<li><b><a href="javascript:void(0);"'+myArray[0]+'>Normal</a></b> alignment example</li>'
+'<li><b><a href="javascript:void(0);"'+myArray[1]+'>Center</a></b> alignment example</li>'
+'<li><b><a href="javascript:void(0);"'+myArray[2]+'>Right</a></b> alignment example</li>'
+'<li><b><a href="javascript:void(0);"'+myArray[3]+'>Bubble</a></b> example</li>'
+'</ul><br>';

The example uses the following anchor to invoke the primary popup, also with REFerence-based positioning, and with its content and that for its secondary popups accessed via the myText variable used as the overlib call's lead argument:
<a
 name="sample" id="sample"
 href="javascript:void(0);"
 onmouseover="return overlib(myText, TEXTPADDING,6, CAPTION,'Secondary Popups',
  STICKY, WIDTH,400, BASE,2, REF,'sample', REFC,'UR', REFX,10, REFY,-25,
  FGCOLOR,'#ffffcc', BGCOLOR,'#333399', CGCOLOR,'#336699', CLOSECOLOR,'#ffccff',
  DRAGGABLE, SHADOW, SHADOWX,10, SHADOWY,10, STATUS,'Example of Secondary Popups');"
 onmouseout="nd();">secondary popups</a>

For some simpler examples of tooltip secondary popups see the STICKY, ?GBACKGROUND and DRAGGABLE demonstration pages.  Also see examples of secondary popups in frame documents.


This document uses overlibmws and its commands.

Copyright Foteos Macrides
  2002-2010.
  All rights reserved.