Display, Visibility.. fâchés avec IE ?

Version imprimable

Bonjour,

Je suis un débutant en javascript et, naïf que je suis, je me heurte à de nombreux soucis de compatibilité entre FF et IE.
Le problème qui me pourrit la vie actuellement concerne le masquage d'éléments. Parrait-il que c'est déprecié de de déclarer des elem en

Code:

style='display:none'

mais ma malheureuse page n'a pas vocation à être visitée et encore moins référencée.

J'ai donc ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <input type="checkbox" onChange="showElem('p-auteur')"> Bla Bla </input> .... ----------------------------------------------- function contenu(){ document.write("<p id='p_auteur'>du bordel dynamique calculé avec JS</p>"); } function showElem(id){ var elem = document.getElementById(id); if(elem.style.display == "none"){ elem.style.display = "block"; }else{ elem.style.display = "none"; } }
Sous FF, niquel...

Sous IE c'est hyper chiasseux comme affichage. C'est executé, mais c'est comme si il manquait un "repaint()" (pour causer Java). Quand je clique dans la zone parente l'elem paresseux s'affiche ou se cache (en differé donc).
Cependant quand les elems à cacher sont déclarer directement dans le HTML ça se passe bien, même pour IE j'entend...
Enfin presque, il balance le tout après un div déclaré pourtant comme dernier élément...

Enfin quand je dis IE, je n'ai testé que sur un browser basé sur IE : "Avant Browser". Mais je doute que ça change qqc sous IE pur et dur ?

bonjour,

les attributs visibility et display sont différents !! Et l'utilisation de display n'est pas dépréciée, loin de là !

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function showElem(id)
{
        var elem = document.getElementById(id);
        if(elem.style.display == "none")
    {
                elem.style.display = "block";
        }
    else
    {
                elem.style.display = "none";
        }
}
 
//-->
</script>
 
</head>
 
<body>
<input type="checkbox" onclick="showElem('p_auteur')" />Bla Bla
 
<p id='p_auteur' style="display: none">du bordel dynamique calculé avec JS</p>
 
 
</body>
 
</html>

L'input n'a pas de balise de fermeture.
Ne confonds pas _ et - (p-auteur et p_auteur) ;)

19/05/2007, 16h14
Syrus

Quand je dis que je débute, je ne voulais pas dire à ce point :).

J'ai bien compris que visibility et display sont différents, mais le fait est que l'affichage sous IE souffre du même soucis dans les deux cas. A savoir donc qu'il faut cliquer dans la zone censée s'être modifiée pour voir les modifications s'oppérer (masquer/afficher).

Mon code est propre, c'est juste une erreur de recopiage pour le "-" et "_". Je rappelle que sous FF il tourne parfaitement.

Les balises inputs étaient fermées par un </input>, et non un <input ../>. Je suis passé en mode condensé pour la peine histoire de.

Apparement le soucis c'est que créer des éléments par un

Code:

document.write("<p style='display:none'>plouf plouf</p>");

IE n'aime pas quand je veux modifier le display apparement. FF lui ça le gène pas.

Personne n'a jamais eut ce pb ? Mes élements doivent ils forcément être présents par défaut dans le HTML (même vide) pour que IE fonctionne correctement ?

OU plus simple y a t-il une fonction, une feinte, adapté à IE pour "rafraichir" une zone ? Car, je le rappelle, quand je clique dans le div contenant les élements dynamique après coup, les modifications d'affichage s'opèrent sous IE.

Sous IE l'événement onchange ne fonctionne pas sur les checkbox. Essaye ceci :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function showElem(id)
{
        var elem = document.getElementById(id);
        if(elem.style.display == "none")
    {
                elem.style.display = "block";
        }
    else
    {
                elem.style.display = "none";
        }
}
 
//-->
</script>
 
</head>
 
<body>
<input type="checkbox" onclick="showElem('p_auteur')"> Bla Bla
 
 
<script type="text/javascript">
<!--
document.write("<p style='display: none' id='p_auteur'>plouf plouf</p>");
 
//-->
</script>
 
 
</body>
 
</html>

20/05/2007, 18h00
Syrus

Alors là un grand merci, je me suis trituré la tête dans tout les sens alors que c'était aussi bête que ça. Sauf qu'il fallait le savoir -_-.