Retour arrière => Refresh

**laurentSc** · 04/09/2013, 22h39

Excellent les jeux de mots ! Y caser ton nom est plus dûr...Trouve pas...Par contre, si je simplifie énormément la fonction ça déroule ou replie encore sur le click et comprends pas pourquoi :

Code :

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

1
2
3
4
function expand(id){
  var Item = document.getElementById(id);  
  Item.style.display =  (Item.offsetWidth == 0) ? "block" : "none"; 
}

vu qu'on écrit jamais le hash...

Bon, +1 pour votre patience...

Invité · 04/09/2013, 23h58

Rappelle-nous la question du début ?...
...celle qui nous a amenés à penser au hash.
(à consommer avec modérateur, bien entendu)

Une bonne nuit de sommeil devrait t'éclaircir les idées...
D'ailleurs, on a tous besoin de se détendre...

N.B. jreaux62 : j'irai haut / j'irai au 62

**laurentSc** · 05/09/2013, 10h55

Oui, c'est vrai ; rien à voir avec la question initiale, mais je voudrais quand même comprendre : apparemment, le fait de changer le display change aussi Item.offsetWidth ; n'est-ce pas ? Et pourtant, quand je clique, ça change pas l'URL : rien après le #...

**SylvainPV** · 05/09/2013, 11h21

Item.offsetWidth est la taille de l'objet. Si l'élément est caché (display:none), sa taille vaudra logiquement zéro, d'où le test pour basculer entre l'état visible et invisible. On pourrait remplacer cette ligne par :

Code :

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

Item.style.display =  (Item.style.display === "none") ? "block" : "none";

Si on s'arrête là, on a jamais parlé d'URL ou de hash... Aucune raison que le navigateur change de page tout seul. Maintenant on en arrive à ta question initiale, comment persister l'état entre les pages. Et là ma suggestion a été de changer dans ta fonction expand le hash dans l'URL et le lire au chargement de la page. Je ne vais pas rééxpliquer une énième fois, tu as déjà le code commenté en X versions différentes.

**laurentSc** · 05/09/2013, 12h06

En effet, pas besoin de redire ce que tu as déjà dit ! Et cette fois, j'ai tout compris

**laurentSc** · 06/09/2013, 14h14

