Switch div visibility (edit)

**yannick1717** · 13/12/2007, 09h24

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 :

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

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 :

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

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

**Auteur** · 13/12/2007, 09h47

bonjour,

essaye cette syntaxe :

Code html :

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

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

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

<a name="elem1"/>

elle n'est pas valide

**yannick1717** · 13/12/2007, 11h23

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 :

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

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 :

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

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

**Auteur** · 13/12/2007, 14h33

pas de span dans la balise <a>

Code html :

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

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 ?

**yannick1717** · 13/12/2007, 14h49

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

**Auteur** · 13/12/2007, 15h03

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

**yannick1717** · 13/12/2007, 15h34

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 :

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

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

**jln13** · 13/12/2007, 15h53

Salut,

j'avoue avoir testé tes deux codes et je n'ai pas ton pb... que ce soit sous ie6 ou ff2 ..

**Auteur** · 13/12/2007, 15h55

place ta balise script dans le head de ta page

**jln13** · 13/12/2007, 15h55

Oui oui je l'ai bien rajouté mais je n'ai pas de pb..

**yannick1717** · 13/12/2007, 16h01

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

**Auteur** · 13/12/2007, 16h16

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

**yannick1717** · 13/12/2007, 16h24

edit : mal lu !

Non, je n'utilise pratiquement rien dans mon JS...

**yannick1717** · 14/12/2007, 10h01

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

**SpaceFrog** · 14/12/2007, 10h08

name="blabla" =>

Code :

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

getElementsByName('blabla')[0]

id =>

Code :

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

getElementById('blabla')

**yannick1717** · 14/12/2007, 10h13

euh, je dois dire que je ne fais pas le lien entre mon erreur et ce que tu viens d'écrire...

**SpaceFrog** · 14/12/2007, 10h26

Code :

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

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

**yannick1717** · 14/12/2007, 10h33

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

**SpaceFrog** · 14/12/2007, 10h37

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

**yannick1717** · 14/12/2007, 10h52

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

Switch div visibility (edit)

JavaScript

Discussions similaires

Partager

Partager