|
 | ||||||||||
|
|
|
|
|
|||||||
JavaScript ProjectsSTUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER |
|
|
|
|
|
|
|
|
|
|
CODETHATHINT USER GUIDE |
The following "7 steps" instruction will guide you step by step through the CodeThatHint configuration process.
Download package with CodeThatHint script and unarchive it.
For free version (STD) download use this link.
If you'd like to buy full version (PRO) use this link.
Please bear in mind that CodeThat scripts come in two editions STANDARD and PRO. Editions differ by the features set and license type.
Standard version is given for free and comes with the inscription representing our company's name. Upon registration you will get rid of that text.
Read Standard vs PRO to know the differences between CodeThatHint Standard and PRO.
Create the basic HTML file.
Your file may look as following:
<html> <head> <link href="common_codethat.css" rel="stylesheet" type="text/css"> <script language="javascript1.2" src="codethatsdk.js"></script> <script language="javascript1.2" src="hint/codethathint.js"></script> </head> <body> </body> </html> |
Now lets create your first CodeThatHint.
For this purpose you can both create separate config *.js file or write the config construction right to your *.html file. Here we will view second variant.
To create new CT_Hint define variable cthint1_html with content for hint and create CodeThatHint as at the example below:
<script language="javascript1.2">
<!--
var cthint1_html = "<img src=\"img/norb.gif\" width=103 height=86" +
" border=0 align=left hspace=5>" +
"<br> This <br>is <br>Norb!";
var cthint1 = new CT_Hint(
200, 90, 2, "", true, 10, 10,
cthint1_html, "lightyellow", "", "test1tree",
{ width : 1, color : "black" },
true, 2, "", 0, 400, 0
);
cthint1.create();
//-->
</script>
|
Learn more about CodeThatHint creation >>
To give your users possibilities to change hint styles you can create a form like this:
<form>
<input type="button" onClick="cthint1.CSS('new');cthint1.show();"
value="Change css">
<br><input type="button" onClick="cthint1.bgColor('#cccccc');cthint1.show();"
value="Change BgColor">
<br><input type="button" onClick="cthint1.bgImage('img/Pict0005.jpg');cthint1.show();"
value="Change BgImage">
<br><input type="button" onClick="<br><center>By Norb!</center>');cthint1.show();"
value="Change HTML content">
<br><input type="button"
onClick="cthint1.appHTML('<br><center>Where are you?</center>');cthint1.show();"
value="Add HTML content">
</form>
|
Learn more about changing CodeThatHint properties >>.
Now lets try to open our HTML file in the browser:
So... A complete code for this example you can see here:
<html>
<head>
<link href="common_codethat.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="codethatsdk.js"></script>
<script language="javascript1.2" src="hint/codethathint.js"></script>
</head>
<body>
<script language="javascript1.2">
<!--
var cthint1_html = "<img src=\"img/norb.gif\" width=103 height=86" +
" border=0 align=left hspace=5>" +
"<br> This <br>is <br>Norb!";
var cthint1 = new CT_Hint(
200, 90, 2, "", true, 10, 10,
cthint1_html, "lightyellow", "", "test1tree",
{ width : 1, color : "black" },
true, 2, "", 0, 400, 0
);
cthint1.create();
//-->
</script>
<form>
<input type="button" onClick="cthint1.CSS('new');cthint1.show();"
value="Change css">
<br><input type="button" onClick="cthint1.bgColor('#cccccc');cthint1.show();"
value="Change BgColor">
<br><input type="button" onClick="cthint1.bgImage('img/Pict0005.jpg');cthint1.show();"
value="Change BgImage">
<br><input type="button" onClick="<br><center>By Norb!</center>');cthint1.show();"
value="Change HTML content">
<br><input type="button"
onClick="cthint1.appHTML('<br><center>Where are you?</center>');cthint1.show();"
value="Add HTML content">
</form>
</body>
</html>
|
Congratulations! You have just created your first CodeThatHint enhanced web page.
Try an Example >> [popup]
[ Home ] [ Forum ] [ Contacts ] [ Site Map ] [ News ] [ Links ] [ Sales & Prices ] [ Downloads ] |
[ Go Top ] |
© CodeThat.com, 2003-2008
Design by XTLabs, Inc.