Encore une difficulté ! Maintenant que ça marche bien pour un item du menu, je voulais en rajouter un 2e et ça veut pas : tout reste affiché tout le temps (et quand je clique quand même sur un des 2 items, "erreur sur la page" ; à l'aide de nouveau.

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 expand(id, expanded){
  var Item = document.getElementById(id); 
   if(expanded=== undefined){
    expanded = (Item.offsetWidth == 0); //toggle expanded state
  }
 
  Item.style.display =   expanded ? "block" : "none"; 
  // modification du href et texte du lien
  document.getElementById(id+'Bt').href =   expanded ? "#expanded" : "#";
}
function init() {
   expand("User_Centric", window.location.hash==="#expanded");*
   expand("OCP_Processes", window.location.hash==="#expanded");  
}

Code html :

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
  <body onload="init();">
 <a id="User_CentricBt" href="#" onclick="expand('User_Centric');">User
      Centric</a><br>
    <div id="User_Centric">
      <table>
        <tbody>
...       
        </tbody>
      </table>
    </div>
    <a id="OCP_ProcessesBt" href="#" onclick="expand('OCP_Processes');">OCP
      Processes</a>
    <div id="OCP_Processes">
      <table>
        <tbody>
          <tr>
            <td width="50px">&nbsp;</td>
            <td><a href="http://---">OCP
                Foundation</a></td>
            <td width="50px">&nbsp;</td>
            <td><a href="http://---">Performance
                Improvement</a></td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td width="50px">&nbsp;</td>
            <td>&nbsp;</td>
            <td width="50px">&nbsp;</td>
            <td><a href="http://---">0ffer
                &amp; Technology Management (OTM)</a></td>
            <td>&nbsp;</td>
          </tr>
        </tbody>
      </table>
    </div>

**Bovino** · 06/09/2013, 14h24

Il n'y a rien qui te dérange à la fin de la ligne 12 du code JavaScript ?
Tu n'as toujours pas activé de console JavaScript pour détecter les erreurs ?
Bref, tu ne sais toujours pas faire le débogage minimal ?

**laurentSc** · 06/09/2013, 14h59

Oui, en effet, c'était moyen ! Mais maintenant que j'ai corrigé, autre chose : quand je suis un lien, puis que je fais "retour arrière", le hash vaut "expanded", donc tous les items sont étirés, alors qu'au départ, il y en avait un seul ; comment garder l'information de celui qui était étiré ? (en PHP, j'aurais des idées (explode...) mais en js...)

Autrement, le debug js, sais pas faire (sais pas ouvrir une console js...)

**SylvainPV** · 06/09/2013, 15h20

Envoyé par laurentSc

Autrement, le debug js, sais pas faire (sais pas ouvrir une console js...)

Il aurait fallu commencer par là ! C'est la base pour debugger.
Chrome : https://developers.google.com/chrome...r-tools/?hl=fr
Firefox: https://getfirebug.com/

**Bovino** · 06/09/2013, 15h29

Voir aussi le must read : Maîtriser l'indispensable extension Firebug pour Firefox...

**laurentSc** · 06/09/2013, 15h55

Merci pour la lecture conseillée ; d'ailleurs, en disant "sais pas ouvrir une console", j'exagérais un peu car j'ai déjà installé Firebug et sais l'ouvrir, mais ce qui est vrai, c'est que je sais pas m'en servir...

Par contre, vous répondez pas à la 1ère partie de ma question.

**NoSmoking** · 06/09/2013, 18h12

Par contre, vous répondez pas à la 1ère partie de ma question.

de quelle 1ère question parles tu, je suis un peu perdu

**laurentSc** · 06/09/2013, 21h22

de celà :

Mais maintenant que j'ai corrigé, autre chose : quand je suis un lien, puis que je fais "retour arrière", le hash vaut "expanded", donc tous les items sont étirés, alors qu'au départ, il y en avait un seul ; comment garder l'information de celui qui était étiré ? (en PHP, j'aurais des idées (explode...) mais en js...)

**NoSmoking** · 07/09/2013, 10h37

comment garder l'information de celui qui était étiré ?

Supposons que tu ais une page avec 3 onglets, cela revient au même, Accueil, Produits et Contact et que par défaut l'onglet Accueil soit ouvert.

Avec les adresses suivantes
- nom_du_site/index.html => onglet Accueil ouvert
- nom_du_site/index.html#accueil => onglet Accueil ouvert
- nom_du_site/index.html#produits => onglet Produits ouvert
- nom_du_site/index.html#contact => onglet Contact ouvert

Il te suffit au chargement de la page de récupérer le location.hash, SI location.hash=='' ALORS location.hash='#accueil' et dans ta function expand tu rends visible l'onglet correspondant Accueil, Produits ou encore Contact en lui affectant un display:'block'.

Mais je redoute pour toi qu'il faille que tu revois l'approche de ta function expand...

**laurentSc** · 07/09/2013, 15h57

fier de moi :

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 expand(id, nameitem,expanded){
  var Item = document.getElementById(id); 
   if(expanded=== undefined){
    expanded = (Item.offsetWidth == 0); //toggle expanded state
  }
 
  Item.style.display =   expanded ? "block" : "none"; 
  // modification du href et texte du lien
  document.getElementById(id+'Bt').href =   expanded ? "#"+nameitem : "#";
}
function init() {
   expand("User_Centric", window.location.hash==="#User_Centric");
   expand("OCP_Processes", window.location.hash==="#OCP_Processes");  
}

Code html :

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
 <body onload="init();">
 <a id="User_CentricBt" href="#" onclick="expand('User_Centric','User_Centric');">User
      Centric</a><br>
    <div id="User_Centric">
      <table>
        <tbody>
...       
        </tbody>
      </table>
    </div>
    <a id="OCP_ProcessesBt" href="#" onclick="expand('OCP_Processes','OCP_Processes');">OCP
      Processes</a>
    <div id="OCP_Processes">
      <table>
        <tbody>
          <tr>
            <td width="50px">&nbsp;</td>
            <td><a href="http://---">OCP
                Foundation</a></td>
            <td width="50px">&nbsp;</td>
            <td><a href="http://---">Performance
                Improvement</a></td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td width="50px">&nbsp;</td>
            <td>&nbsp;</td>
            <td width="50px">&nbsp;</td>
            <td><a href="http://---">0ffer
                &amp; Technology Management (OTM)</a></td>
            <td>&nbsp;</td>
          </tr>
        </tbody>
      </table>
    </div>

**laurentSc** · 11/09/2013, 23h22

Bonsoir,

j'essaie de mixer le produit de 2 discussions en une seule ; j'ai d'abord essayé mais sans succès.
La première consistait à faire un expand/collapse avec mémorisation du retour arrière :http://www.developpez.net/forums/d13...ere-gt-refresh et la seconde à faire une mise en page propre, à base de liste : http://www.developpez.net/forums/d13...s/#post7475153. Ce que je souhaite maintenant, c'est avoir cette mise en page propre et lui appliquer la fonction expand/collapse ; voici mon essai de code infructueux qui marie les 2 :

Code html :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
   <div id="lev0">
      <ul class="menu">
        <li><a id="lev0Bt" href="#" onclick="expand('lev0','lev0');">lev0</a>
          <ul>
            <li>lev1
              <ul>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
              </ul>
            </li>
            <li>lev1</li>
            <li>lev1
              <ul>
                <li>lev2</li>
                <li>lev2</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="lev02">
      <ul class="menu">
        <li><a id="lev02Bt" href="#" onclick="expand('lev02','lev02');">lev02</a>
          <ul>
            <li>lev1
              <ul>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
              </ul>
            </li>
            <li>lev1</li>
            <li>lev1
              <ul>
                <li>lev2 </li>
                <li>lev2</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div>
      <ul class="menu clear">
        <li>lev0
          <ul>
            <li>lev1
              <ul>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
              </ul>
            </li>
            <li>lev1</li>
            <li>lev1
              <ul>
                <li>lev2 </li>
                <li>lev2</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div>
      <ul class="menu">
        <li>lev0
          <ul>
            <li>lev1
              <ul>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
              </ul>
            </li>
            <li>lev1</li>
            <li>lev1
              <ul>
                <li>lev2 </li>
                <li>lev2</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
li{
   list-style: none;
}
.menu{
   float:left;
}
.clear   list-style: none;
}
.menu{
   float:left;
}
.clear{
        clear:left;
      }

