The purpose of this plugin is to provide additional support that will allow users to display a popup within a popup (PIP). The core module already provides support for multiple popups, explicitly making sure that popups lie on top of one another. This module introduces two additional parameters that assist in handling mutiple popups. The support provided here is functional in all browsers supported by coolTip. Secondary popups can have all of the same features that are possible with normal popups; there are no restrictions placed on these secondary popups. Also the invocation routine is the same for all popups -- namely coolTip().

The secondary popup feature is achieved by having another DIV container, just like the primary ctDiv container, to hold popup content. This container doesn't need to be defined within your document, but can be if you want to. If not defined, it will be dynamically created and temporarily added to the document's object tree, and will cease to exist once the document is removed from your browser. You must specify the ID you want to associate with this DIV container, using the PUID command. If you don't use this command, the default ctDiv container is used. The z-index values of these secondary popups increase numerically from the z-index of the main popup container ctDiv, which means that they will normally lie on top.

If you make use of the capabilities included with this plugin, you are strongly encouraged to place the primary popup's text in an external string variable (or as an element of a text array) within a script block in the HEAD section rather than trying to place the text in the line which makes the call to the primary popup. By doing that you'll better be able to manage the nested quotation marks that are sure to ensue. You'll find that most of the properties defined for the primary popup are inherited by the secondary popup, but that can changed in the command which invokes the secondary popup, which is coolTip([text], PUID, id, command line arguments). The secondary popup is dismissed by calling nd(id[,time]). [NOTE: to specify the particular popup to control, its id value should be included in the coolTip and nd calls as shown here.]

To include this support module just place the following statements in the HEAD section of your document:

<SCRIPT TYPE="text/javascript" SRC="cCore.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" SRC="cPIP.js"></SCRIPT>

You only have to make sure that the cPIP.js module is loaded after the core module.

Download this module as a zip file.

There are no parameter restrictions for secondary popups. The same parameters that can be used with primary popups can also be used with secondary popups. Your calls for secondary popups can be shortened by calling ctPageDefaults(..., PUID, id, ...)which will set the default properties of the popup with ID=id. As this implies, each individual popup can have its own set of properties which could be the same or different than those of the primary popup. In general, a secondary popup will inherit the current default properties of its parent. Note that a recent change to the Draggable plugin was made to provide more consistent behavior when used in conjunction with this plugin. However, if that plugin is used with this one, then secondary STICKY popups must be closed explicitly via a close link and not by using the NOCLOSE or MOUSEOFF commands with them. If these latter two commands are used, then the popups won't behave correctly until the primary popup is closed. This restriction only applies if the Draggable and PIP plugins are used together.

CLOSEALL [parentID]

Causes dependent STICKY children popups of a primary STICKY popup to close when the primary popup is closed. The parameter parentID is a string value, or a comma delimited string value, specifying the ID's of all primary STICKY popups that will appear on the page. If there is no following parameter string, parentID defaults to ctDiv. Default value of the associated variable is true (1). When CLOSEALL is turned off, then the primary and secondary popups can be closed in any order. When used with ctPageDefaults, this command should be used without a following string paramenter value, and will toggle the closeall property value, cd_closeall, to its opposite state. A primary popup is defined as one from which other popups will be spawned as secondary and higher order popups.
Variable: cd_closeall

CLEARPARAMS [id]

Use of this parameter clears all default settings previously applied to a secondary popup. The parameter value id is single string value or a comma delimited string value that is used in a call to ctPageDefaults(CLEARPARAMS, id). It will clear all the default settings that have been applied to the respective popups with ID=id. There will be no effect to settings applied to the primary popup. It is best used by itself in a call to ctPageDefaults(). It can be used along with other settings, but if this parameter is contained in the command string, these other settings will not be applied. If no parameter value is provided for this command, then settings for all popups previously specified will be cleared. In other words it will act like a CLEARALLPARAMS command.

Here is an example of popups nested to three levels (Click here to switch the secondary popup look, which can only be done once.) It uses the following instructions written in the HEAD section of the document [Note the following lines have been shortened to improve readability. The class definitions were used to achieve the right and center alignment examples and to add extra spacing between the list items in the main popup. Note that when special classes are specified they take precedence over the normal formatting of popups, so these classes need to make sure that background coloring, for example, are included also, as shown for the .centerAlignText and .rightAlignText classes. With CLOSEALL off, mousing over the first and last links in the example will display STICKY popups. When the main popup is closed, these two secondary poups can then be closed in any order.]:

