Tout réafficher après suppression de "étirer"

**laurentSc** · 29/10/2013, 15h14

Je suis admiratif ; serais-ce trop te demander de rajouter des commentaires dans ton code car comme tu dois t'en douter, il faut que je le comprenne pour l'adapter ; et d'ailleurs, besoin initial : quand on fait "ouvrir", on a (par exemple) test1 et "fermer", plus rien ; or, mon besoin réel serait sur "ouvrir" :

test1-1
test1-2
test1-3
test1-4
test1-5

et sur "fermer" seulement (par exemple)

test1-1
test1-2

(en gros, masquer une partie mais pas tout)(et bien sûr rajouter des commentaires)

**laurentSc** · 30/10/2013, 16h40

Bonjour,

pour chercher à comprendre le code, j'ai entrepris de le copier en local, par contre, ça ne marche pas du tout (ça affiche les 3 "ouvrir" et si on clique dessus, rien) ; voilà mon fichier :

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
 
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title></title>
    <style>
      .panel .contenu {
    display:none;    
}
 
.panel.expanded .contenu {
    display:block;
    position:absolute;
    background: #CCC;
    padding: 1em;
}
 
.panel .panel-toggle-btn:before {
    content:"Ouvrir";
}
 
.panel.expanded .panel-toggle-btn:before {
    content:"Fermer";
}
</style>
    <script>
      function expand($panelToOpen){
  $(".panel").not($panelToOpen).removeClass("expanded");
  $panelToOpen.toggleClass("expanded");  
}
 
function init() {
    var panelToExpand = 0; //déplie le premier panel par défaut
    var match = window.location.hash.match(/expanded=(\d+)/);
    if(match != null && match[1] != null){
        panelToExpand = parseInt(match[1]);      
    }  
    expand( $(".panel").eq(panelToExpand) );
 
    $(".panel").each(function(p){
        $(this).find('.panel-toggle-btn').on('click', function(e){
            e.preventDefault();
            expand( $(this).closest('.panel') );
            window.location.hash = "expanded="+p;
        });
    });
};
 
init();
</script>
 
  </head>
  <body>
 <section class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
      test1
  </div>
  </section>
  <section class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
      test2
  </div>
  </section>
  <section class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
      test3
  </div>
  </section>
  </body>
</html>

qu'est-ce qui ne va pas ?

**NoSmoking** · 30/10/2013, 18h40

qu'est-ce qui ne va pas ?

si tu utilises jQuery il serait bon de charger la bibliothèque

**laurentSc** · 30/10/2013, 21h15

T'as raison ; ça peut servir (j'avais pas remarqué que le code faisait appel à JQuery). Mais je viens de rajouter dans le head <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script> et toujours rien ; pourquoi ?

**NoSmoking** · 30/10/2013, 21h57

Il faut simplement ne pas oublier de déclencher le script sur le load de la page, ou le mettre à la fin de ta page.

**laurentSc** · 30/10/2013, 22h13

Désolé de pas comprendre, mais déclencher le script, ça veut dire quoi ?

**SylvainPV** · 30/10/2013, 23h38

J'ai proposé le code en jQuery histoire que ça ne me prenne pas trop de temps, mais c'est tout à fait possible de faire sans. La logique est là, difficile de mettre de commentaires car je ne sais pas me mettre dans la peau d'un débutant (pour moi tout est clair

)

Si tu choisis de copier-coller mon code et par conséquent d'intégrer jQuery, pose-toi un moment avant. jQuery est une excellente librairie, elle fait gagner un temps fou et en a aidé plus d'un ici. Seulement comme toutes les librairies elle demande un temps d'apprentissage. Et on ne va certainement pas t'apprendre à l'utiliser dans ce topic.

Bref, il te faut soit comprendre la logique de mon code et l'adapter pour toi, soit prendre le temps d'apprendre à te servir de jQuery. Dans tous les cas ça demande un minimum d'effort et de temps à consacrer. Je tiens à le préciser vu la longueur du topic jusqu'ici

**laurentSc** · 31/10/2013, 00h38

Gloops, c'est pas gagné...

**SpaceFrog** · 31/10/2013, 08h31

Je plussoie pour JQuery, d'autant plus que les tutos Jquery sur ce forum sont à la portée de tous ...

http://javascript.developpez.com/cou...meworks#jquery

**laurentSc** · 31/10/2013, 23h37

