Discussion :

[SylvainPV]

Pourtant ouvre une console web et entre

Code :

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

window.location.hash="#hello";

Tu verras bien que l'URL change

[Invité]

Compris !
C'est le lien <a href="..."> qui actualise la page.

Il suffit de mettre à la place :

Code html :

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

<span id="User_CentricBt" onclick="expand('User_Centric');"></span>

Avec :

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
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"; 
  window.location.hash = expanded ? "#expanded" : "";
  // BONUS : modification du texte du <span>
  document.getElementById(id+'Bt').innerHTML = expanded ? "Fermer" : "Ouvrir";
 
}
function init() {
    expand("User_Centric", window.location.hash==="#expanded");
}

[laurentSc]

2/ et 3/ Le code est assez simple et les notation suffisamment explicites, je pense.

Le point 3, OK, mais le point 2, vois toujours pas...

Pour le point 1, j'avais bien vu que l'id est devenue "User_CentricBt", mais pourquoi on garde pas "User_Centric" ?

Enfin, pourrais-tu me décoder cette fonction (c'est le 2e paramètre que je comprends pas) :

Code :

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

1
2
3
function init() {
    expand("User_Centric", window.location.hash==="#expanded");
}

[SylvainPV]

Le deuxième paramètre est une condition interprétée en booléen. Si le hash est à expanded, la fonction sera appelé avec comme second argument "true", autrement dit va forcer le dépliement du menu. Inversement, si le hash n'est pas égal à expanded, la variable expanded prendra la valeur "false" et le menu sera replié.

Je t'ai proposé ce prototype car il ressemble beaucoup à la fonction toggle de jQuery, et je le trouve plutôt intuitif (il faut croire que non )

[laurentSc]

Merci pour l'explication ; ça serait intuitif si je connaissais mieux le html ; ce qui me gênait, c'était qu'il y ait 3 égals, mais si on n'en met que 2, ça marche quand même (et je comprends !) ; pourquoi ?

Et autre question qui est liée : le point 2 :

ds le onclick, à la fonction expand, tu passes un seul paramètre ; j'en déduis que dans la fonction, la variable "expanded" est à "undefined", donc je la remplace par (Item.offsetWidth == 0) , et ça ne marche plus non plus (panique totale)

[SylvainPV]

Pour l'opérateur ===, je pense que Google a la réponse.
Et par principe je ne réponds jamais à une question "ça ne marche pas"

[laurentSc]

Pour l'opérateur ===, je pense que Google a la réponse

J'y avais pensé aussi, mais pas trouvé...

Et par principe je ne réponds jamais à une question "ça ne marche pas"

Normal...sauf que comme je dis "panique totale", c'est indescriptible. Alors je pose une autre question : pourquoi ça marche (ça me semble pas intuitif...) ?

[Invité]

Il faudrait peut-être faire un effort... pour trouver les mots justes :
=> Opérateurs de comparaison (PHP)
=> Opérateurs de comparaison (JavaScript)

[laurentSc]

OK, merci et je comprends bien pourquoi le == marche aussi !

Reste plus que le point 2 : pourquoi ça marche ?

[NoSmoking]

Reste plus que le point 2 : pourquoi ça marche ?

il va te falloir également voir les bases du javascript

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function expand(id, expanded){
  var Item = document.getElementById(id); 
  // si 2éme paramètre omis => il vaut donc undefined
  if(expanded=== undefined){
    // dans ce cas on l'initialise suivant la valeur de la largeur de l'élément
    expanded= (Item.offsetWidth == 0);
    //expanded = TRUE si la largeur vaut 0 sinon vaut FALSE
  }
  // affiche l'élément si expanded vaut 0 
  Item.style.display= expanded ? "block" : "none"; 
  // modification du hash selon le même principe
  window.location.hash= expanded ? "expanded" : "";
}

[Invité]

C'est aussi la LOGIQUE qu'il faut comprendre :

Code :

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

window.location.hash==="#expanded"

cette expression vaut :

• true si on a "#expanded" dans l'URL
• Sinon, elle vaut false

Code :

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

1
2
3
function init() {
    expand("User_Centric", window.location.hash==="#expanded");
}

init() va donc, comme son nom l'indique, initialiser la page en fonction de cette valeur true/false.

..., j'avais bien vu que l'id est devenue "User_CentricBt", mais pourquoi on garde pas "User_Centric" ?

Là, tu me fais de la peine...

<span id="User_CentricBt"></span>
<div id="User_Centric">...

document.getElementById(id) => c'est le <div>
document.getElementById(id+'Bt') => c'est le <span>

[laurentSc]

Désolé de te faire de la peine (j'avoue que j'avais pas vu) et je prends un risque énorme en risquant d'empirer les choses : suite à tes commentaires de 19h12, je me suis dit qu'on pouvait remplacer le code de la fonction expand par :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function expand(id, expanded){
  var Item = document.getElementById(id); 
 /* if(expanded=== undefined){
    expanded = (Item.offsetWidth == 0) ; //toggle expanded state
  }*/
 
  Item.style.display =  (Item.offsetWidth == 0) ? "block" : "none"; 
//  window.location.hash = expanded ? "#expanded" : ""; // (cette instruction ne fonctionne pas pour moi...)
  // modification du href et texte du lien
  document.getElementById(id+'Bt').href =   (Item.offsetWidth == 0) ? "#expanded" : "#";
  document.getElementById(id+'Bt').innerHTML =  (Item.offsetWidth == 0) ? "Close" : "Open";
}

et bien non car du coup, le hash n'est plus positionné (malgré la ligne 10) et je ne comprends...

[Invité]

L'informatique, ce n'est pas "jeter des bouts de code en l'air, et recopier comme ça retombe".

Si on l'écrit comme ça, c'est plus clair ?

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
19
20
21
function expand(id, OuiNon){
  var Item = document.getElementById(id); 
  // si 2éme paramètre omis => il vaut donc undefined
  if(OuiNon=== undefined){
    // dans ce cas on l'initialise suivant la valeur de la largeur de l'élément
    OuiNon= (Item.offsetWidth == 0);
    //OuiNon = TRUE si la largeur vaut 0 sinon vaut FALSE
  }
  // affiche l'élément si OuiNon vaut 1
  if(OuiNon){ // OuiNon == true
    Item.style.display = "block"; 
  } else { // OuiNon == false
    Item.style.display = "none"; 
  }
  // modification du hash selon le même principe
  if(OuiNon){ // OuiNon == true
    window.location.hash = "#expanded";
  } else { // OuiNon == false
    window.location.hash = "";
  }
}

[laurentSc]

Tu te méprends car j'avais bien compris ton code (dès l'explication de 19h12) par contre je ne comprends toujours pas pourquoi mon code de 19h54 ne marche pas...

