incompatibilité de navigateurs?

**marcel marie** · 09/03/2009, 09h50

Bonjour,
Je suis débutant en javascript et pas très bon ailleurs non plus !!
Seulement je m'applique la maxime "aide-toi le ciel t'aidera" et je suis breton donc têtu ... mais le ciel était gris ...
Au sortir d'une discussion XHTML/CSS un ami de notre sympathique club m'a fourni le script suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function hideLayer(sName) {
   document.getElementById(sName).style.visibility = "hidden";
}
</script>
<div id="popinfo">
  <p id="ferme">
    <a href="javascript:hideLayer('popinfo');">Fermer cette fenêtre <span>x</span></a>
  </p>
  <div id="veut">
    <h3>Information</h3>
    <p>Aujourd'hui, le résultat n'est pas satisfaisant.<br/>
    Mais il y a peut-être mieux. Faites une recherche.</p>
  </div>
</div>

On peut voir le résultat sur http://touteladanse.com/essais/page_2.htm .

SOUS IE7 ça ne fonctionne pas de façon satisfaisante puisque le premier clic fait passer le texte "fermer cette fenêtre" à gauche de la fenêtre et il faut un second clic pour supprimer totalement la fenêtre.
SOUS MOZILLA FIREFOX c'est BON.

J'ai trouvé une autre alternative d'écriture :

Code :

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