<script type="text/javascript">
ctPageDefaults(FGCOLOR, '#ffffcc', WRAP, BGCOLOR, '#333333', VAUTO);
ctPageDefaults(BGCOLOR,'#006600',PUID, 'ctDiv2');
ctPageDefaults(BGCOLOR,'#006600',PUID, 'div1');

myTexts=[], myCaps=[];
myTexts[0]='<a href="javascript:;" onmouseover="return coolTip(setUpArray[0]);" onmouseout="nd(\'ctDiv3\');">Normal</a> alignment';
myTexts[1]="Text and Caption centered.";
myTexts[2]="Text right aligned.";
myCaps[0]="NORMAL";
myCaps[1]="CENTER";
myCaps[2]="RIGHT";

var setUpArray=new Array();
setUpArray[0]=new Array('Third popup-in-popup',PUID,'ctDiv3',CAPTION, 'Third popup');
setUpArray[1]=new Array(myTexts[0],CAPTION,myCaps[0],WIDTH, 200,KEEPCTD,PUID,'ctDiv2',WRAP,FGCOLOR,'#CCFFCC',STICKY);
setUpArray[2]=new Array(myTexts[1],CAPTION,myCaps[1],WIDTH, 200,KEEPCTD,PUID,'ctDiv2',WRAP,FGCOLOR,'#ccffcc',CAPALIGN,'center',TEXTCLASS,'centerAlignText');
setUpArray[3]=new Array(myTexts[2],CAPTION,myCaps[2],WIDTH, 200,KEEPCTD,PUID,'ctDiv2',WRAP,FGCOLOR,'#ccffcc',TEXTCLASS,'rightAlignText');
setUpArray[4]=new Array('STICKY with NOCLOSE',WIDTH, 200,KEEPCTD,PUID,'div1',WRAP,CAPTION,'STICKY PIP Example',STICKY,NOCLOSE,SHADOW,'<10px 5px #000 0.6>');

var myText = '<p>This example has three command lines which demonstrate the use of multiple popups.</p>'+
'<ul><li><a href=\'javascript:;\' onmouseover="return coolTip(setUpArray[1]);" onmouseout="nd(\'ctDiv2\');">Normal</a> alignment example</li>' +
'<li><a href=\'javascript:;\' onmouseover="return coolTip(setUpArray[2]);" onmouseout="nd(\'ctDiv2\');">Center</a> alignment example</li>' +
'<li><a href=\'javascript:;\' onmouseover="return coolTip(setUpArray[3]);" onmouseout="nd(\'ctDiv2\');">Right</a> alignment example</li>' +
'<li><a href=\'javascript:;\' onmouseover="return coolTip(setUpArray[4]);" onmouseout="nd(\'div1\');">STICKY and NOCLOSE</a> popup example</li></ul>';

function exampleText() {
	var p0=cTip.pop;
	return myText + '<p align="center">[<strong>CLOSEALL</strong> behavior is '+(p0.closeall ? 'on.' : 'off.')+' Click the link to turn it '+(p0.closeall ? 'off.' : 'on.')+']</p>';
}
</script>
<style type="text/css">
<!--
.centerAlignText {text-align: center;  font-size: 11px; background-color: #ccffcc;}
.rightAlignText {text-align: right;  font-size: 11px; background-color: #ccffcc;}
.centerAlignCap {text-align: center; color: #ffffff; font-size: 11px;}
.rightAlignCap {text-align: right; color: #ffffff; font-size: 11px; }
-->
</style>
      

As you can see, the potential for having unbalanced quotation marks is very high if you try putting this code in line in a call to coolTip. The technique used here has helped alleviate a lot of those problems. It makes use of a feature built into coolTip -- namely if an array object, containing the command list to be used in a subsequent call to coolTip, is supplied as the argument, then it is used as the command line for that call (these are the arrays called setUpArray, each of which contain the complete argument list for a call to coolTip). You'll also notice that each secondary popup called from the main popup has the command KEEPCTD which is necessary to keep the main popup from closing. If this is omitted then that main popup will close when mousing over the link.