Introduction
CodeThatHint is a javascript widget providing the functionality of the tool tip (hint) control. It is represented by the box with the text note, image and any other HTML content and usually displayed in response to the user action (mouse movement, click). The note usually introduces some useful and helpful information and makes site or application evaluation more convenient by shortening the learning curve.
With CodeThatHint you can
Create your own hint
Operate with the main hint properties - change hint text, background and the other style parameters
Describe window styles by using CSS classes
Set showing time and delay time for hint
Use special effects (animation, different direction) for showing hint
Read Standard vs PRO to know the differences between CodeThatHint Standard and PRO.
Hint Creation
To create layered form you should create instance of CT_Hint class with the following parameters:
new CT_Hint (
w, // width of hint
h, // height of hint
ps, // coordinate system indicator
// possible values are
// 1 - absolute,
// 2 - relative to mouse pointer,
// 3 - relative to Object with defined ID
ro, // ID of Object that will link with hint
fv, // whether or not hint is always fully visible
// at the window
// (true or 1 if yes, false or 0 otherwise)
y, // y coordinate in selected coordinate system
x, // x coordinate in selected coordinate system
html, // html content of hint
bgc, // background color
bgi, // URL of background image
css, // css class for hint
brd, // border definition
scr, // whether or not we use scrolling
// at the window
// (true or 1 if scrollable, false or 0 otherwise)
z, // z - index
flt, // filter (only for Win2k+ and IE5.5+)
t_s, // delay in msec before hint showing
t_h, // delay in msec before hint hiding
t_l // lifetime of hint, if 0 it is unlimited,
);
// window border
brd
{
color : 'black',
width : 2
}
|
For example, code for hint control creation may look like this:
<script type="text/javascript" language="javascript" src="Scripts/codethatsdk.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/codethathint.js"></script>
<script language="javascript1.2">
<!--
var html = "<table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td width=80%>" +
"<h4>This is</h4> a test `hint` created as a box." +
"<center>It is a layer that allows any HTML code within.</td>" +
"</tr></table>";
var cthintS1 = new CT_Hint(
157, 47, 2,"", true, -50, 9,
html, "", "", "", {
width : 0, color : ""
}, true, 2, "Alpha(Opacity=55)", 0, 0, 5000
);
cthintS1.create();
//-->
</script>
|
See the first example of hint control [popup].
Read more about CodeThatHint >>
|