Ca y est ; j'ai trouvé comment charger la bibiothèque jQuery et déclencher le script après le load de la page :

Code :

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

1
2
3
 
  <script src="jquery-1.10.2.js"></script>
  <script>window.onload=init;</script>

Et même si je suis encore loin de maîtriser jQuery et ses sélecteurs (forte imbrication avec le CSS si j'ai bien compris) y a un truc que je trouve pas : comment faire pour qu'au démarrage, tous les menus soient repliés ?

**SylvainPV** · 01/11/2013, 14h40

Code :

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

var panelToExpand = 0; //déplie le premier panel par défaut

Cette fois tu ne peux pas me reprocher de ne pas avoir mis de commentaires

**laurentSc** · 01/11/2013, 14h51

Mais je ne t'ai rien reproché !

Et ce commentaire, y était déjà...sauf que même si je modifie le paramètre, il y en a toujours un qui s'ouvre (j'ai pas vérifié, mais ça doit prendre le modulo 3...)

EDIT : je me suis trompé ; l'URL est modifiée, mais si j'enlève le hash et avec cette modif :

Code :

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

1
2
3
    var panelToExpand = 4;
...
    expand( $(".panel").eq(panelToExpand) );

ça ne déplie plus rien !

Invité · 04/11/2013, 09h51

Bonjour,
la solution de SylvainPV correspond exactement à ton besoin. (http://jsfiddle.net/nbSHt/3/)

Est-ce si difficile de l'adapter à "ton" besoin ??

**laurentSc** · 04/11/2013, 10h06

En fait, même si c'est un peu plus long, je vais essayer de le faire sans jQuery, car apparemment, sur les serveurs du boulot (là où ça doit tourner), jQuery ne semble pas marcher (même après avoir écouté Daniel Hagnoul) :

Envoyé par danielhagnoul

Bonjour

Avec <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script> c'est normal !

Il faut utiliser la branche 1, actuellement la version 1.10.2, pour être compatible avec les navigateurs obsolètes.

**SylvainPV** · 04/11/2013, 10h19

jQuery est une librairie JavaScript. JavaScript = Client. Rien à voir avec tes serveurs du boulot

**laurentSc** · 04/11/2013, 10h33

Oui Sylvain ; je reconnais que je n'ai pas réfléchi ; mais cela dit, ça ne tourne pas sur mon PC du boulot...

Système d’exploitation Microsoft Windows 7 Professionnel
Version 6.1.7601 Service Pack 1 Build 7601

Invité · 04/11/2013, 10h46

=> inclure la librairie jQuery via Google Hosted Libraries :

Code :

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Cela suppose d'être connecté à internet !

Sinon, il faut télécharger le fichier js sur ton ordi.
Ou copier-coller le script qui se trouve dans http://ajax.googleapis.com/ajax/libs.../jquery.min.js

comment faire pour qu'au démarrage, tous les menus soient repliés ?

remplacer :

Code js :

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

var panelToExpand = 0; //déplie le premier panel par défaut

par :

Code js :

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

var panelToExpand;

**laurentSc** · 04/11/2013, 11h22

Merci, car grâce à ça :

Ou copier-coller le script qui se trouve dans http://ajax.googleapis.com/ajax/libs.../jquery.min.js

ça marche ; donc il faut de nouveau que je regarde l'adaptation à mon cas (mais j'ai d'autres choses à résoudre avant) et sinon, pour le problème des menus non repliés à l'init, depuis le 01/11 14h51, j'avais trouvé une solution...

**laurentSc** · 07/11/2013, 00h11

Je viens de réessayer ce soir et aucune des 3 solutions proposées par jreaux62 lundi ne fonctionne plus...

Invité · 07/11/2013, 09h29

Bali et Balo sont sur un bateau. Bali tombe à l'eau. Qu'est-ce qui reste ?

C'est ballot.

3900 messages, et toujours pas capable de :

montrer le TON code
afficher un éventuel message d'erreur
faire un débogage* préliminaire pour cibler où pourrait se situer l'erreur

* En JavaScript, un simple alert('ok ?'); suffit généralement.
Il faut juste le placer judicieusement.

* Sur Firefox, il existe Firebug (que tu connais !).
Encore faut-il prendre le temps de comprendre son fonctionnement :
=> Maîtriser Firebug, l'indispensable extension Firefox pour le développement web
(ce lien t'a DEJA été donné)

Tout réafficher après suppression de "étirer"

JavaScript

Discussions similaires

Partager

Partager