Affichage/Masquage et comportements étranges

Version imprimable

Bonjour,

J'ai un tableau avec une colonne gauche id="colonneGauche" et une colonne droite id="colonneDroite"
Dans cette colonne droite, j'ai plusieurs lignes dont une qui s'affiche sous conditions (en fonction de checkbox cochées par ailleurs) --> id="maLigne"

Quand on coche une case, je positionne donc selon les cas
Code:

1 2 3 document.getElementById('colonneGauche').style.visibility = 'hidden' ou 'visible' document.getElementById('colonneDroite').style.visibility = 'hidden' ou 'visible' document.getElementById('maLigne').style.visibility = 'hidden' ou 'visible'
Problème1 : FireFox : les colonneGauche et colonneDroite disparaissent instantanément comme je veux mais sous IE, il faut cliquer quelque part dans l'écran pour que le rafraichissement se fasse (!!)

Problème2 :IE ou Firefox, la ligne disparaît en me laissant un vide, alors que j'aurais bien voulu que le tableau s'arrange pour se réorganiser automatiquement sans cet espace vide.

Merci pour vos suggestions.

26/03/2012, 16h44
SpaceFrog

sans voir le html associé, ça relève plus de la divination que de javascript

Je ne sais pas s'il y a vraiment besoin de tout le pâté de code pour comprendre de quoi il s'agit mais soit :

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
<table class="boxEmpty texteGrisFonce titre4" cellspacing="0" > 
	<tr>
		<%-- Colonne Gauche --%>
		<td style="margin:0; padding:0;" id="colonneGauche" valign="top">
			<table class="boxClear texteGrisFonce titre4" cellspacing="0"> 
				<tr><th class="texteBlanc titre3" >Colonne Gauche</th></tr>
			</table>
		  	<table class="boxGrid texteGrisFonce titre3" cellspacing="0" style="width:435px;"> 
			    <tr>
			      <td>Col1.1</td>
			      <td>Col1.2</td>
			    </tr>    	    
		    	<tr>
			      <td>Col2.1</td>
			      <td>Col2.2</td>
	    		</tr>
		    	<tr>
			      <td>Col3.1</td>
			      <td>Col3.2</td>
	    		</tr>
	  		</table>
  		</td>
 
		<%-- Colonne Droite --%>
		<td style="margin:0; padding:0;" id="colonneDroite" valign="top">
			<table class="boxClear texteGrisFonce titre4" cellspacing="0"> 
				<tr><th class="texteBlanc titre3" >Colonne Droite</th></tr>
			</table>
		  	<table class="boxGrid texteGrisFonce titre3" cellspacing="0" style="width:435px;"> 
			   	<tr>
			      <td>Col1.1</td>
			      <td>Col1.2</td>
			    </tr>    	    
		    	<tr>
			      <td>Col2.1</td>
			      <td>Col2.2</td>
	    		</tr>
		    	<tr>
			      <td>Col3.1</td>
			      <td>Col3.2</td>
	    		</tr>
	    		<%// Afficher que sous certaines conditions%>
		    	<tr id="maLigne">
	      			<td>Col4.1</td>
					<td>Col4.2</td>
	    		</tr>
				<tr>
			      <td>Col5.1</td>
			      <td>Col5.2</td>
	    		</tr>
	  		</table>
  		</td>	
	</tr>
</table>

Et la fonction javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
	function dispOrHideGaucheDroite(){
		//Je fais mes conditions pour déterminer nbgauche et nbDroite
 
		if (nbDroite == 0){
			document.getElementById('colonneDroite').style.visibility = 'hidden';
		}else{
			document.getElementById('colonneDroite').style.visibility = 'visible';
		}
 
		if (nbgauche == 0){
			document.getElementById('colonneGauche').style.visibility = 'hidden'; 
			if (nbDroite > 0){
				document.getElementById('maLigne').style.visibility = 'visible'; 
			}else{
				document.getElementById('maLigne').style.visibility = 'hidden'; 
			}	
		}else{
			document.getElementById('colonneGauche').style.visibility = 'visible'; 
			document.getElementById('maLigne').style.visibility = 'hidden';
		}
	}

26/03/2012, 17h32
Bovino

La première des choses à comprendre et qui répondra à ta seconde question (qui n'est pas un problème à proprement parler), c'est la différence entre display et visibility.

Si display permet d'ajuster un conteneur à la façon dont il doit être affiché et en particulier, lui supprimer les dimensions s'il vaut none, visibility sert juste à déterminer si l'élément est visible ou non et dans tous les cas, l'espace qui lui est dédié sera conservé.
26/03/2012, 17h39
stof

Citation:

Envoyé par Bovino

différence entre display et visibility (..)

Si je remplace les
style.visibility = 'hidden' par style.display = 'none'
et les
style.visibility = 'visible' par style.display = 'block'
cela n'a aucun effet (c'est donc moins bien que les disparitions via la méthode style.display)

Citation:

Envoyé par stof

cela n'a aucun effet

