boucle qui s'arrête avec firefox

Version imprimable

08/01/2009, 11h49
scavenger

boucle qui s'arrête avec firefox

bonjour :roll:

j'ai développé (repiqué et amélioré) 3 fonctions qui permettent de faire clignoter des cellules en modifiant selon un timer la couleur de styles CSS.

cela fonctionnait bien sous firefox ET IE :yaisse2:, mais depuis que j'ai passé toutes les variables sous forme d'array, la boucle démarre et s'arrête après 5 cycles sous firefox ... je ne comprends pas ...

voici le code si vous voulez voir à quoi ça ressemble : http://pastebin.ca/1303380
08/01/2009, 11h54
SpaceFrog

C'est juste pour faire clignoter une cellule ???
Quel est l'effet recherché, on peut certainement faire beaucoup plus simple ...
et du coup crossbrowser !
08/01/2009, 11h58
scavenger

cela a l'air de t'étonner ... C'est pourtant très clair :

on peut simplement animer des éléments html en citant leur ID, ok je sais.

Ici il s'agit de faire du GENERIQUE : animer des classes CSS. Pas d'ID dans les balises html. Impossible de les citer nommément. Il FAUT parcourir tous les styles de la liste générée avec une boucle, et faire l'animation avec une autre boucle, alors oui ça a l'air lourd mais il faut saisir toute la portée de la chose ...

je n'utilise pas d'id, mais des classes, et sur de gros tableaux, et j'anime simplement les classes, aucun id à gérer ...

si tu connais une autre solution pour animer des styles CSS rien qu'avec leurs noms, je suis prenneur !!! :)
08/01/2009, 12h11
E.Bzz

Bonjour,
je sais pas pour SpaceFrog, mais ce qui m'étonne moi, c'est que tu trouves un intérêt à ce genre de démarche (ne pas mettre d'id dans les balises html) 8O
D'une part parce qu'il n'y a pas besoin d'id pour faire ce que tu décris, et d'autres part car les id sont quasi obligatoires pour tout traitement à effectuer dans la page (et indiqué aussi pour le CSS dans certains cas).

Alors se faire une obligation de s'en passer juste pour un artifice d'affichage, gérable simplement d'une autre manière, est un peu vain (et de plus en l'occurrence, hyper-lourd) :aie:

A+
08/01/2009, 12h39
scavenger

hmmmmmm :aie:

:evilred: alors là soit j'ai rien compris, soit je suis débile, soit ... tout le monde s'en fout de ce que j'ai pu imaginer ... remarquez je ne me vexe pas hein :roll:

pré-requis :
1) il s'agit de faire ressortir dans un tableau, certaines valeurs en les faisant clignoter

génération :
1) le tableau est bien sûr généré en PHP à partir d'un mysql_result
2) un test sur les valeurs du tableau en PHP ajoute ou non une certaine classe dans le TD

javascript :
1) il faut animer les 2 ou 3 classes utilisées dans le tableau, point barre.

Je ne vois pas OU ni COMMENT j'utiliserai des ID qui ne peuvent être génériques alors que les classes, si.
En d'autres termes, si au lieu d'une classe j'ajoutais des ID aux balises TD contenant les valeurs à faire clignoter, heu et bien, comment javascript il saurait quels ID il faut animer ??
Et puis les ID j'en utilise dans certains de mes tableaux pour supprimer ou modifier les valeurs des celllules donc c'est niet pour les ID.

Ou alors j'envoie avec siddh ou ajax des listes d'ID à javascript en JSON ???

Non sérieusement les amis là je ne vous suis plus du tout ... Comment aurais-je dû procéder selon vous ? :?

