CodeThatForm User Manual 

 123GUIDE (get started)

You can read a breaf tutorial here.

 INTRODUCTION

With CodeThatForm you can

 Read Standard vs PRO to know the differences between CodeThatForm Standard and PRO.

  You can create simple window or layered form that will look like a window at your current window browser.

Windows created as layers are draggable and resizable. The content within may be scrolled if it overflows window boundaries.

 LAYERED FORM CREATION

To create layered form you should create instance of CLrWindow class with the following parameters:

new CLrWindow

( 
  w, 	// width
  h, 	// height
  y, 	// top-left corner y position 
	  // on the screen
  x, 	// top-left corner x position 
         // on the screen
  title, 	// window title
  html, 	// inner HTML, that's usually 
         // inserted between  
         // tags
  bgc,  	// background color
  bgi,  	// URL of background image
  css,	// CSS class for  if required
  btn, 	// array of window buttons
  cpt, 	// title properties
  brd, 	// window border
  cssf, 	// path to linked css file 
  scr, 	// whether or not we use scrolling 
         // at the window
         // (true or 1 if scrollable, false 
         //  or 0 otherwise) 
  sz, 	// whether or not window is resizable
         // (true or 1 if sizeable, false or 
         //  0 otherwise) 
  z, 	//z-index 
  flt 		// filter (transparency, shadow, etc.) 
) 

//  array of window buttons
// every button can be skipped by 'null' replacement

btn
[ 

/* minimize */

{ w:int,     // button image width
  h:int,     // button image height
  src:url,   // button image source
  over:url   // button over-image source
}, 

{ w:int,h:int,src:url,over:url }, /* maximize */

{ w:int,h:int,src:url,over:url }, /* close */

{ w:int,h:int,src:url,over:url } /* restore */
] 

// title properties

cpt
{ 
	bgc:color, 
	h:int, 
	bgi:url, 
	css:class 
} 

// window border

brd
{
	color:'black',
	width:2
} 

For example, code for layered form creation may look like this:

<script src="codethatsdk.js"></script>
<script src="layered.js"></script>
<script>

var w;

var html = "<table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td width=80%>"+
	"<h4>This is</h4> a test `window` created as a box.<center>It is a layer that allows any HTML code within."+
	" You can drag it by title</td>"+
	'</tr></table>';

function wincreate () {
	w = new CLrWindow(
	300,200,100,100,'Test window',html,'#AADDEE','','',
	[//buttons
		{w:16,h:14,src:'img/min.gif',over:'img/minovr.gif'}, //min
		{w:16,h:14,src:'img/max.gif',over:'img/maxovr.gif'}, //max
		{w:16,h:14,src:'img/close.gif',over:'img/closeovr.gif'},// close
		{w:16,h:14,src:'img/rest.gif', over:'img/restovr.gif'}//restore
	],{ bgc:'yellow',h:25 }, {color:'black',width:2}, 1, 1, 2, 'Alpha(Opacity=80)');
	w.create();
}

</script>

 SIMPLE WINDOW CREATION

To create simple window you should create instance of CWindow class with the following parameters:

new CWindow
( 
	w,
	h,
	y,
	x,
	title,
	html,
	bgc,
	bgi,
	css,
	cssf, 	// path to linked css file
	scr,
	sz
) 

As you can see many parameters are similar to CLrWindow. But some of parameters are missed. So, you can't change the window buttons appearence and so on.

For example, code for simple window creation may look like this:

<script src="codethatsdk.js"></script>
<script src="codethatform_windowed.js"></script>
<script>

var w;

var html = "<table border=0 cellpadding=0 cellspacing=0 width=100%>"+
           "<tr><td width=80%><h4>This is</h4> a test window created "+
           "as a kind of message box.<br><center>It is a usual browser "+
           "window that allows any HTML code within.</td>"+
	   '<td align=center bgcolor="#AADDCC"><form><input type=button '+
           'value=close onclick="window.close()"></form></td></tr></table>';

function wincreate () {
	w = new CWindow(300,150,100,200,'Message window',html,'#AADDEE','','','',1,1);
	w.create();
}

</script>    

See the first example of layered form window and simple window.

Learn more about properties description and window's actions.

Read more about CodeThatForm >>