Retour arrière => Refresh

Version imprimable

Voir 40 message(s) de cette discussion en une page

03/09/2013, 13h58
SylvainPV

Pourtant ouvre une console web et entre

Code:

window.location.hash="#hello";

Tu verras bien que l'URL change

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

Il suffit de mettre à la place :

Code:

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

Avec :

Code:

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");
}

03/09/2013, 15h07
laurentSc
Citation:

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:

1 2 3 function init() { expand("User_Centric", window.location.hash==="#expanded"); }
03/09/2013, 16h11
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 :lol: )
03/09/2013, 16h48
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 :

Citation:

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)
03/09/2013, 16h55
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"
03/09/2013, 17h02
laurentSc

Citation:

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

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

Citation:

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...) ?
03/09/2013, 17h53
Invité

Il faudrait peut-être faire un effort... pour trouver les mots justes :
=> Opérateurs de comparaison (PHP)
=> Opérateurs de comparaison (JavaScript)
03/09/2013, 19h02
laurentSc

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

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

Citation:

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

il va te falloir également voir les bases du javascript ;)

Code:

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" : "";
}

03/09/2013, 19h35
Invité
C'est aussi la LOGIQUE qu'il faut comprendre :

Code:

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

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

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.

Citation:

Envoyé par laurentSc

..., 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... :calim2:

Citation:

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

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

Désolé de te faire de la peine :mrgreen: (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:

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

:piou:

Citation:

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:

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 = "";
  }
}

03/09/2013, 21h54
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...
04/09/2013, 09h37
SylvainPV

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

On t'a proposé une solution qui fonctionne avec le code commenté, ça devrait te suffire.
04/09/2013, 12h26
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 ?
04/09/2013, 15h20
SylvainPV

Citation:

Envoyé par laurentSc

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

Citation:

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

Code:

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
04/09/2013, 16h58
NoSmoking

Citation:

Envoyé par SylvainPV

...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
04/09/2013, 17h07
Kaamo

Citation:

Envoyé par SylvainPV

Ce n'est pourtant pas sorcier

http://img.tvmag.lefigaro.fr/ImCon/Arti/48686/jamy.jpg
04/09/2013, 17h10
Invité

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

:nosms::ptdr:

Voir 40 message(s) de cette discussion en une page