Examples of STICKY popups with the
overlibmws DHTML Popup Library
 
 maintained by Foteos Macrides at Macrides Web Services
Discuss these examples, seek help, and offer suggestions
for STICKY support via the overlibmws Support Group.
 
This link has an example of the STICKY command, with a link inside the popup and a secondary popup associated with that link.  The link includes a target attribute for a new window if the link is activated.  We use an exit image as the CLOSETEXT, and use CLOSECLICK to require that it be clicked to close the pop-up.  We also thicken the BASE of the border by 3 pixels, use RELX and RELY for positioning with respect to the window's margins, and use SCROLL to maintain that position when the document is scrolled.  The call for this example, which includes the CAPTIONPADDING, TEXTPADDING, CGLASS, FGCLASS, CAPTIONFONTCLASS, and TEXTFONTCLASS commands, is:
onmouseover="return overlib('Here is a link to the<br><a '
 +'target="_blank" '
 +'href="http://groups.yahoo.com/group/overlibmws/" '
 +'onmouseover="return overlib2(\'Visit the overlibmws Support Group '
 +'in a new window.\','
 +'FGCOLOR,\'#ffffcc\', TEXTPADDING,4, TEXTFONTCLASS,\'oltxt\','
 +'OFFSETX,-5, OFFSETY,20, VAUTO, WRAP, BASE,2);" '
 +'onmouseout="nd2();">overlibmws Support Group</a>',
 STICKY, CAPTION,'STICKY Pop-up with link', CAPTIONPADDING,4, TEXTPADDING,8,
 CGCLASS,'olcg', FGCLASS,'olfg', CAPTIONFONTCLASS,'olcap', TEXTFONTCLASS,'oltxt',
 CLOSETEXT,'<img src=\'exit.gif\' alt=\'Click to Close\' '
 +'width=\'12\' height=\'11\' border=\'0\'>', CLOSECLICK,
 RELX,100, RELY,20, WRAP, BASE,3, SCROLL,
 STATUS,'STICKY popup with link and secondary popup');"
However, when HTML is used for the Lead Argument and/or the parameter of a command such as CLOSETEXT (or CAPTION), it is better to use string variables or array entries, so as to avoid the need to use HTML entities for reserved characters such as angle-brackets, and to simplify the handling of embedded quotes.  For example, the above Lead Argument and CLOSETEXT parameter could be defined in a script block or imported .js file as:
var mySticky = 'Here is a link to the<br><a '
 +'target="_blank" '
 +'href="http://groups.yahoo.com/group/overlibmws/" '
 +'onmouseover="return overlib2(\'Visit the overlibmws Support Group '
 +'in a new window.\','
 +'FGCOLOR,\'#ffffcc\', TEXTPADDING,4, TEXTFONTCLASS,\'oltxt\','
 +'OFFSETX,-5, OFFSETY,20, VAUTO, WRAP, BASE,2);" '
 +'onmouseout="nd2();">overlibmws Support Group</a>';

var closeimg =
  '<img src="exit.gif" alt="Click to Close" '
 +'width="12" height="11" border="0">';
and the variables names could instead be used (unquoted) in the function call:
onmouseover="return overlib(mySticky,
 STICKY, CAPTION,'STICKY Pop-up with link', CAPTIONPADDING,4, TEXTPADDING,8,
 CGCLASS,'olcg', FGCLASS,'olfg', CAPTIONFONTCLASS,'olcap', TEXTFONTCLASS,'oltxt',
 CLOSETEXT,closeimg, CLOSECLICK, RELX,100, RELY,20, WRAP, BASE,3, SCROLL,
 STATUS,'STICKY popup with link and secondary popup');"
 
OK, now try the STICKY command that way, with the FILTER command added for IE v5.5+ browsers and with the FADEIN command defaulted to 52 for random selectons from the 51 (1-51) fade types (also try the non-sticky popups for the links below).   The CAPBELOW command also has been added, the CLOSECLICK command has been omitted, and positioning has been changed to MIDX,0, MIDY,0 for centering in both the horizontal and vertical axes:
onmouseover="return overlib(mySticky,
 STICKY, CAPTION,'STICKY Pop-up with link', CAPTIONPADDING,4, TEXTPADDING,8,
 CGCLASS,'olcg', FGCLASS,'olfg', CAPTIONFONTCLASS,'olcap', TEXTFONTCLASS,'oltxt',
 CLOSETEXT,closeimg, MIDX,0, MIDY,0, WRAP, BASE,3, SCROLL,
 STATUS,'STICKY popup with link and secondary popup and FILTER for IE v5.5+',
 FILTER, CAPBELOW);"
 
And try a search via a sticky, scrolling popup.  We set this up so that the results will be returned in a new window.  We also use the EXCLUSIVE command so that this popup must be closed before any other primary overlib popups can be invoked (or one instead could use MODAL to block all access to the underlying document until the popup is closed, in which case one need not include SCROLL).  Positioning is MIDX,0, RELY,20 for horizontal centering of the popup near the top of the window.  Finally, we call a function to set the focus to the input field when the popup is invoked:
onmouseover="overlib(myGoogleTxt, CAPTION,myGoogleCap,
 STICKY, EXCLUSIVE, CLOSECLICK, CAPTIONPADDING,4, TEXTPADDING,10,
 CGCLASS,'olcg', CAPTIONFONTCLASS,'olcap', CLOSEFONTCLASS,'olclo',
 FGCOLOR,'#bbddff', TEXTFONTCLASS,'oltxt',
 MIDX,0, RELY,20, WRAP, BASE,3, SCROLL); return OLsf();"