Je suis prêt à tout recommencer (bien que j'ai déjà un résultat correct) pour respecter les normes en vigueur car le code pourri et lourdingue j'aime ça autant que vous ! Mais il faut me donner des pistes alors, et pas juste me dire que c'est nul ce que j'ai fait , vous voyez ce que je veux dire ? :(
08/01/2009, 12h54
beeboo

Salut,
juste pour signaler que ton code ne fonctionne pas non plus sur Opéra, Safari et Google Chrome. Comme quoi, tant qu'à faire compliqué ... mieux vaut utiliser du simple et portable que l'artillerie lourde.

voici un exemple beaucoup plus leger :

Code:

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
 
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<script type="text/javascript">
function clignotte(mycell){
  	mycell.style.backgroundColor=(mycell.style.backgroundColor=='white')?'red':'white';
		}
 
function run(mycell){
 	if (mycell.active){mycell.active=(mycell.active=='true')?'false':'true';}
 	else{mycell.active='true';}
	if(mycell.active=='true'){ 	mycell.flash=setInterval(function(){clignotte(mycell)},500);
								}
	else{ clearInterval(mycell.flash);
	   mycell.style.backgroundColor='white';
	   }
 }
 
 function populate(){
	var TabCells=document.getElementById("mytable").getElementsByTagName('td');
 	var i=0;
 	while(TabCells[i]){
         if(TabCells[i].className=="cligno"){ TabCells[i].onclick=function(){run(this);}}
         i++;
         }
	}
 
 
 </script>
<style type="text/css">
  td {border:solid 1px black;
  width:100px;}
  </style>
 
 
<title>Nouvelle page 1</title>
</head>
 
<body onload="populate()">
<table id='mytable'>
 <tr>
 	<td>&nbsp;</td>
 	<td class="cligno">&nbsp;</td> 	
 	<td>&nbsp;</td>
 </tr>	
 <tr>
 	<td>&nbsp;</td>
 	<td class="cligno">&nbsp;</td> 	
 	<td>&nbsp;</td>
 </tr>	
 <tr>
 	<td>&nbsp;</td>
 	<td>&nbsp;</td> 	
 	<td>&nbsp;</td>
 </tr>	
 <tr>
 	<td>&nbsp;</td>
 	<td>&nbsp;</td> 	
 	<td>&nbsp;</td>
 </tr>	
</table>
</body>
 
 
 
</html>

dans ce code c'est au onclick que le clignottement commence et s'arrete...
si tu veux que ce soit juste au demarrage

Code:

if(TabCells[i].className=="cligno"){ run(TabCells[i])}

et du coup la focntion peut se reduire comme suit

Code:

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
function run(mycell){
 		mycell.flash=setInterval(function(){clignotte(mycell)},500);
	 }
 
 function populate(){
	var TabCells=document.getElementById("mytable").getElementsByTagName('td');
 	var i=0;
 	while(TabCells[i]){
         if(TabCells[i].className=="cligno"){ run(TabCells[i])} //.onclick=function(){run(this);}}
         i++;
         }
	}
 
 
 </script>
 
 </script>
<style type="text/css">
  td {border:solid 1px black;
  width:100px;}
  </style>
 
 
<title>Nouvelle page 1</title>
</head>
 
<body onload="populate()">
<table id='mytable'>
 <tr>
 	<td>&nbsp;</td>
 	<td class="cligno">&nbsp;</td> 	
 	<td>&nbsp;</td>
 </tr>	
 <tr>
 	<td>&nbsp;</td>
 	<td class="cligno">&nbsp;</td> 	
 	<td>&nbsp;</td>
 </tr>	
 <tr>
 	<td>&nbsp;</td>
 	<td>&nbsp;</td> 	
 	<td>&nbsp;</td>
 </tr>	
 <tr>
 	<td>&nbsp;</td>
 	<td>&nbsp;</td> 	
 	<td>&nbsp;</td>
 </tr>	
</table>
</body>

et pour le fun
avec selection de couleur

Code:

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
function clignotte(mycell,couleur){
  	mycell.style.backgroundColor=(mycell.style.backgroundColor=='white')?couleur:'white';
		}
 
function run(mycell,couleur){
 		mycell.flash=setInterval(function(){clignotte(mycell,couleur)},500);
	 }
 
 function populate(){
	var TabCells=document.getElementById("mytable").getElementsByTagName('td');
 	var i=0;
 	while(TabCells[i]){
         if(TabCells[i].className.indexOf("cligno")==0){
                 Couleur=TabCells[i].className.replace('cligno','');
         			 run(TabCells[i],Couleur)} 
         i++;
         }
	}
 
 
 </script>
 
 </script>
<style type="text/css">
  td {border:solid 1px black;
  width:100px;}
  </style>
 
 
<title>Nouvelle page 1</title>
</head>
 
<body onload="populate()">
<table id='mytable'>
 <tr>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td>&nbsp;</td>
 </tr>	
 <tr>
 	<td class="clignoyellow">&nbsp;</td>
 	<td class="clignoblue">&nbsp;</td> 	
 	<td>&nbsp;</td>
 </tr>	
 <tr>
 	<td>&nbsp;</td>
 	<td class="cligno#EEFFCC">&nbsp;</td> 	
 	<td>&nbsp;</td>
 </tr>	
 <tr>
 	<td class="clignosalmon">&nbsp;</td>
 	<td>&nbsp;</td> 	
 	<td class="cligno#FF0000">&nbsp;</td>
 </tr>	
</table>
</body>

Je sasi pas pourquoi j'ai l'impression de réinventer JQuery ou scriptaculous ^^

08/01/2009, 14h15
SpaceFrog
Ce qu'il y a de très fort avec ce code est la permissivité au niveau de la syntaxe de la couleur ...

j'ai testé les codes suivants:
Code:

1 2 3 4 <td class="clignosalmon"> </td> <td class="clignorgb(10,230,80)"> </td> <td class="cligno#FF0000"> </td>
et il fonctionnent tous !!!! :yaisse2:
08/01/2009, 14h19
E.Bzz

Jolie solution :king:
08/01/2009, 14h25
beeboo

SpaceFrog++ :king:
08/01/2009, 14h29
Bovino

Citation:

Je sais pas pourquoi j'ai l'impression de réinventer JQuery ou scriptaculous ^^

Non, ce que tu fais est beaucoup mieux :king:
08/01/2009, 14h41
SpaceFrog

Citation:

Non, ce que tu fais est beaucoup mieux

Je n'aurais pas cette prétention :oops:
08/01/2009, 14h48
scavenger

:mouarf: ^^ ahhhhhhhh là d'accord ... dans ce cas je peux utiliser dojo et compagnie ...

bah vu comme ça d'accord : ça fait à peu près ce que j'attendais, le fading en moins, le CSS en moins... ET y'a un ID que pour la table, pas pour les TD, ok cool :king:

D'après ce que je comprends populate() est lancée une seule fois puis lance autant de fonction run() que de cellules concernées... Hm on peut alors réintroduire le fading ... à la mano en réduisant L'Interval ou avec dojo peut être... je vais voir ça !

mais je suis d'accord grâce à cette méthode, c'est cross compatible !

N'empêche ce que j'ai fait n'est pas si lourd, je ne parcourais les listes de styles qu'une seule fois après tout ... et puis changer 3 styles toutes les 40ms c'est pas si lourd non plus , si ?

bref bref bref ... qu'est-ce qui n'allait pas dans mon code mince alors ! les array ? pourquoi ça marche avec IE et pas les autres ? Ils sont incapables d'opérer des changements rapides de styles ?

en tous les cas MERCI pour cet autre point de vue, j'aurais vu les 2 méthodes comme ça :yaisse2:
08/01/2009, 14h50
SpaceFrog

pour le coup du fade on pourrait imaginer de coup deu slide d'un background image ...

ok alors pour les class au lieu des couleurs ton code donne ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function clignotte(mycell,Class){
  	mycell.className=(mycell.className=='Blank')?Class:'Blank';
		}
 
function run(mycell,Class){
 		mycell.flash=setInterval(function(){clignotte(mycell,Class)},500);
	 }
 
 function populate(TABLE){
	var TabCells=document.getElementById(TABLE).getElementsByTagName('td');
 	var i=0;
 	while(TabCells[i]){
         if(TabCells[i].className.indexOf("cligno")==0){
                 Class=TabCells[i].className.replace('cligno','');
         			 run(TabCells[i],Class)} 
         i++;
         }
	}

on m'a appris à séparer le spécifique du générique, i.e. la décoration du code de l'applicatif, donc avec les class c'est encore plus la class ...

mirki encore !

juste une limite à ce script telquel, si l'on a beaucoup de cellules:

Code:

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
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
function clignotte(mycell,couleur){
  	mycell.style.backgroundColor=(mycell.style.backgroundColor=='white')?couleur:'white';
		}
 
function run(mycell,couleur){
 		mycell.flash=setInterval(function(){new clignotte(mycell,couleur)},500);
	 }
 
 function populate(){
	var TabCells=document.getElementById("mytable").getElementsByTagName('td');
 	var i=0;
 	while(TabCells[i]){
         if(TabCells[i].className.indexOf("cligno")==0){
                 Couleur=TabCells[i].className.replace('cligno','');
         			 new run(TabCells[i],Couleur)} 
         i++;
         }
	}
 
 
 </script>
 
 </script>
<style type="text/css">
  td {border:solid 1px black;
  width:10px;}
  </style>
 
 
<title>Nouvelle page 1</title>
</head>
 
<body onload="populate()">
<table id='mytable'>
 <tr>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="cligno#EEE8AA">&nbsp;</td>
 	<td class="cligno#87CEEB">&nbsp;</td> 	
 	<td class="cligno#DC143C">&nbsp;</td>
 	<td class="cligno#F0FFFF">&nbsp;</td>
 	<td class="cligno#FDF5E6">&nbsp;</td> 	
 	<td class="cligno#000080">&nbsp;</td>
 	<td class="cligno#20B2AA">&nbsp;</td>
 	<td class="cligno#9ACD32">&nbsp;</td> 	
 	<td class="cligno#00CED1">&nbsp;</td>
	<td class="cligno#FF7F50">&nbsp;</td>
 	<td class="cligno#F4A460">&nbsp;</td> 	
 	<td class="cligno#808000">&nbsp;</td>
 	<td class="clignorgb(1,0,120)">&nbsp;</td>
 	<td class="clignorgb(1,0,120)">&nbsp;</td> 	
 	<td class="clignorgb(1,0,120)">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 </tr>	
 <tr>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="cligno#EEE8AA">&nbsp;</td>
 	<td class="cligno#87CEEB">&nbsp;</td> 	
 	<td class="cligno#DC143C">&nbsp;</td>
 	<td class="cligno#F0FFFF">&nbsp;</td>
 	<td class="cligno#FDF5E6">&nbsp;</td> 	
 	<td class="cligno#000080">&nbsp;</td>
 	<td class="cligno#20B2AA">&nbsp;</td>
 	<td class="cligno#9ACD32">&nbsp;</td> 	
 	<td class="cligno#00CED1">&nbsp;</td>
	<td class="cligno#FF7F50">&nbsp;</td>
 	<td class="cligno#F4A460">&nbsp;</td> 	
 	<td class="cligno#808000">&nbsp;</td>
 </tr>	
 <tr>
 	<td class="clignorgb(1,0,120)">&nbsp;</td>
 	<td class="clignorgb(1,0,120)">&nbsp;</td> 	
 	<td class="clignorgb(1,0,120)">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 </tr>	
 <tr>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="cligno#EEE8AA">&nbsp;</td>
 	<td class="cligno#87CEEB">&nbsp;</td> 	
 	<td class="cligno#DC143C">&nbsp;</td>
 	<td class="cligno#F0FFFF">&nbsp;</td>
 	<td class="cligno#FDF5E6">&nbsp;</td> 	
 	<td class="cligno#000080">&nbsp;</td>
 	<td class="cligno#20B2AA">&nbsp;</td>
 	<td class="cligno#9ACD32">&nbsp;</td> 	
 	<td class="cligno#00CED1">&nbsp;</td>
	<td class="cligno#FF7F50">&nbsp;</td>
 	<td class="cligno#F4A460">&nbsp;</td> 	
 	<td class="cligno#808000">&nbsp;</td>
  	<td class="clignorgb(1,0,120)">&nbsp;</td>
 	<td class="clignorgb(1,0,120)">&nbsp;</td> 	
 	<td class="clignorgb(1,0,120)">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 </tr>	
 <tr>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 </tr>	
  <tr>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="cligno#EEE8AA">&nbsp;</td>
 	<td class="cligno#87CEEB">&nbsp;</td> 	
 	<td class="cligno#DC143C">&nbsp;</td>
 	<td class="cligno#F0FFFF">&nbsp;</td>
 	<td class="cligno#FDF5E6">&nbsp;</td> 	
 	<td class="cligno#000080">&nbsp;</td>
 	<td class="cligno#20B2AA">&nbsp;</td>
 	<td class="cligno#9ACD32">&nbsp;</td> 	
 	<td class="cligno#00CED1">&nbsp;</td>
	<td class="cligno#FF7F50">&nbsp;</td>
 	<td class="cligno#F4A460">&nbsp;</td> 	
 	<td class="cligno#808000">&nbsp;</td>
 	<td class="clignorgb(1,0,120)">&nbsp;</td>
 	<td class="clignorgb(1,0,120)">&nbsp;</td> 	
 	<td class="clignorgb(1,0,120)">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 </tr>	
 <tr>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="cligno#EEE8AA">&nbsp;</td>
 	<td class="cligno#87CEEB">&nbsp;</td> 	
 	<td class="cligno#DC143C">&nbsp;</td>
 	<td class="cligno#F0FFFF">&nbsp;</td>
 	<td class="cligno#FDF5E6">&nbsp;</td> 	
 	<td class="cligno#000080">&nbsp;</td>
 	<td class="cligno#20B2AA">&nbsp;</td>
 	<td class="cligno#9ACD32">&nbsp;</td> 	
 	<td class="cligno#00CED1">&nbsp;</td>
	<td class="cligno#FF7F50">&nbsp;</td>
 	<td class="cligno#F4A460">&nbsp;</td> 	
 	<td class="cligno#808000">&nbsp;</td>
 	<td class="clignorgb(1,0,120)">&nbsp;</td>
 	<td class="clignorgb(1,0,120)">&nbsp;</td> 	
 	<td class="clignorgb(1,0,120)">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 </tr>	
 <tr>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="cligno#EEE8AA">&nbsp;</td>
 	<td class="cligno#87CEEB">&nbsp;</td> 	
 	<td class="cligno#DC143C">&nbsp;</td>
 	<td class="cligno#F0FFFF">&nbsp;</td>
 	<td class="cligno#FDF5E6">&nbsp;</td> 	
 	<td class="cligno#000080">&nbsp;</td>
 	<td class="cligno#20B2AA">&nbsp;</td>
 	<td class="cligno#9ACD32">&nbsp;</td> 	
 	<td class="cligno#00CED1">&nbsp;</td>
	<td class="cligno#FF7F50">&nbsp;</td>
 	<td class="cligno#F4A460">&nbsp;</td> 	
 	<td class="cligno#808000">&nbsp;</td>
 </tr>	
 <tr>
 	<td class="clignorgb(1,0,120)">&nbsp;</td>
 	<td class="clignorgb(1,0,120)">&nbsp;</td> 	
 	<td class="clignorgb(1,0,120)">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignored">&nbsp;</td> 	
 	<td class="clignobrown">&nbsp;</td>
 	<td class="clignogreen">&nbsp;</td>
 	<td class="clignoaqua">&nbsp;</td> 	
 	<td class="clignomagenta">&nbsp;</td>
 	<td class="clignoorange">&nbsp;</td>
 	<td class="clignogold">&nbsp;</td> 	
 	<td class="clignogreenyellow">&nbsp;</td>
	<td class="clignohotpink">&nbsp;</td>
 	<td class="clignoindigo">&nbsp;</td> 	
 	<td class="clignolime">&nbsp;</td>
 </tr>	
<!--  .../... -->
</table>
</body>
</html>

Coment remédier au décallage ?

08/01/2009, 15h33
scavenger

je suis obligé de connaître à l'avance le nom de la table ?

j'utilise des templates pour le header et tout ça, et les noms de tables sont différents selon ce qu'on choisi d'afficher, et je ne peux pas mettre le onLoad() ailleurs que dans body...

comment je peux déclencher populate() une fois la table générée en php ?
08/01/2009, 15h35
SpaceFrog

tu as plusieurs tables sur la page ???

si tu n'en a qu'une:

Code:

document.getElementByTagName('table')[0]
08/01/2009, 15h36
scavenger

Citation:

Envoyé par SpaceFrog

juste une limite à ce script telquel, si l'on a beaucoup de cellules:

Coment remédier au décallage ?

hahaaaaa c'est rigolo sous IE ... on dirait un jeu ...
Sous ff pas de décallage
08/01/2009, 15h41
SpaceFrog

encore plus drole :

Code:

mycell.flash=setInterval(function(){new clignotte(mycell,couleur)},Math.random()*500);

avec

Code:

Couleur="RGB("+Math.round(Math.random()*255,0)+","+Math.round(Math.random()*255,0)+","+Math.round(Math.random()*255,0)+")"
08/01/2009, 15h42
E.Bzz

Citation:

Envoyé par SpaceFrog

juste une limite à ce script telquel, si l'on a beaucoup de cellules

... à faire clignoter.
Le problème n'est pas que le tableau soit grand, mais que beaucoup de cellules clignotent.

Or, si on fait clignoter des cellules, c'est à priori pour les faire ressortir du lot.

Difficile d'envisager une application fonctionnelle du cas extrême que tu as codé où toutes les cellules clignotent, et donc où ce problème se poserait (c'est d'ailleurs surtout avec IE6 que c'est le b*** : avec FF2, tout est synchro ;) )
Ou alors il faut le proposer à ceux qui agrémentent leur site de flocons de neige : ça ferait la guirlande :mouarf:

