boucle qui s'arrête avec firefox

**scavenger** · 08/01/2009, 11h49

bonjour

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

, 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

**SpaceFrog** · 08/01/2009, 11h54

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

**scavenger** · 08/01/2009, 11h58

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 !!!

**E.Bzz** · 08/01/2009, 12h11

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)

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)

A+

**scavenger** · 08/01/2009, 12h39

hmmmmmm

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

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 ?

**beeboo** · 08/01/2009, 12h54

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.

**SpaceFrog** · 08/01/2009, 13h36

voici un exemple beaucoup plus leger :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et du coup la focntion peut se reduire comme suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ^^

boucle qui s'arrête avec firefox

JavaScript

Vue hybride

Discussions similaires

Partager

Partager