![]() | ||||||||||
| ||||||||||
The following "10 steps" instruction will guide you step by step through the CodeThatScroller configuration process. | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
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.
| ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
Your file may look as following: <HTML> <HEAD> <link href="common.css" rel="stylesheet" type="text/css"> <script language="javascript1.2" src="codethatsdk.js"></script> <script language="javascript1.2" src="codethatscrollerstd.js"></script> </HEAD> <BODY> <p> HELLO WORD! </BODY> </HTML> | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
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" : [ ] }; | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
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 | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
"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" } ] | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
| ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
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)" } ] }; | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
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" } ] }; | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
<HEAD> <link href="common_codethat.css" rel="stylesheet" type="text/css"> <script language="javascript1.2" src="codethatsdk.js"></script> <script language="javascript1.2" src="codethatscrollerstd.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>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 :) | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
To make your life easier we do plan to supply you with on and off line scroller builders in the nearest time. | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() |