Discussion :

[ThomasH]

Bonjour

J'ai un problème qui me turlupine. Mon écran est divisé en 2 zones. Une qui peut défiler (content), l'autre non (menu).
Pour faire ça j'utilise les CSS suivantes:

Code styleforall.css :

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
 
  div#menu 
   { 
   overflow: auto; 
   width: 18em; 
   position: absolute;
   right: 2em; 
   } 
 
 div#content 
   { 
   padding: 1em; 
   } 
 
   @media screen 
   { 
   body>div#menu
     { 
     position: fixed; 
     } 
   /* Very ugly fix for page anchors */ 
   ol>li#dog3 
     { 
     margin-top: -6em; 
     padding-top: 6em; 
     } 
   }

et

Code styleforIE.css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 body 
   { 
   height: 100%; 
   overflow: hidden; 
   } 
 div#content 
   { 
   width: 100%;
   height: 100%; 
   overflow: auto; 
   }

Maintenant, dans mon partie content, j'ai mis un lien, qui en javascript fait changer le display d'un div de hide à show:

Code petit script :

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
 
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
 
    if(document.layers)	   //NN4+
    {
       document.layers[szDivID].visibility = iState ? "show" : "hide";
    }
    else if(document.getElementById)	  //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById(szDivID);
        obj.style.display = iState ? "block" : "none";
    }
    else if(document.all)	// IE 4
    {
        document.all[szDivID].style.visibility = iState ? "block" : "none";
    }
 
}

Et ce que je souhaiterais faire, c'est un lien dans la partie content, qui fait apparaitre un div qui serait dans la partie menu. Or mon problème c'est que j'ai l'impression que ce truc ne fonctionne QUE si mon div caché est dans le content, et pas dans le menu.

Code La page index :

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

1
2
3
4
5
6
7
8
9
10
 
 
<div id="content">
<a href="#" onclick="toggleBox('div-c',1);" >Apparais !</a>
</div>
 
 
<div id="menuD">
<div><div id="div-c" style="display:none;">Coucou je suis là!</div></div>
</div>

Le DIV est bien présent. Si je mets sa propriété display à block dès le départ, je le vois il est là. Et quand je suis à none, il est dans la source aussi. Mais On dirait que dès que ce div est placé dans le div de menu, il est innateignable par le lien toggleBox...

Qu'est ce que je fais mal selon vous ?

Petites précisions: avant je définissais la position fixed du div directement dans le <div id="div-c"> avec un style absolute (bizarre d'ailleurs en y pensant!). Ca fonctionnait bien sous IE, mais pas sous FF, le div n'était plus du tout fixe par rapport à l'écran (visible si on mets beaucoup de texte dans content par exemple, et pas avec l'exemple tout simple ci dessus)... D'où mon reflexe de définir ca avec les CSS ci dessus (menu).

Ainsi les positions sont bien fixées sous IE et FireFox, ça c'est chouette mais mon toggleBox lui ne fonctionne plus...

HELPppppp, je m'arrache les cheveux

Thomas

[CR_Gio]

lu,

http://club.developpez.com/regles/#L4.7

[ThomasH]

Bon j'ai changé le titre, précisé un peu plus. Mais je vois pas trop quoi dire de plus, j'ai essayé d'épurer mon code au maximum... Si tu as d'autres conseils je suis preneur.

[ThomasH]

En inversant les deux div, ça fonctionne...!

Code :

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

1
2
3
4
5
6
7
8
 
<div id="content">
<a href="#" onclick="toggleBox('div-c',1);" >Apparais !</a>
</div>
 
<div><div id="div-c" style="display:none;">
<div id="menuD">Coucou je suis là!</div></div>
</div>

[ThomasH]

Faux espoir, ça ne fonctionne toujours pas sous FireFox ...
Vraiment personne n'a d'idées sur ce problème :

Sous FireFox, je veux changer une propriété de display (none vers block) d'un div invisible depuis un lien, à l'aide d'une petite fonction Javascript.

Le lien est dans un DIV content. Et le div invisible est dans un DIV (ou contient un DIV) de type fixe.

Soit FireFox ne laisse pas le div être atteint par le lien Javascript. Soit (en inversant les DIV), firefox ne fixe plus le DIV caché par rapport à la page (vu qu'il est contenu dans un div pas fixe, donc pas héritage...).

Vraiment je vois pas.

[ThomasH]

Bel et bien enfin résolu, en définissant

Code styleforall.css :

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
 
div.menu 
   { 
   overflow: auto; 
   width: 18em; 
   position: absolute;
   right: 2em; 
   display: none;
   } 
 
 div#content 
   { 
   padding: 1em; 
   } 
 
   @media screen 
   { 
   body>div.menu
     { 
     position: fixed; 
     } 
   /* Very ugly fix for page anchors */ 
   ol>li#dog3 
     { 
     margin-top: -6em; 
     padding-top: 6em; 
     } 
   }

et

Code index.php :

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

1
2
3
4
5
6
 
<div id="content">
<a href="#" onclick="toggleBox('div-c',1);" >Apparais !</a>
</div>
 
<div id="div-c" class="menu">Coucou je suis là!</div></div>

Et ça fonctionne sous IE et FF, même si il y a plusieurs div avec des ID différents, mais de même classe menu. (donc qui se recouvrent potentiellement)