DIV qui se cache mais qui ne se montre pas

**CyrilD** · 08/04/2010, 08h59

Bonjour,
je vous soumet un petit problème sur lequel je suis bloqué depuis mnt qq heures et donc je ne comprends tjs pas la signification.
Donc selon un choix dans une liste déroulante, on affiche ou non le contenu d'un div.
Mais avec le code ci-dessous, tant que je choisis une valeur dans la liste qui permet d'afficher le div, celui reste afficher, quand je choisis une valeur qui doit le cacher, il se cache mais une fois cacher, quand je choisis une valeur qui est censé relafficher, ben il reste cacher

Et le truc le plus énervant, c'est que j'ai déjà utilisé ce code pour une vingtaine d'autres cas qui marchent très bien alors que la, ben non :

dans le <head><script> :

Code :

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

1
2
3
 
function cacher_pc() { document.getElementById('pc').style.display = 'none'; }
function montrer_pc() { document.getElementById('pc').style.display = ''; }

dans le corps :

Code :

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

1
2
3
4
5
6
7
8
 
<select name="select_type_pc" on_change="if(this.value>=2) {montrer_pc();} else {cacher_pc(); }">
...
<?php
          echo '<div id="pc">';
          echo 'test';
          echo '</div>';
?>

PS : le on_change est mal écrit exprès parce que je n'arrive tjs pas à éditer correctement mes messages sur ce forum

**vermine** · 08/04/2010, 09h09

Bonjour,

Pourquoi ceci ?

Code :

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

1
2
3
4
 
on_change="..."
//au lieu de
onchange="..."

Ensuite, est-on certain que le this.value >= 2 ?

Et finalement, le vide n'est pas une valeur totalement acceptée pour le display:

Code :

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

1
2
3
4
 
style.display = 'none'; //cacher
style.display = 'block';  //montrer
style.display = 'inline'; //montrer

Possible que ce soit aussi une question de position.

**CyrilD** · 08/04/2010, 09h17

Yop vermine !

Alors pour le onchange, je l'ai expliqué dans le PS de mon premier message

Pour le test dans le onchange, il marche sans problème, j'avais fais le test de remplacer l'appel des fonctions par différents alert

Ta dernière proposition est interessante, je vais la tester

Tiens aussi avant de la tester je tiens à préciser que c'est un pb qui concerne IE8 seulement, le code de mon premier message marche tres bien sous FF

**CyrilD** · 08/04/2010, 09h24

Bon, ben verdict :

que l'on mette '', 'inline' ou 'block', cela marche avec FF, pas avec IE

**vermine** · 08/04/2010, 09h27

Ouep, je cherche en vain une page Internet qui explique bien les différences entre navigateurs et entre "langages" concernant cette propriété.
Faut déjà bien se rendre compte que des éléments XHTML sont inline ou bien block. Et que ça n'a rien avoir avec la propriété CSS display.
Et de plus, IE a (selon ses versions) des distinctions quant aux éléments qui acceptent la valeur inline ou bien block.
Mais, me semble-t-il, la valeur vide n'est pas (n'était pas ?) une norme W3C.

**CyrilD** · 08/04/2010, 09h37

Dis, tant qu'on est sur cacher et révéler des divs, j'ai une autre question ^^

Quand je mets du texte, des morceaux de formulaires (input, select...), voir les deux dans un div, j'arrive à les cacher ou à les révéler de cette manière mais quand je veux cacher ces mêmes données avec un div qui sont dans une cellule de tableau html <td>, je n'arrive plus à les cacher du tout, une idée de comment y arriver ??

ca donne ca si j'ai pas était clair

Code :

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

1
2
3
 
<div> echo 'blabla'; </div> // J'arrive à cacher le blabla
<div><td> echo 'blabla'; </td></div> // Je n'y arrive plus

**vermine** · 08/04/2010, 09h45

Euh, je ne me souviens plus.

En attendant, ce code-ci fonctionne sur IE7:

Code js :

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

1
2
3
4
5
 
<script>
function cacher_pc() { document.getElementById('pc').style.display = 'none'; }
function montrer_pc() { document.getElementById('pc').style.display = ''; }
</script>

Code html :

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

1
2
3
4
5
6
7
8
9
 
<select onchange="if(this.value>=2) {montrer_pc();} else {cacher_pc(); }">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
 
<div id="pc">test</div>

Donc au démarrage, le <div> est affiché. Quand on choisi 2, 3 ou 4, il s'affiche. Quand on choisi 1, il se cache.

**le_chomeur** · 08/04/2010, 09h46

sémantiquement parlant un td est un conteneur unique, avec comme seul parent possible un TR ou TH a aucun moment tu ne dois mettre une td dans une div

**vermine** · 08/04/2010, 09h47

Oui, le Chomeur, mais d'après cette phrase-ci, l'exemple a mal été écrit:

mais quand je veux cacher ces mêmes données avec un div qui sont dans une cellule de tableau html <td>

**CyrilD** · 08/04/2010, 09h53

Bah, c'est plus ou moins comme ca qu'est ma liste déroulante vermine mise à part que j'ai une value avec 0 et que je n'affiche pas une liste de 0,1,2,3 mais autre chose même si j'ai 0,1,2,3 en value.

Et sous IE8, ben ca marche pas

Merci le chomeur, tu m'as ouvert les yeux, les <td> peuvent aussi avoir des id='' ^^

**le_chomeur** · 08/04/2010, 09h53

ouf ^^
effectivement ...

au final , je pense qu'il nous faudrait un morceau de code plus conséquent CyrilD

**CyrilD** · 08/04/2010, 10h14

Bon, ben en retirant les divs et en mettant les "id" dans les <tr> ou les <td>, ca marche sans problème mnt sous IE et sous FF comme d'hab ^^

Merci pour votre aide en tout cas

DIV qui se cache mais qui ne se montre pas

JavaScript

Discussions similaires

Partager

Partager