Switch div visibility (edit)

Version imprimable

Bonjour,

J'ai une petite fonction javascript qui me permet de switch la visibilité d'une div.
A l'initialisation les div sont en 'style="display:none" '.

Mon problème est que, une fois la page chargée, lorsque ma fonction est appelée la première fois, c'est comme s'il appelait ma fonction deux fois de suite.

La div apparait un quart de seconde, et ensuite se remet en non visible.
Une fois qu'une div a eu ce problème, après ça fonctionne pour celle la.
Si je recharge la page, le problème revient biensur.
Mais ce n'est vraiment qu'au premier clic, pour chaque div...

Je fais ça dans le cadre du travail, et je ne peut tester uniquement sur internet explorer 6, le problème vient peut être de la...

en gros je travaille comme ça :
Code:

1 2 3 4 5 6 <a name="elem1"/> <a href="#elem1" onclick="toggleDiv('elem1.div')">Switch</a> <div name="elem1.div" style="display:none"> ... </div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function toggleDiv(divname) { var d = document.getElementById(divname); if (d.style.display == 'block') { d.style.display = 'none'; } else { d.style.display = 'block'; } }
Merci

Yannick

13/12/2007, 09h47
Auteur
bonjour,

essaye cette syntaxe :
Code:

1 2 3 4 5 <a name="elem1" href="#elem1" onclick="toggleDiv('elem1_div')">Switch</a> <div id="elem1_div" style="display:none"> ... </div>
dans ton code JS tu utilises getElementById() il faut donc que ton élément posède l'attribut id (et pas name). De plus, je ne mettrais pas de point dans la valeur de l'id.

Quant à la syntaxe :

Code:

<a name="elem1"/>

elle n'est pas valide
13/12/2007, 11h23
yannick1717
Merci de la réponse,

Pour le le lien vers une anchor, c'est vrai que ta méthode est plus propre.
Je ne pense pas que l'erreur venait du ".".
L'attribut id de la div, je m'étais en fait trompé en écrivant le message, je l'utilisais...

J'ai fais quelques modifs, et en fait le problème que je décris ne se manifeste qu'une seule fois pour toute la page, et non une fois pour chaque div comme je le disais.

Donc voila, dans mon html maintenant j'ai ceci :
Cette partie ci ne génère pas le problème
Code:

1 2 3 4 <a name="Network" href="#Network" onclick="toggleDiv('Network_div')">Network</a> <div id="Network_div" style="display:none"> </div>
Celle ci par contre....
Code:

1 2 3 4 5 6 <a name="Network" href="#Network" onclick="toggleDiv('Network_div')"> <span style="color: #DD0000;">Network</span> </a> <div id="Network_div" class="mrs" style="display:none"> </div>
A part le span et l'attribut class, rien ne change, et l'erreur ne vient pas de la.

Merci

pas de span dans la balise <a> ;)
Code:

1 2 3 <a style="color: #DD0000;" name="Network" href="#Network" onclick="toggleDiv('Network_div')">Network </a>
est-ce que les id dans ta page sont uniques ?

13/12/2007, 14h49
yannick1717

oui oui, ils sont uniques...

D'ailleurs, ça fonctionne bien, a partir du moment ou l'erreur s'est déclenchée une fois (donc double toggle : none -> block & block -> none)

Après ça, tout va bien, c'est ce que je comprends pas, le problème doit être au niveau du chargement je suppose.

J'ai essayé sans le span, ça revient au même
13/12/2007, 15h03
Auteur

ton problème est curieux, tu peux me montrer le code de ta page ?

D'accord,

Les 2 html que j'insere sont générés par des JSP. (j'ai dépollué pas mal déjà)

Fonctionne bien

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml"><head>
    <base href="http://localhost:7001/MonitoringWeb/testselection.jsp">
    <title>Monitoring</title>
    <link href="/MonitoringWeb/resources/css/style.css" type="text/css" rel="stylesheet"/>
  </head>
  <body style="margin:0">
  <h1>SPF Monitor</h1>
    <br>
     <p>
        <script type="text/javascript" language="JavaScript" src="/MonitoringWeb/resources/js/utils.js">
        </script>
        <h2>Execute Tests</h2>
 
        <h3>Monitors</h3>
 
        <form action="executeSelection.do" method="post">
                    <a name="Weblogic" href="#Weblogic" onclick="toggleDiv('Weblogic_div')">Weblogic</a>
                        <div id="Weblogic_div" style="display:none">
                            <ul>
                                    <li>
                                        <input type="checkbox" name="Weblogic.wlping_front_1" checked="false"/>wlping_front_1
                                    </li>
                            </ul>    
                        </div>
                        <br>    
        <input type="submit" value="Run"/><br><br>
 
        Enter email addresses if you want that results will be notify, format : mail1;mail2;...<br>
        <input type="text" name="mailreceivers" size="80">
        </form>
     </p>
    <br>
    <p>
    <a href="/MonitoringWeb/index.jsp">home</a>