A+
08/01/2009, 15h43
E.Bzz

Citation:

Envoyé par scavenger

on dirait un jeu ...

Ca m'a fait penser au tableau de bord de l'Entreprise :aie:
08/01/2009, 15h48
scavenger

Citation:

Envoyé par SpaceFrog

tu as plusieurs tables sur la page ???

si tu n'en a qu'une:

Code:

document.getElementByTagName('table')[0]

oui enfin voilà : c'est ok quand j'en ai qu'une, sinon il faut boucler ...

Code:

var TabCells=document.getElementById(document.getElementsByTagName('table')[0].id).getElementsByTagName('td');
08/01/2009, 15h53
E.Bzz
Citation:

Envoyé par scavenger

sinon il faut boucler ...

Oui mais plus simplement
Code:

1 2 3 4 5 for (i=0; i<document.getElementByTagName('table').length; i++) { ... TabCells=document.getElementByTagName('table')[i].getElementsByTagName('td') ... }
Ceci dit, si c'est pour boucler sur toutes les tables, tu n'as plus besoin de cibler la/les table(s) : suffit de boucler sur les td de la page.

L'avantage de l'id est de pouvoir faire clignoter une table et pas une autre (au niveau utilisateur et non serveur)

A+

:roll:

Code:

1
2
3
4
5
6
7
var i=0;
while(document.getElementByTagName('table')[i]){ 
TabCells=document.getElementByTagName('table')[i].getElementsByTagName('td')
 
....
i++;
}