1
2
function hideLayer(sName) {
  document.getElementById(sName).style.display="none";

J'obtiens ainsi les mêmes résultats sur les deux navigateurs.
Y a-t-il une explication? Avec Javascript les navigateurs sont-ils toujours aussi facétieux?
Je vous remercie.
Marcel Marie

**binouzzz19** · 09/03/2009, 10h01

Salut,

Que je te rassure (ou pas d'ailleurs

), tant que tu auras du développement Web à faire, tu seras souvent confronté à ce genre de problème, et si ce n'est pas une incompatibilité entre IE 7 et Firefox, ça arrivera avec IE 6. Et ce pas seulement avec du javascript. Rien que des balises html ou du code CSS ne sera pas interprété de la même manière par les navigateurs. Et ça énerve beaucoup de développeurs quand le client demande à ce que le site développé pour Firefox doive fonctionner maintenant sur IE (en général 6 & 7), car on rencontre souvent ce type de problème.

Cordialement.

**le_chomeur** · 09/03/2009, 10h02

visibility et display n'agissent pas de la même façon

:

- visibility : affiche ou non un élément ( on peut apparenté ça a un élément totalement transparent ! )

- display : Masque ou non un élément ( influ sur le flux html , display:none , retire l'élément en gros

)

**Auteur** · 09/03/2009, 11h15

bonjour,

si tu utilisais l'événement onclick sur ta balise <p> plutôt qu'une pseudo URL pour appeler ta fonction JS ?

Ensuite regarde si en temporisant l'appel ça ne marche pas mieux :

Code :

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

1
2
3
4
5
 
function hideLayer(sName) 
{
   setTimeout(function(){document.getElementById(sName).style.visibility = "hidden"},"200");
}

**marcel marie** · 09/03/2009, 13h17

Merci pour vos réponses.
La "frimousse sur le forum" de notre lyonnaise n'est pas plus enjouée que son message : fataliste? devant le comportement des navigateurs !!! Ah, si au moins j'étais encore un gland !!!! mon long passage à Lyon serait plus riche

Notre normand a une réponse qui est du genre ni OUI ni NON, et qui ne donne pas un choix franc et massif. Dommage.

J'ai testé ce que me propose AUTEUR. Effectivement ça marche quant à l'effet clic, MAIS la fenêtre n'est plus positionnée du tout et se place en tête de la page.

Je vais faire contre mauvaise fortune bon coeur et solliciter de votre part le script qui va me permettre de faire exécuter une action soit par IEx, soit par Firefox. (tant pis pour les autres navigateurs !). Je l'ai dit, je débute, mais si ça vous prend du temps, laissez tomber.

De toute façon je vous remercie de prendre ainsi de votre temps pour LES AUTRES.
Cordialement.
M.M.

**binouzzz19** · 09/03/2009, 14h00

La "frimousse sur le forum" de notre lyonnaise n'est pas plus enjouée que son message : fataliste? devant le comportement des navigateurs !!! Ah, si au moins j'étais encore un gland !!!! mon long passage à Lyon serait plus riche

Je suis navré que tu m'aies pris pour une fille :'( mais je ne t'en veux pas, c'est vrai qu'une photo comme celle-ci déclenche automatiquement une irrésistible envie de ... je sais pas d'ailleurs ^^ ! Concernant ton problème, je ne peux pas y regarder cette après-midi, trop de boulot ... pfffiouuuu

Code :

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

1
2
function hideLayer(sName) {
  document.getElementById(sName).style.display="none";

Mais si tu as trouvé une alternative, pourquoi ne pas la garder ?

Cordialement.

**le_chomeur** · 09/03/2009, 14h19

De mon coté j'expliquais CLAIREMENT

la différence entre les deux , après selon ta problématique la 2eme solution ( donc le display none ) corespond parfaitement à tes attentes ^^

**Auteur** · 09/03/2009, 14h34

Envoyé par marcel marie

Effectivement ça marche quant à l'effet clic, MAIS la fenêtre n'est plus positionnée du tout et se place en tête de la page.

alors là je ne vois pas en quoi remplacer un lien par un onclick change la position de la fenêtre

Tu appliques une feuille de style particulière sur ton lien ou le paragraphe ?

**marcel marie** · 09/03/2009, 19h17

Je vous prie de m'excuser à la fois de m'être mal exprimé et d'une petite étourderie (un // de commentaire mal placé a ajouté une nouvelle perturbation : la fenêtre non positionnée à l'endroit voulu et se plaçant en tête de page !!!!)

Pour la fonction hideLayer(sName), les trois façons de faire donnent le même résultat :
MAUVAIS sur IE7 : le texte "Fermer cette fenêtre" s'affiche à droite en haut, un premier clic l'envoie en haut à gauche et il faut un second clic pour effacer la fenêtre.

BON sur MOZILLA FIREFOX.

Code :

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

document.getElementById(sName).style.visibility = "hidden";

Code :

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

document.getElementById(sName).style.display="none";

ou (celui actuellement sur la page web déjà mentionnée.)

Code :

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

1
2
3
function hideLayer(sName) {
setTimeout(function(){document.getElementById(sName).style.visibility = "hidden"},"200");
}

Je vais considérer que le navigateur est en cause, mais c'est toujours agaçant !!!
Bonne soirée et MERCI pour tout.
Cordialement.
M.M.

**Auteur** · 09/03/2009, 19h34

Il n'y a priori aucune raison que lors du clic sur ton lien le message se déplace vers la gauche.

Peut-on avoir un peu plus de code (CSS+HTML) ?

**marcel marie** · 10/03/2009, 17h24

à demain donc pour mise à votre disposition des listes "en cause"!!. Merci.
M.M.M.

**marcel marie** · 11/03/2009, 07h14

Bonjour,
Voci comme prévu les deux scripts qui donnent souci ensemble.
On peut se rendre compte de l'effet sur http://touteladanse.com/essais/page_3.htm
Je constate que c'est BON avec Mozilla mais incorrect avec IE7.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
  <meta http-equiv="Content-Language" content="fr"/>
  <title>Test de positionnement d'une fenêtre.</title>
  <meta name="Keywords" content="danse" lang="fr"/>
   <link rel="stylesheet" media="screen" type="text/css" title="Mon style Essai 3" href="style_3.css" />
</head>
 
 
<body>
 
<script type="text/javascript">
//les trois alternatives essayées sont ci-dessous
//  document.getElementById(sName).style.visibility = "hidden";
//document.getElementById(sName).style.display="none";
//setTimeout(function(){document.getElementById(sName).style.visibility = "hidden"},"200");
function hideLayer(sName) {
setTimeout(function(){document.getElementById(sName).style.visibility = "hidden"},"200");
}
</script>
<div id="popinfo">
  <p id="ferme">
    <a href="javascript:hideLayer('popinfo');">Fermer cette fenêtre <span>x</span></a>
  </p>
  <div id="veut">
    <h3>Information</h3>
    <p>Aujourd'hui, pas terrible !!!. Faites une recherche.</p>
  </div>
</div>
 
<h1>BIENVENUE sur VOTRE SITE, vous les danseurs et danseuses passionnés de danse de salon.</h1>
 
<p> A Très Bientôt. Merci.</p>
</body>
 
</html>

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
h1
{
text-align : center;
color: blue;
}
body
{
background-color: yellow;
}
p
{
font-weight : bold;
}
a:active
{
background-color: lime;
}
a:hover
{
color: red;
font-weight: bold;
}
#popinfo {
  position: absolute;
  top: 420px;
  left: 400px;
/*  width: 400px;  = largeur
  height: 400px; = hauteur */
  font-family : Arial, Helvetica, sans-serif;
  background-color : #fff;
  border : 4px double #000;
  }
#ferme {
  margin : 0;
  text-align : right;
  padding : .2em;
  background-color : #0131b4;
  border-bottom : 1px solid #fff;
  }
#ferme a {
  color : #fff;
  }
#ferme a:hover {
  color : #f00;
  }
#ferme a span {
  padding : 2px 6px;
  color : #f00;
  background-color : #fff;
  }
#veut {
  margin : 0;
  text-align : center;
  color : #e0d;
  background-color : #5f4;
  overflow : hidden;
  }
#veut p {
  margin : .5em 1em;
  }

Je vous remercie de regarder où pourrait être l'anomalie, mais n'y passer pas trop de temps.
A bientôt.
Marcel Marie

incompatibilité de navigateurs?

JavaScript

Discussions similaires

Partager

Partager