Affichage/Masquage et comportements étranges

**stof** · 26/03/2012, 16h59

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 :

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

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.

**SpaceFrog** · 26/03/2012, 17h44

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

**stof** · 26/03/2012, 18h14

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 :

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

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
	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';
		}
	}

**Bovino** · 26/03/2012, 18h32

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é.

**stof** · 26/03/2012, 18h39

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)

**Bovino** · 26/03/2012, 18h57

Envoyé par stof

cela n'a aucun effet

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

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

**stof** · 27/03/2012, 10h37

Envoyé par Bovino

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

Ca c'est sûr

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).

**stof** · 27/03/2012, 15h59

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

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

**stof** · 28/03/2012, 11h05

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)...

**stof** · 29/03/2012, 16h35

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

**SpaceFrog** · 29/03/2012, 16h39

pour des elements de table c'est pas block

c'est tabel-cell table-row ....

**stof** · 29/03/2012, 17h20

J'ai pas compris.
Peux-tu illustrer avec un exemple? Merci.

**SpaceFrog** · 29/03/2012, 17h38

pour le display des td c'est pas block mais table-row

**stof** · 29/03/2012, 18h02

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

Impec! merci.

EDIT : c'est aussi équivalent aussi de faire '' / 'none' que 'table-row' / 'none'
Pfff...

**Bovino** · 29/03/2012, 18h34

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.

Affichage/Masquage et comportements étranges

JavaScript

Discussions similaires

Partager

Partager