arf grilled ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function clignotte(mycell,Class){
  	mycell.className=(mycell.className=='Blank')?Class:'Blank';
		}
 
function run(mycell,Class){
 		mycell.flash=setInterval(function(){clignotte(mycell,Class)},500);
	 }
 
function populate(){
for (n=0; n<document.getElementsByTagName('table').length; n++) {
	TabCells=document.getElementsByTagName('table')[n].getElementsByTagName('td');
 	var i=0;
 	while(TabCells[i]){
         if(TabCells[i].className.indexOf("cligno")==0){
                 Class=TabCells[i].className.replace('cligno','');
         			 run(TabCells[i],Class)} 
         i++;
        }
 }
}

ne marche plus sous IE ... :evilred:

08/01/2009, 17h15
E.Bzz

Ton identifiant Class est peut être mal choisi.

Essaye avec un plus "perso" ;)

EDIT : ceci dit, une description un peu plus précise (euphémisme !!) de l'erreur aurait été bienvenue :aie:

A+

booof, Class, class, la casse compte en js, non ?

bref j'ai tout changé ainsi et ça marche toujours très bien (ça clignotte avec 2 couleurs !) :
Code:

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 function clignotte(mycell,lesClass){ mycell.className=(mycell.className==lesClass[1])?lesClass[0]:lesClass[1]; } function callClignotte(mycell,lesClass){ mycell.flash=setInterval(function(){clignotte(mycell,lesClass)},500); } function lanceClignotage(){ alert(document.getElementsByTagName('table').length); for (n=0; n<document.getElementsByTagName('table').length; n++) { var TabCells=document.getElementsByTagName('table')[n].getElementsByTagName('td'); var i=0; while(TabCells[i]){ if(TabCells[i].className.indexOf("cligno")==0){ lesClass=TabCells[i].className.replace('cligno','').split(' '); callClignotte(TabCells[i],lesClass)} i++; } } } on écrit les TD comme ça : <td class="clignoClass1 Class2">...</td>
Le truc c'est qu'il ne détecte que 1 tableau sous firefox, et 0 sous IE.
J'utilise également dojo que je déclare dans mon HEAD ... et mes tableaux sont dans ce qu'ils appellent des ContentPane, qui ne sont que des div...