</p>
  </body></html>

Fonctionne pas bien...

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml"><head>
    <base href="http://localhost:7001/MonitoringWeb/report.jsp">
    <title>Monitoring</title>
    <link href="/MonitoringWeb/resources/css/style.css" type="text/css" rel="stylesheet"/>
  </head>
  <body style="margin:0">
  <h1>SPF Monitor</h1>
    <br>
     <p>
        <script type="text/javascript" language="JavaScript" src="/MonitoringWeb/resources/js/utils.js">
        </script>
        <h2>Report</h2>
        <h3>Monitors</h3>
                    <a name="Weblogic" href="#Weblogic" onclick="toggleDiv('Weblogic_div')">
                    Weblogic
                    </a>
                    <br>
                    <div id="Weblogic_div" class="mrs" style="display:none">
                            <table border="0">     
                                <tr style="font-size: 80%">
                                    <td width="200">wlping_front_1</td>
                                    <td width="200">13-12-07 - 15h31</td>
                                    <td align="center" width="75" bgcolor="#4AA02C"><span style="color: #FFFFFF;"><font size="3">success</font></span></td>
                                    <td></td>  
                                </tr>
                            </table>
                    </div>
                    <br>
        </ul>
    <br>
    <p>
    <a href="/MonitoringWeb/index.jsp">home</a>
</p>
  </body></html>

13/12/2007, 15h53
jln13

Salut,

j'avoue avoir testé tes deux codes et je n'ai pas ton pb... que ce soit sous ie6 ou ff2 ..
13/12/2007, 15h55
Auteur

place ta balise script dans le head de ta page ;)
13/12/2007, 15h55
jln13

Oui oui je l'ai bien rajouté mais je n'ai pas de pb..
13/12/2007, 16h01
yannick1717

bin zut alors...

Pour la balise script, c'est car la page est générée par template, ou header et footer sont communs a tous, et j'aimerais éviter d'inclure les scripts partout.

J'ai tout de même essayé en incluant les scripts dans le header, mais sans succès.

grrr... ça doit venir d'ici alors.

Mais, le plus fou c'est quand même que la première fonctionne bien
13/12/2007, 16h16
Auteur

dans tes variables ou les noms de fonctions, tu n'utilises pas de mots clefs JS (do, for, if, var, div, src, iframe, etc.)?
13/12/2007, 16h24
yannick1717

edit : mal lu !

Non, je n'utilise pratiquement rien dans mon JS...
14/12/2007, 10h01
yannick1717

Bonjour

un petit up juste pour la forme.

Le titre est un peu plus parlant, donc si quelqu'un avais déjà rencontré mon problème, ça serait excellent !

merci et bonne journée
14/12/2007, 10h08
SpaceFrog

name="blabla" =>

Code:

getElementsByName('blabla')[0]

id =>

Code:

getElementById('blabla')
14/12/2007, 10h13
yannick1717

euh, je dois dire que je ne fais pas le lien entre mon erreur et ce que tu viens d'écrire...
14/12/2007, 10h26
SpaceFrog
Code:

1 2 3 4 5 <a name="elem1"/> <a href="#elem1" onclick="toggleDiv('elem1.div')">Switch</a> <div name="elem1.div" style="display:none"> ... </div>
si tu mets un name à l'objet ... appelles le par son name ...
si tu lui mets un id appelles le par l'id ...

et puis des points dans un name ou un id :roll:
14/12/2007, 10h33
yannick1717

ah oui, mais on en avait discuter avec Auteur de ça, le . a été remplacé par un _, et le name, je m'étais trompé en l'écrivant dans ce message, j'avais id dans mon projet.

D'ailleurs le "." ne pose pas de problème non plus, enfin c'est pas très propre, mais il me fallait un séparateur, quelque soit le caractère.

Je ne vais pas l'éditer, sinon les réponses sembleront insensée.

Merci quand même...
14/12/2007, 10h37
SpaceFrog

il y a un autre post récent qui parle de basculer le visiblity ça rejoint un peu ton problème ...

http://www.developpez.net/forums/sho...d.php?t=458856
14/12/2007, 10h52
yannick1717

en effet, ça n'en est pas loin,

but... c'est pas encore ça.

moi ce qui me gène c'est que le même script fonctionne d'un coté mais pas de l'autre.

et chez jln13, ça fonctionne dans les deux cas...

Je vais laisser cette erreur pour l'instant, tant pis.

Merci quand même,

Bye