Code js :

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
             <script>
function expand(id,nameitem,expanded){
  var Item = document.getElementById(id); 
  if(expanded=== undefined){
    expanded = (Item.offsetWidth == 0) ; //toggle expanded state
  }
 
  Item.style.display =  expanded ? "block" : "none"; 
 
  // modification du href et texte du lien
  document.getElementById(id+'Bt').href =   expanded ? "#"+nameitem : "#";
.
} 
function init() {
  expand("lev0","lev0", window.location.hash=="#lev0");
  expand("lev02","lev02", window.location.hash=="#lev02");  
}
</script>

En gros ce qui se passe : "lev0" n'est pas "collapsé" à l'init ; seulement "lev02" ; de plus, il y a un petit décalage vertical entre "lev0" et "lev02" ; enfin, quand on "collapse" une colonne, son intitulé, qui lui reste visible (ici "lev0" et "lev02") ne devrait pas bouger horizontalement, alors que si je "collapse" "lev0", l'intitulé "lev02"vient se coller à "lev0".

**SylvainPV** · 12/09/2013, 09h56

Voilà ce que j'ai après quelques modifs : http://jsfiddle.net/KGKee/

"lev0" n'est pas "collapsé" à l'init ; seulement "lev02"
--> ça dépend de ton hash de départ, mais si tu veux forcer l'état sans le hash il faut que ton sous-menu soit caché directement avec le style de départ

de plus, il y a un petit décalage vertical entre "lev0" et "lev02" ; enfin, quand on "collapse" une colonne, son intitulé, qui lui reste visible (ici "lev0" et "lev02") ne devrait pas bouger horizontalement, alors que si je "collapse" "lev0", l'intitulé "lev02"vient se coller à "lev0".
--> tout ça c'est du CSS, travaille ta feuille de style pour arriver au résultat que tu veux.

**laurentSc** · 12/09/2013, 11h07

Je n'ai pas encore pris le temps de regarder le code, mais ça marche bien

sauf un truc (que je ne sais pas corriger) : quand on replie "lev0", "lev02" se décale, alors qu'il ne devrait pas bouger. Pourrais-tu corriger ? Merci beaucoup par avance.

Invité · 12/09/2013, 11h46

Il suffit d'imposer une largeur aux menus.

Code :

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

1
2
3
.menu{
   float:left; width:200px;
}

**laurentSc** · 12/09/2013, 12h14

Je ne comprends car autant si je reste dans jsfiddle, ça marche (mal car du coup lev0 et lev02 sont alignés verticalement) autant, si je copie le code sur mon PC, il n'y a même plus de liens...Au cas où je me sois trompé, voici le code complet :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title></title>
    <script>
    function expand(id,nameitem,expanded){
  var Item = document.getElementById(id); 
  if(expanded=== undefined){
    expanded = (Item.style.display === "none") ; //toggle expanded state
  }
 
  Item.style.display =  expanded ? "block" : "none"; 
  window.location.hash = expanded ? "#"+nameitem : "#";
} 
 
function init() {
  expand("lev0","lev0", window.location.hash=="#lev0");
  expand("lev02","lev02", window.location.hash=="#lev02");  
  var links = document.querySelectorAll("ul.menu li a");
  for(var e=0; e<links.length; e++){
      links[e].addEventListener("click", function(){
          var itemName = this.getAttribute("data-expand");
            console.log(itemName);
          if(itemName != null){
              expand(itemName, itemName);
          }
      });
  }
}
 
    </script>
    <style>
      li{
   list-style: none;
}
.menu{
   float:left;width:200px;
}
 
 
.clear{
        clear:left;list-style: none;
      }
    </style>
  </head>
  <body>
 <div>
      <ul class="menu">
        <li><a data-expand="lev0">lev0</a>
          <ul id="lev0">
            <li>lev1
              <ul>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
              </ul>
            </li>
            <li>lev1</li>
            <li>lev1
              <ul>
                <li>lev2</li>
                <li>lev2</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div>
      <ul class="menu">
        <li><a data-expand='lev02'>lev02</a>
          <ul id="lev02">
            <li>lev1
              <ul>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
              </ul>
            </li>
            <li>lev1</li>
            <li>lev1
              <ul>
                <li>lev2 </li>
                <li>lev2</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

Retour arrière => Refresh

JavaScript

Discussions similaires

Partager

Partager