Bref ça fatigue... un coup ça marche, et dès que j'ajoute beaucoup de code, pafff... Ca n'a rien à voir avec ce qui a été posté ici je pense, donc je vais chercher dans mon coin :'(

08/01/2009, 19h03
scavenger

je confirme le caractère aléatoire de l'erreur :evilred:

Ca fonctionne bien et ça détecte tous les tableaux 1 fois sur 5 en moyenne sous firefox

Sous IE "document.getElementsByTagName('table').length" retourne systématiquement 0

je n'ai cependant aucune erreur de code (j'utilise l'extention Web Developper 1.1.6 sous firefox)
09/01/2009, 09h48
E.Bzz

Citation:

Envoyé par scavenger

je confirme le caractère aléatoire de l'erreur :evilred:

Ca fonctionne bien et ça détecte tous les tableaux 1 fois sur 5 en moyenne sous firefox

Sous IE "document.getElementsByTagName('table').length" retourne systématiquement 0

D'où est-ce que tu appelles la fonction ?
Dans le onload du <body> il ne devrait pas y avoir ce côté aléatoire :?

A+
09/01/2009, 13h41
scavenger

c'est dojo toolkit qui fout la grouille

il empêche le comptage des balises contenues dans les containers

c relou, et leur forum y marche pas je ne peux pas m'enregistrer, je suis obligé d'aller sur l'irc pour leur parler et c des relous, isl répondent que quand ils ont le temps

RESOLU !

dojo + ContentPane = iFrames !!
Il faut mettre le onload=fonction() dans le <div> le plus lourd de la page, ainsi il sera chargé en dernier et fera bien son office.
09/01/2009, 13h48
E.Bzz

Citation:

Envoyé par scavenger

c'est dojo toolkit qui fout la grouille

il empêche le comptage des balises contenues dans les containers

Tu peux poser cette nouvelle question ici.
Tu auras peut être plus de chance ...

A+
09/01/2009, 17h51
scavenger

merci ! j'avais pô vu que ça existait ...