-
Notifications
You must be signed in to change notification settings - Fork 11
/
documentation.htm
486 lines (399 loc) · 32.9 KB
/
documentation.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Porizm</title>
<link href="files/styles.css" rel="stylesheet"/>
<script type="text/javascript" src="files/board.js"></script>
</head>
<body>
<div id="Everything" style="overflow:visible">
<div id="TheDocumentation" class="ABox">
<div class="Title">Documentation</div>
<div class="DocContent">
<div style="color:rgb(129, 35, 33);font-size:30px;font-weight:bold">Overview</div>
BoardJS is a JavaScript library that simplifies the way of making interactive presentations, stories and ads.
<br/>
The library works by writing commands such as adding texts, images, moving objects and showing tooltips, and once the .go() function is called, commands will be executed one by one.
The list of commands will be interpreted in the library as a timeline.
<br/><br/>
The benefits and features of the library are:
<ul class="DocSubText">
<li>1. Optimized and fast</li>
<li>2. Cross browser and platform</li>
<li>3. Changes the presentation without refreshing the page</li>
<li>4. Applies commands to more than one object at a time</li>
<li>5. Easy to update presentations</li>
<li>6. Uses only HTML, JavaScript and CSS</li>
</ul>
Take a look at the examples.<br/>
If you get familiar with commands,
any presentation should take about 30 minutes to finish the code.<br/>
What will take your time is thinking about the presentation and preparing its content.
<br/><br/>
<div style="color:rgb(129, 35, 33);font-size:30px;font-weight:bold">License</div>
Licensed under the MIT license.
<br/>
<a style="color:#02a" target="_blank" href="http://board.porizm.com/MIT.txt">http://board.porizm.com/MIT.txt</a>
<br/><br/>
<div style="color:rgb(129, 35, 33);font-size:30px;font-weight:bold">Preparation</div>
Preparing the library is quite simple, creating a new instance by only one line of code with one parameter, like this:
<br/>
<div class="Code">
<span style='color:#800000; font-weight:bold; '>var</span> myObject <span style='color:#808030; '>=</span> <span style='color:#800000; font-weight:bold; '>new</span> BoardJS<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>ContainerDiv</span><span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
</div>
<br/>
ContainerDiv is the id of the handle div (the container which will handle the objects)
<br/>
Now you can start writing commands.<br/>
Note: you can clean the board by using myObject.reset(), so you don't have to prepare the board again.
<br/><br/>
<div style="color:rgb(129, 35, 33);font-size:30px;font-weight:bold">Using Commands</div>
<div>
After you prepare the board, you can write your commands then execute them, like this:<br/>
<div class="Code">
<span style='color:#800000; font-weight:bold; '>var</span> myObject <span style='color:#808030; '>=</span> <span style='color:#800000; font-weight:bold; '>new</span> BoardJS<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>ContainerDiv</span><span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span><br/>
myObject<span style='color:#808030; '>.</span>background<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>rgb(78,122,219)</span><span style='color:#800000; '>"</span><span style='color:#808030; '>,</span> <span style='color:#008c00; '>500</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span><br/>
myObject<span style='color:#808030; '>.</span>addText<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>Hello World</span><span style='color:#800000; '>"</span><span style='color:#808030; '>,</span> <span style='color:#008c00; '>0</span><span style='color:#808030; '>,</span> <span style='color:#008c00; '>50</span><span style='color:#808030; '>,</span> <span style='color:#800000; '>"</span><span style='color:#0000e6; '>title center</span><span style='color:#800000; '>"</span><span style='color:#808030; '>,</span> <span style='color:#800000; '>"</span><span style='color:#0000e6; '>fade</span><span style='color:#800000; '>"</span><span style='color:#808030; '>,</span> <span style='color:#008c00; '>1000</span><span style='color:#808030; '>,</span> <span style='color:#800000; '>"</span><span style='color:#0000e6; '>linear</span><span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span><br/>
myObject<span style='color:#808030; '>.</span>go<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
</div>
<div class="ABox" style="margin-right:150px;float:right;width:200px;height:140px;overflow:visible"><div id="ContainerDiv"></div><a onclick='ExContainerDiv();return false' href='#_blank' class='Button blue' style="position:absolute;left:45px;top:150px;width:100px;font-size:20px;padding:7px 6px;z-index:3">Run the code</a></div>
</div>
<br/><br/>
<div style="color:rgb(129, 35, 33);font-size:30px;font-weight:bold">Commands</div>
<div class="DocSubtitle">addText</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>addText<span style='color:#808030; '>(</span>TheText<span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>x<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span><span style='color:#808030; '>[</span>y<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>ClassName<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>ShowType<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Duration<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Easing<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>ID<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Freeze<span style='color:#808030; '>]</span><span style='color:#808030; '>)</span></div></li>
<li>TheText: the content of the object.</li>
<li>x: left position, the default is 0.</li>
<li>y: top position, the default is 0.</li>
<li>ClassName: className of object, you can use this to add additional styles.</li>
<li>ShowType: the way you want to show the object, ShowTypes are listed below.</li>
<li>Duration: the time it takes to show the object.</li>
<li>Easing: the type of the animation's formula. For a clear understanding, see the Easing example.</li>
<li>ID: the id of the object, you will need it to control the object in other commands.
<br/>caution: be careful with ID, it could conflict with other ids in the page.
</li>
<li>Freeze: can be true or (false or null); use this if you want to freeze the timeline until the object is fully shown.</li>
</ul>
<div class="DocSubtitle">addImage</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>addImage<span style='color:#808030; '>(</span>ImageSRC<span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>x<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>y<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>w<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>h<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>ShowType<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Duration<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Easing<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>ID<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Freeze<span style='color:#808030; '>]</span><span style='color:#808030; '>)</span></div></li>
<li>ImageSRC: the source of the image.</li>
<li>x: left position, the default is 0.</li>
<li>y: top position, the default is 0.</li>
<li>w: width; if the value is null or empty string, the width will be auto.</li>
<li>h: height; if the value is null or empty string, the height will be auto.</li>
<li>ShowType: the way you want to show the object, ShowTypes are listed below.</li>
<li>Duration: the time it takes to show the object.</li>
<li>Easing: the type of the animation's formula.</li>
<li>ID: the id of the object, you will need it to control the object in other commands.</li>
<li>Freeze: if true, the timeline will remain frozen until the object is fully shown.</li>
</ul>
<div class="DocSubtitle">delay</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>delay<span style='color:#808030; '>(</span>HowLong<span style='color:#808030; '>)</span></div></li>
<li>Freezes the timeline for a specified period of time.</li>
<li>HowLong is a numeric value in milliseconds (1000 = 1 second)</li>
</ul>
<div class="DocSubtitle">background</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>background <span style='color:#808030; '>(</span>ImageSRC <span style='color:#808030; '>|</span> HexColor <span style='color:#808030; '>|</span> RGBColor <span style='color:#808030; '>|</span> RGBAColor<span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>VisibilityDuration<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Freeze<span style='color:#808030; '>]</span><span style='color:#808030; '>)</span></div></li>
<li>Changes the background of the board, you can set a color or an image background.</li>
<li>ImageSRC: source of the image.</li>
<li>HexColor: to set a color with a hex value (ex: #0099ff)</li>
<li>RGBColor: to set a color with an RGB value (ex: rgb(0, 128, 255))</li>
<li>RGBAColor: to set a color with an RGBA value (ex: rgba(0, 128, 255, 0.5))</li>
<li>VisibilityDuration: the time it takes to show the background using fade effect with a linear movement.</li>
<li>Freeze: if true, the timeline will remain frozen until the background is fully shown.</li>
</ul>
<div class="DocSubtitle">flash</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>flash<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> HowMany<span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Duration<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Freeze<span style='color:#808030; '>]</span><span style='color:#808030; '>)</span></div></li>
<li>Following on from this command, all of the commands are for controlling the objects and the timeline.</li>
<li>This command is for flashing the selected object(s), it fades it in and out for several times depending on the "HowMany" value.</li>
<li>IDs: id of the target, IDs means that you can specify more than one target (ex: "id1 id2 id3")</li>
<li>HowMany: specifies the times you want to apply the flash. If the value is "always", it will flash forever.</li>
<li>Duration: the duration of each fading process in milliseconds.</li>
<li>Freeze: if true, the timeline will remain frozen until the flash is finished.</li>
</ul>
<div class="DocSubtitle">fadeOut</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>fadeOut<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> Duration<span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Freeze<span style='color:#808030; '>]</span><span style='color:#808030; '>)</span></div></li>
<li>Hide the target by fading it smoothly.</li>
<li>IDs: the target.</li>
<li>Duration: the duration of the fading process in milliseconds</li>
<li>Freeze: if true, the timeline will remain frozen until the target is hidden.</li>
</ul>
<div class="DocSubtitle">fadeIn</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>fadeIn<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> Duration<span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Freeze<span style='color:#808030; '>]</span><span style='color:#808030; '>)</span></div></li>
<li>Shows the target by fading it smoothly.</li>
<li>IDs: the target.</li>
<li>Duration: the duration of the fading process in milliseconds</li>
<li>Freeze: if true, the timeline will remain frozen until the target is fully shown.</li>
</ul>
<div class="DocSubtitle">moveTo</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>moveTo<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>x<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>y<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Duration<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Easing<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Freeze<span style='color:#808030; '>]</span><span style='color:#808030; '>)</span></div></li>
<li>Moves the target from its position to a new one.</li>
<li>IDs: the Target.</li>
<li>x: the new left position. If the value is null or empty, the left position will remain the same.</li>
<li>y: the new top position. If the value is null or empty, the top position will remain the same.</li>
<li>Duration: the time it takes to finish the movement.</li>
<li>Easing: the type of the animation's formula.</li>
<li>Freeze: freezes the timeline until this command is completed.</li>
</ul>
<div class="DocSubtitle">remove</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>remove<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>)</span></div></li>
<li>Removes the target.</li>
<li>IDs: the target</li>
</ul>
<div class="DocSubtitle">addTooltip</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>addTooltip<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> Content<span style='color:#808030; '>)</span></div></li>
<li>Adds a tooltip to the target to be shown when you move the cursor upon it.</li>
<li>IDs: the target</li>
<li>Content: the content of the tooltip.</li>
</ul>
<div class="DocSubtitle">removeTooltip</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>removeTooltip<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>)</span></div></li>
<li>Removes the recently added tooltip.</li>
<li>IDs: the target</li>
</ul>
<div class="DocSubtitle">showTooltip</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>showTooltip<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> Content<span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>LifeTime<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Freeze<span style='color:#808030; '>]</span><span style='color:#808030; '>)</span></div></li>
<li>Shows a tooltip above the target for a specified period of time.</li>
<li>IDs: the target</li>
<li>Content: the content of the tooltip.</li>
<li>LifeTime: specifies the time you want the tooltip to be visible. If this value is "always", it will still visible until you use removeTooltip.</li>
<li>Freeze: freezes the timeline until the tooltip is removed.</li>
</ul>
<div class="DocSubtitle">html</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>html<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> Content<span style='color:#808030; '>)</span></div></li>
<li>Changes the content of the text object.</li>
<li>IDs: the target</li>
<li>Content: the content of the object.</li>
</ul>
<div class="DocSubtitle">setStyle</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>setStyle<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> Style<span style='color:#808030; '>)</span></div></li>
<li>Changes the style of the object.</li>
<li>IDs: the target</li>
<li>Style: the new style, the syntax is the same of the inline style (ex: "border:2px solid #000;margin:10px")</li>
</ul>
<div class="DocSubtitle">changeImage</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>changeImage<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> ImageSRC<span style='color:#808030; '>)</span></div></li>
<li>Changes the image of the image object.</li>
<li>IDs: the target</li>
<li>ImageSRC: the source of the image.</li>
</ul>
<div class="DocSubtitle">addEvent</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>addEvent<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> TheEvent<span style='color:#808030; '>,</span> TheFunction<span style='color:#808030; '>)</span></div></li>
<li>Registers functions with any event of the target such as click.</li>
<li>IDs: the target</li>
<li>TheEvent: click, mouseover...; note: don't use the prefix "on".</li>
<li>TheFunction: the function you want to call, such as: function(){alert("Hello World")}</li>
</ul>
<div class="DocSubtitle">removeEvent</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>removeEvent<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> TheEvent<span style='color:#808030; '>)</span></div></li>
<li>Removes the recently registered event of the target.</li>
<li>IDs: the target</li>
<li>TheEvent: the event you want to remove.</li>
</ul>
<div class="DocSubtitle">hover</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>hover<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> Style<span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Duration<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Easing<span style='color:#808030; '>]</span><span style='color:#808030; '>)</span></div></li>
<li>Changes the style of the target on hovering, same as CSS :hover.</li>
<li>IDs: the target.</li>
<li>Style: the style to be applied when hovering with the addition of "scale" and "rotate", such as "rotate:100;scale:2;border:2px solid"</li>
<li>Duration: the time it takes to fully apply the new styles.</li>
<li>Easing: the type of the animation's formula.</li>
</ul>
<div class="DocSubtitle">unHover</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>unHover<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>)</span></div></li>
<li>Cancels the hover command of the target.</li>
<li>IDs: the target.</li>
</ul>
<div class="DocSubtitle">merge</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>merge<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> MergeWith<span style='color:#808030; '>)</span></div></li>
<li>Merges the target with another object and you will still can control it.</li>
<li>IDs: the target.</li>
<li>MergeWith: the object you want the target to be merged with.</li>
</ul>
<div class="DocSubtitle">unMerge</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>unMerge<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>)</span></div></li>
<li>Unmerges the recently merged objects.</li>
<li>IDs: the target</li>
</ul>
<div class="DocSubtitle">rotate</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>rotate<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> Angle<span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Duration<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Easing<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Freeze<span style='color:#808030; '>]</span><span style='color:#808030; '>)</span></div></li>
<li>Rotates the target with a specified angle with ease, requires css3.</li>
<li>IDs: the target</li>
<li>Angle: the angle in degrees.</li>
<li>Duration: the time it takes to fully apply the rotation.</li>
<li>Easing: the type of the animation's formula.</li>
<li>Freeze: freezes the timeline until the rotation is finished.</li>
</ul>
<div class="DocSubtitle">zoom</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>zoom<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> Scale<span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Duration<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Easing<span style='color:#808030; '>]</span><span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>Freeze<span style='color:#808030; '>]</span><span style='color:#808030; '>)</span></div></li>
<li>Scales the target with a specified scale value with ease, requires css3.</li>
<li>IDs: the target</li>
<li>Scale: the Scale value, 1 is the original size.</li>
<li>Duration: the time it takes to fully apply the scaling.</li>
<li>Easing: the type of the animation's formula.</li>
<li>Freeze: freezes the timeline until the scaling is finished.</li>
</ul>
<div class="DocSubtitle">circle</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>circle<span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> <span style='color:#808030; '>[</span>AdditionalStyles<span style='color:#808030; '>]</span><span style='color:#808030; '>)</span></div></li>
<li>Applies several styles to the target to be like a circle, requires css3.</li>
<li>IDs: the target.</li>
<li>AdditionalStyles: extra parameter, same as setStyle command</li>
</ul>
<div class="DocSubtitle">round</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span><span style='color:#800000; font-weight:bold; '>round</span><span style='color:#808030; '>(</span>IDs<span style='color:#808030; '>,</span> TheValue<span style='color:#808030; '>)</span></div></li>
<li>Sets the borderRadius of the object, requires css3.</li>
<li>IDs: the target.</li>
<li>TheValue: the value of the rounded border corners.</li>
</ul>
<div class="DocSubtitle">playSound</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>playSound<span style='color:#808030; '>(</span>SoundSRC<span style='color:#808030; '>,</span><span style='color:#808030; '>[</span>Freeze<span style='color:#808030; '>]</span><span style='color:#808030; '>)</span></div></li>
<li>Plays a sound file using the powerful JavaScript library SoundManager2</li>
<li>SoundSRC: the source of the sound file.</li>
<li>Freeze: freezes the timeline until the sound is finished.</li>
</ul>
<div class="DocSubtitle">stopSound</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>stopSound<span style='color:#808030; '>(</span><span style='color:#808030; '>[</span>SoundSRC<span style='color:#808030; '>]</span><span style='color:#808030; '>)</span></div></li>
<li>Stops the sound.</li>
<li>SoundSRC: the source of the sound file. If this value is null or an empty string, all playing sounds will be stopped</li>
</ul>
<div class="DocSubtitle">go</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>go<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span></div></li>
<li>Prepares the written commands and begins the show.</li>
<li>The presentation will not start until you use this command.</li>
</ul>
<div class="DocSubtitle">goTo</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>goTo<span style='color:#808030; '>(</span>CommandID<span style='color:#808030; '>)</span></div></li>
<li>Written commands have IDs depending on their sequence.</li>
<li>This command orders the board to jump to a specified command and and continue normally.</li>
<li>Example:</li>
</ul>
<div class="Code">myObject<span style='color:#808030; '>.</span>addText<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>Text 1</span><span style='color:#800000; '>"</span><span style='color:#808030; '>)</span> <span style='color:#aaa; '>// This command's id is 0</span><br/>
myObject<span style='color:#808030; '>.</span>addText<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>Text 2</span><span style='color:#800000; '>"</span><span style='color:#808030; '>)</span> <span style='color:#aaa; '>// This command's id is 1</span><br/>
myObject<span style='color:#808030; '>.</span>addText<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>Text 3</span><span style='color:#800000; '>"</span><span style='color:#808030; '>)</span> <span style='color:#aaa; '>// This command's id is 2</span><br/>
myObject<span style='color:#808030; '>.</span>goTo<span style='color:#808030; '>(</span><span style='color:#008c00; '>1</span><span style='color:#808030; '>)</span> <span style='color:#aaa; '>// The board will jump to command 1</span>
</div>
<br/><br/>
<div class="DocSubtitle">reset</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>reset<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span></div></li>
<li>Stops and cleans the board.</li>
<li>Always use this command at the first line of the presentation's code.</li>
</ul>
<div class="DocSubtitle">pause</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>pause<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span></div></li>
<li>Pauses the timeline, any working commands will remain working until they finish</li>
</ul>
<div class="DocSubtitle">resume</div>
<ul class="DocSubText">
<li>Syntax: <div class="Code"><span style='color:#808030; '>.</span>resume<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span></div></li>
<li>Continues the timeline. Works only if the board is paused.</li>
</ul>
<div class="DocSubtitle">Easings</div>
<ul class="DocSubText">
<li>Available easings are:</li>
<li>linear - easeIn - easeOut - backIn - backOut - elastic - bounce</li>
</ul>
<div class="DocSubtitle">ShowTypes</div>
<ul class="DocSubText">
<li>Available ShowTypes are:</li>
<li>Appear - Split - Fade - Zoom - FromLeft - FromRight - FromTop - FromBottom</li>
<li>Split works only with text objects.</li>
<li>You can apply more than one ShowType to an object like: "fade fromBottom"</li>
</ul>
<div style="color:rgb(129, 35, 33);font-size:30px;font-weight:bold">Sound issue</div>
Nothing in this world is free from issues.<br/>
I am always having problems with sounds, even if I am using the cross browser and platform library soundManager2
<br/>
In iOS, playing sounds by code without user interference such as onClick is forbidden.<br/>
<a style="color:#02a" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1" target="_blank">Click here for details (section: User Control of Downloads Over Cellular Networks)</a>
<br/><br/>
But the sound works normally with events such as onClick.<br/><br/>
Note: If the presentation has no sounds, the board does not ask for soundManager2.<br/>
So, if you don't have sounds in your presentations, you don't have to use soundManager2.js at all.
<br/><br/>
<div style="color:rgb(129, 35, 33);font-size:30px;font-weight:bold">Conclusion</div>
The main purpose of BoardJS is to reduce the time of making interactive presentations and to make sure they will work in most browsers.
<br/>
The Examples use most of the commands, you can find the source in main.js.
<br/>
Examples are tested on:<br/><br/>
Windows:<br/>
<ul class="DocSubText">
<li>Chromium 21</li>
<li>Google Chrome 7</li>
<li>Internet Explorer 7 / 8 / 9</li>
<li>Firefox 3.5.5 / 3.6.6 / 4 / 17</li>
<li>Safari 4.0.3 / 5.1.7</li>
<li>Opera 11 / 12.11</li>
</ul>
Mac OS:<br/>
<ul class="DocSubText">
<li>Safari 5.1.6</li>
<li>Google Chrome 23</li>
<li>Firefox 6.0.1</li>
</ul>
Touch devices:<br/>
<ul class="DocSubText">
<li>Android 4.0.3 (Samsung Galaxy S2)</li>
<li>Android 2.3.6 (Samsung Galaxy Ace 2)</li>
<li>iPod 4th generation with iOS 6.0 (Sound works with user interaction only)</li>
<li>iPad 3rd generation with iOS 6.0.1 (Sound works with user interaction only)</li>
</ul>
<br/>
And of course, Internet Explorer 7 and 8 do not support css3, but the show continues without any interruption.
<br/><br/>
<div style="color:rgb(129, 35, 33);font-size:30px;font-weight:bold">Submit your own example</div>
If you want to submit your own example, don't hesitate, just zip the example and send it to: <div class="Code">DRFERROUS <span style='color:#800080; '>{</span> AT <span style='color:#800080; '>}</span> PORIZM <span style='color:#800080; '>{</span> DOT <span style='color:#800080; '>}</span> COM</div><br/>
I don't mind if you made an example as a promotion for a product of yours.
<br/><br/>
Thank you very much
<br/><br/>
</div>
</div>
<div style="clear:both"></div>
<div id="TheFooter">
© 2010 - 2013 Dr.Fe<span style="text-decoration:underline">rrous</span>
</div>
</div>
<script type="text/javascript">
var myObject = BoardJS("ContainerDiv")
function ExContainerDiv(){
myObject.reset()
myObject.background("rgb(78,122,219)", 500);
myObject.addText("Hello World", 0, 45, "title center", "fade", 1000, "linear");
myObject.go()
}
</script>
</body>
</html>