[SylvainPV]

Où est-ce que le hash est lu dans ton code ? Nulle part ? Alors aucune chance que ça fonctionne...

On t'a proposé une solution qui fonctionne avec le code commenté, ça devrait te suffire.

[laurentSc]

Bien sûr que ça me suffit ; je cherchais juste à bien le comprendre (d'où la raison de mon essai (je ne vais pas l'utiliser, mais c'est juste pour comprendre)) ; et dans ce code, où le hash est-il lu ?

[SylvainPV]

et dans ce code, où le hash est-il lu ?

Il me semblait pourtant qu'on te l'avait expliqué de trois façons différentes quelques posts plus haut...

C'est aussi la LOGIQUE qu'il faut comprendre :

Code :

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

window.location.hash==="#expanded"

cette expression vaut :
true si on a "#expanded" dans l'URL
Sinon, elle vaut false

Ce n'est pourtant pas sorcier, je ne vois pas comment on peut être plus clair

[NoSmoking]

...je ne vois pas comment on peut être plus clair

...je ne vois pas comment on peut être plus clair
...je ne vois pas comment on peut être plus clair
...je ne vois pas comment on peut être plus clair

[Kaamo]

Ce n'est pourtant pas sorcier

[Invité]

On smoke de ki ici ?
T'a kaamo-qué ki ?
S'il vin est pas bon, savo 1 PV !
Sacé de Laurent bar !