User
Manual

Introduction    Style customize    Items and actions    Scroller configuration

Scroller effects    Scroller preload    Comments and view    Standard vs PRO

On-line Builder

PRO

STD

123Guide   

Order PRO Now    FAQ

CODETHATSCROLLER USER GUIDE

The following "10 steps" instruction will guide you step by step through the CodeThatScroller configuration process.

1

Download package with CodeThatScroller script and unarchive it.

 

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 CodeThatScroller Standard and PRO.

2

Create the basic HTML file.

 

Your file may look as following:

<HTML>
<HEAD>
<link href="common.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="../Scripts/codethatsdk.js"></script>
<script language="javascript1.2" src="../Scripts/codethatscrollerstd.js"></script>
</HEAD>
<BODY>
<p>&nbsp;HELLO WORD!
</BODY>
</HTML>
3

Now lets create your first CodeThatScroller.

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 describe new scroller create an object with following structure:

var ScrollerDef = {
	"mode" : "",
	"style" : { },
	"position" : { },
	"scroll" : { },
	"itemstyle" : { },
	"effect" : "",
	"preload" : boolean,
	"preload_num" : Int,
	"items" : [ ]
}; 
4

Now we describe scroller style, position and configuration properties:

var DemoDef = {
	"style" : {
		"width" : 300,
		"height" : 230,
		"bgimg" : "img/bg3.gif",
		"view" : {
			"width" : 225, "height" : 150,
			"offset" : {
				"x" : 38, "y" : 20
			}
		}
	},
	"position" : {
		"absolute" : false, "x" : 0, "y" : 0
	},
	"scroll" : {
		"type" : "auto",
		"step" : 5,
		"timer" : 30,
		"dir" : "e",
		"pause" : 1500,
		"cycle" : true,
		"ctrlstyle" : {
			"width" : 70, "height" : 30,
			"align" : "center"
		},
		"ctrlpos" : {
			"x" : 10, "y" : 180
		},
		"control" : [
		{
			"type" : "button", "act" : "stop", "text" : "[ Stop ]"
		},
		{
			"type" : "button", "act" : "pause", "text" : "[Pause]"
		},
		{
			"type" : "button", "act" : "start", "text" : "[Start]"
		},
		{
			"type" : "button", "act" : "rew", "text" : "[ Rew ]"
		} ]
	}
}; 

Hint - if parameters description isn't clearly understanding please have a look to CodeThat Scroller User Manual
Samples

5

To add new object to the scroller use the following structure:

"items" :
[
{
	"type" : "",
	"src" : "",
	"style" : { },
	"comment" : "",
	"act" : { },
	"effect" : ""
} ]

For our example items's definition looks like this:

"items" :
[
{
	"type" : "HTML",
	"src" : "<p>Scrolling type is AUTO",
	"style" : {
		"bgcolor" : "#EEEEEE",
		"color" : "#696969"
	}
},
{
	"type" : "IMG",
	"src" : "img/frog.gif",
	"effect" : "revealTrans(duration=3, transition=23)"
},
{
	"type" : "IMG",
	"src" : "img/lake.gif"
} ]
6

Now lets try to open our HTML file in the browser:



CodeThatScroller


7

Lets describe scroller mode and scroller objects' effects:

var DemoDef = {
	"mode" : "slide",
	"itemeffect" : "revealTrans(duration=1, transition=23)",
	"items" : [
	{
		"type" : "IMG",
		"src" : "img/frog.gif",
		"effect" : "revealTrans(duration=3, transition=23)"
	} ]
}; 
8

So... A complete code for this example you can see here:

var DemoDef = {
	"mode" : "slide",
	"style" : {
		"width" : 300,
		"height" : 230,
		"bgimg" : "img/bg3.gif",
		"view" : {
			"width" : 225, "height" : 150,
			"offset" : {
				"x" : 38, "y" : 20
			}
		}
	},
	"itemeffect" : "revealTrans(duration=1, transition=23)",
	"position" : {
		"absolute" : false, "x" : 0, "y" : 0
	},
	"scroll" : {
		"type" : "auto",
		"step" : 5,
		"timer" : 30,
		"dir" : "e",
		"pause" : 1500,
		"cycle" : true,
		"ctrlstyle" : {
			"width" : 70, "height" : 30, "align" : "center"
		},
		"ctrlpos" : {
			"x" : 10, "y" : 180
		},
		"control" : [
		{
			"type" : "button", "act" : "stop", "text" : "[ Stop ]"
		},
		{
			"type" : "button", "act" : "pause", "text" : "[Pause]"
		},
		{
			"type" : "button", "act" : "start", "text" : "[Start]"
		},
		{
			"type" : "button", "act" : "rew", "text" : "[ Rew ]"
		} ]
	},
	"items" : [
	{
		"type" : "HTML",
		"src" : "<p>Scrolling type is AUTO",
		"style" : {
			"bgcolor" : "#EEEEEE",
			"color" : "#696969"
		}
	},
	{
		"type" : "IMG",
		"src" : "img/frog.gif",
		"effect" : "revealTrans(duration=3, transition=23)"
	},
	{
		"type" : "IMG",
		"src" : "img/lake.gif"
	} ]
}; 
9

If you prefer to keep the scroller at the separate file you should paste scroller definition to *.js file.

Your *.html file will look like the:

<HEAD>
<link href="common_codethat.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="../Scripts/codethatsdk.js"></script>
<script language="javascript1.2" src="../Scripts/codethatscrollerpro.js"></script>
<script language="javascript1.2" src="effect_ex.js"></script>
<script language="javascript1.2">
<!--
var demo = new CScroller(DemoDef, 'demo'); 
//-->
</script>
</head>
<body>                
<script language="javascript1.2">
<!--
demo.create();
demo.run(); 
//-->
</script>
</body>

Hint - for using CodeThat Scripts you aren't limited only by html files. For example, you can build it in the *.php files. We've made it at this site :)

10

Congratulations! You have just created your first CodeThatScroller enhanced web page.

Try an Example >>

© CodeThat.com, 2003-2005
Design by XTLabs, Inc.