Peut-être parce que tu t'y prends mal :whistle:

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
<!DOCTYPE html>
<html>
    <head>
		<title>display / visibility</title>
        <meta charset="utf-8" />
		<script>
			var visibleDisplay = true;
			var visibleVisibility = true;
			function alternGauche(){
				document.getElementById('colonneGauche').style.display = visibleDisplay ? 'none' : '';
				visibleDisplay=!visibleDisplay;
			}
			function altern(){
				document.getElementById('colonneGauche').style.visibility = visibleVisibility ? 'hidden' : 'visible';
				visibleVisibility=!visibleVisibility;
			}
		</script>	
    </head>
    <body>
		<p><button onclick="alternGauche()">Méthode display</button><button onclick="altern()">Méthode visibility</button></p>
		<table class="boxEmpty texteGrisFonce titre4" cellspacing="0" > 
	<tr>
		<td style="margin:0; padding:0;" id="colonneGauche" valign="top">
			<table class="boxClear texteGrisFonce titre4" cellspacing="0"> 
				<tr><th class="texteBlanc titre3" >Colonne Gauche</th></tr>
			</table>
		  	<table class="boxGrid texteGrisFonce titre3" cellspacing="0" style="width:435px;"> 
			    <tr>
			      <td>Col1.1</td>
			      <td>Col1.2</td>
			    </tr>    	    
		    	<tr>
			      <td>Col2.1</td>
			      <td>Col2.2</td>
	    		</tr>
		    	<tr>
			      <td>Col3.1</td>
			      <td>Col3.2</td>
	    		</tr>
	  		</table>
  		</td>
		<td style="margin:0; padding:0;" id="colonneDroite" valign="top">
			<table class="boxClear texteGrisFonce titre4" cellspacing="0"> 
				<tr><th class="texteBlanc titre3" >Colonne Droite</th></tr>
			</table>
		  	<table class="boxGrid texteGrisFonce titre3" cellspacing="0" style="width:435px;"> 
			   	<tr>
			      <td>Col1.1</td>
			      <td>Col1.2</td>
			    </tr>    	    
		    	<tr>
			      <td>Col2.1</td>
			      <td>Col2.2</td>
	    		</tr>
		    	<tr>
			      <td>Col3.1</td>
			      <td>Col3.2</td>
	    		</tr>
		    	<tr id="maLigne">
	      			<td>Col4.1</td>
					<td>Col4.2</td>
	    		</tr>
				<tr>
			      <td>Col5.1</td>
			      <td>Col5.2</td>
	    		</tr>
	  		</table>
  		</td>	
	</tr>
</table>
	</body>
</html>

27/03/2012, 09h37
stof

Citation:

Envoyé par Bovino

Peut-être parce que tu t'y prends mal :whistle:

Ca c'est sûr :lol:

Bon, je ne vois toujours pas; j'ai remplacé style.dispaly = 'block' par style.dispaly = '' mais toujours pas.
Ce que je fais ce n'est pas de l'alternance comme dans ton exemple, c'est suivant les variables nbGauche et nbDroite (les conditions étant bien écrites puisque le même code avec .style.visibility = 'hidden' et .style.visibility = 'visible' donne ce que je veux (au "blanc" laissé par la ligne masquée près).
27/03/2012, 14h59
stof

Bon, tant pis pour cette partie-là...

Et pour le comportement différent Firefox / IE (problème1)?
28/03/2012, 10h05
stof

Citation:

Envoyé par stof

Et pour le comportement différent Firefox / IE (problème1)?

bon, pour ce problème, je me suis fait dépanner ailleurs : il fallait utiliser l'événement onclick plutôt que onChange (qui attend qu'on perde le focus, donc que l'on clique ailleurs dans la page).

Si une bonne âme peut m'expliquer pour l'autre "problème" (un trou laissé par les champs masqués au lieu d'une réorganisation des éléments dans le tableau que j'aurais préférée)...
29/03/2012, 15h35
stof

Précison : hidden / visible me laisse un trou mais block/none me détraque la mise en forme, cf ci-dessous.

http://img11.hostingpics.net/pics/499734Avant.jpg

http://img11.hostingpics.net/pics/290961Apres.jpg
29/03/2012, 15h39
SpaceFrog

pour des elements de table c'est pas block

c'est tabel-cell table-row ....
29/03/2012, 16h20
stof

J'ai pas compris.
Peux-tu illustrer avec un exemple? Merci.
29/03/2012, 16h38
SpaceFrog

pour le display des td c'est pas block mais table-row
29/03/2012, 17h02
stof

Ah bah ça alors, j'avais jamais vu cette propriété! 8O

Impec! merci.

EDIT : c'est aussi équivalent aussi de faire '' / 'none' que 'table-row' / 'none'
Pfff...
29/03/2012, 17h34
Bovino

Il est préférable de faire '' / 'none' plutôt que 'table-row' / 'none' pour la simple raison que dans le premier cas, tu n'as pas à te soucier du display par défaut de l'élément. D'autre part, tous les navigateurs n'acceptent pas l'affectation de 'table-row'.

En revanche, il faut bien garder à l'esprit que '' va remettre la valeur par défaut, qui est celle définie dans la feuille de style CSS (ou sinon, la valeur par défaut du navigateur).
Donc si ton élément est défini en display none dans la feuille de style (balises <style> ou <link>), alors '' rétablira ce display none.