There is only one command
associated with this plugin (explained below), but it does
require the user to make a call to a routine which displays
information. The purpose of this module is to
allow the user to obtain information about internal variables
of coolTip while it is actually working in order to assist
in debugging situations where popups are not working as
expected. To query variables within coolTip, just insert
the following statement at the appropriate place within
the coolTip code:
showProperties(variable_label, variable,
...)
where variable_label is
how you want to call the variable that is going to be dislayed
and variable is that
actual variable to display. For example, you may want to
find out what the values of mouse's x and y positions are
(cMx and cMy) while moving the mouse around your page.
Just insert the statement showProperties('cMx',
cMx, 'cMy', cMy) just after these variables are
set in the ctMouseMove routine, as you
can see by clicking
here (NOTE: The core module used on this
page, cVdbg.js, has a couple
of calls to the showProperties() routine
but is otherwise the same as cCore.js ).
However, it is good practice
to include the declaration statements within the document
itself. Just after the BODY tag, add the statement:
<div id="showProps" style="position: absolute; visibility: hidden;"></div>
(NOTE: there isn't any need to specify a z-index value,
but you can include one if you want, because it will be
set to a value higher than what's used for the ctDiv container
of coolTip). If the showProps container
doesn't exist, this plugin will dynamically create the
DIV container for you in all supported browsers. When
this container is dynamically created it is not permanently
added to your document. There should not be any conflict
with an coolTip popup since this container uses a z-index
that is higher in value then what's used by the normal
coolTip popup. At worse, the debug window may obscure your
popup.
You can have more than one container showing at a time.
Just supply the ID of this container (a string value) as
the first argument in the call to showProperties ,
as in showProperties(containerID, variable_label, variable,
...) . Note, the presence of this parameter is determined
by checking how many parameters are supplied to the call.
A normal call will have only an even number of parameters
since they must occur in pairs as label, value ...
etc. An odd number of parameters signals the routine that
the first parameter is the containerID .
You can see an example of this in action by first making
sure that you've clicked the link above and then mouse
over another link. To allow the user to see all of the
popups (which are offset from one another horizontally),
the layer ID has been made a link which when clicked will
move that layer to the bottom of the stack and move the
others upward. (I thank Fote Macrides for pointing out
a logic error in implementing this feature and for his
suggestion in correcting it.) You can also hide a layer
by clicking on the X in the upper right-hand corner
(see the discussion of the ALLOWDEBUG parameter
below).
To include this support module just include the following
statements in the HEAD section of your document:
<script type="text/javascript" src="cCore.js"></script>
<script type="text/javascript" src="cDebug.js"></script>
You only have to make sure that the cDebug.js module
is loaded after the core module.
Download this
module as a zip file. |