Use your browser's View Source option to see the definitions of the myGoogleTxt and myGoogleCap string variables and the code for the OLsf() function.

The style sheet for the above examples is:
<style type="text/css>
<!--
.olcg {background-color:#333399; text-align:center;}
.olfg {background-color:#cceeff; text-align:center;}

.olcap {
 font-family:Verdana,Arial,Helvetica,sans-serif;
 font-size:11px;
 font-weight:bold;
 color:#ffffff;}

.olclo {
 font-family:Verdana,Arial,Helvetica,sans-serif;
 font-size:11px;
 font-weight:bold;
 color:#33ff33;}
a.olclo:hover {color:#ffbbff;}

.oltxt {
 font-family:Verdana,Arial,Helvetica,sans-serif;
 font-size:13px;
 color:#000000;}

a {color:#338855; font-weight:bold;}
a:hover {color:#ff00ff;}

input.olinput {
 background:white url(inputText.gif) repeat-x bottom left;
 min-height:16px;
 color: #000000;}
-->
</style>
 
Now try an example of a STICKY popup with a raised blue background in the caption.  It uses the following overlib call:
onmouseover="return overlib(mySticky,
 STICKY, CAPTION,'STICKY Pop-up with link', CAPTIONPADDING,4, TEXTPADDING,8,
 CGCLASS,'olraisedBlue', CLOSETEXT,closeimgBlue, CLOSECLICK, CLOSETITLE,'Close',
 CAPTIONFONTCLASS,'olcap', FGCLASS,'olfg', TEXTFONTCLASS,'oltxt',
 MIDX,0, MIDY,0, WRAP, BASE,2, SCROLL, FILTER,
 STATUS,'STICKY popup with a raised blue background in its caption');"
with the following javascript definiton for the closeimgBlue string variable and CSS rules for the olraisedBlue class:
var closeimgBlue =
  '<img src="exit_blue.gif" alt="Close" width="14" height="15" border="0" '
 +'name="blueExit" id="blueExit" '
 +'onmouseover="document.blueExit.src=myExitMetallic.src" '
 +'onmouseout="document.blueExit.src=myExitBlue.src">';

.olraisedBlue {text-align:center;
 background:#33aaff url(raised_blue.gif) repeat-x bottom left;}
table.olraisedBlue {border-bottom:1px solid #333399;}

And try an example of a STICKY popup with a raised metallilc background in the caption.  It uses the following overlib call:
onmouseover="return overlib(mySticky,
 STICKY, CAPTION,'STICKY Pop-up with link', CAPTIONPADDING,4, TEXTPADDING,8,
 CGCLASS,'olraisedMetallic', CLOSETEXT,closeimgMetallic, CLOSECLICK,
 CLOSETITLE,'Close', CAPTIONFONTCLASS,'olcapMetallic', FGCLASS,'olfgMetallic',
 TEXTFONTCLASS,'oltxt', MIDX,0, MIDY,0, WRAP, BGCOLOR,'#666666', BASE,2, SCROLL,
 FILTER, FILTERSHADOW,2, FILTERSHADOWCOLOR,'#aaaaaa',
 SHADOW, SHADOWX,3, SHADOWY,3, SHADOWCOLOR,'#aaaaaa',
 STATUS,'STICKY popup with a raised metallic background in its caption');"
with the following javascript definiton for the closeimgMetallic string variable and CSS rules for the olraisedMetallic, olcapMetallic and olfgMetallic classes:
var closeimgMetallic =
  '<img src="exit_metallic.gif" alt="Close" width="14" height="15" border="0" '
 +'name="metallicExit" id="metallicExit" '
 +'onmouseover="document.metallicExit.src=myExitBlue.src" '
 +'onmouseout="document.metallicExit.src=myExitMetallic.src">';

.olraisedMetallic {text-align:center;
 background:#33aaff url(raised_metallic.gif) repeat-x bottom left;}
table.olraisedMetallic {border-bottom:1px solid #666666;}

.olcapMetallic {font-family:Verdana,Arial,Helvetica,sans-serif; font-size:11px;
 font-weight:bold; color:#333; text-shadow:#ddd 2px 2px 0;}

.olfgMetallic {background-color:#eeeeee; text-align:center;}
Note that the text-shadow property used in the olcapMetallic class has been implemented by Safari to create a "sunken text" effect.  It has been moved to CSS3 and eventually may be implemented by other browsers as well, but CSS3 will have font-effect:engrave; explicitly for this effect.

It is desireable to pre-load any images used in the document's popups.  Those used in this document's popups have been pre-loaded via the following javascript:
var myExit = new Image();
myExit.src = "exit.gif";

var myExitBlue = new Image();
myExitBlue.src = "exit_blue.gif";

var myRaisedBlue = new Image();
myRaisedBlue.src = "raised_blue.gif";

var myExitMetallic = new Image();
myExitMetallic.src = "exit_metallic.gif";

var myRaisedMetallic = new Image();
myRaisedMetallic.src = "raised_metallic.gif"

var myInputText = new Image();
myInputText.src = "inputText.gif";

The STICKY command and other core commands in this document require only the overlibmws.js core module.  The SCROLL, FILTER, EXCLUSIVE and SHADOW commands require the overlibmws_scroll.js, overlibmws_filter.js, overlibmws_exclusive.js and overlibmws_shadow.js plugin modules, respectively.  The overlib2() and nd2() function calls for secondary popups require the overlibmws_overtwo.js plugin module.
 
 
This document uses overlibmws and its commands.

Copyright Foteos Macrides
  2002-2010
  All rights reserved.
 Click to Donate