Progress Bar : séléctionner l'élément courant

Version imprimable

Bonjour,

Voici mon code

Code:

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
<img class="col-sm-12 col-md-4" src="../images/compétences.png" alt="Compétences">
 
          <div class="col-sm-12 col-md-8">
 
            <input type="button" class="btn btn-primary col-md-2 animer" value="HTML/CSS">
 
            <div class="col-md-5">
 
 
              <div class="progress active">
 
                <div class="progress-bar 80"><span id="pourcentage" class="pull-right"></span></div>
 
              </div>
 
            </div>
 
          </div>
 
          <div class="col-sm-12 col-md-8">
 
            <input type="button" class="btn btn-primary col-md-2 animer" value="PHP">
 
            <div class="col-md-5">
 
 
              <div class="progress">
 
                <div class="progress-bar 60"><span id="pourcentage" class="pull-right"></span></div>
 
              </div>      
            </div>
 
          </div> 
 
 
        </div>

Avec en js :

Code:

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
function timer(n) {
 
  $(".progress-bar").css("width", n + "%");
  $("#pourcentage").text(n+"%");
 
  if(n < 80) {
 
    setTimeout(function() {
 
      timer(n + 1);
 
    }, 100);
 
  }
 
}
 
 
$(function (){
 
$("#animer").click(function() {
 
    timer(0);
 
  });
 
});

Mon but est de faire des jauge de compétences dynamique : On clique sur une compétence, et la jauge se rempli jusqu'au niveau actuel.
Je n'arrive pas sélectionner l'élément courant, toute mes jauge se remplissent en même temps. Help !!
Merci d'avance !!

16/07/2018, 13h18
Romenag

modification du sujet
16/07/2018, 14h33
Romenag

Sélectionner l'élément courant

Re,

J'ai essayé de modifier ma fonctions à coup de $this, parent(), children(). Mais je n'y arrive pas, cela me dit à chaque fois que timer n'est pas une fonction.
Pourtant s'en ai bien une...

Help please !
17/07/2018, 11h39
Romenag

Personne ?
J'ai aussi essayé d'ajouter des conditions du type if($(".progress-bar).hasClass("60"){...
Mais ça ne fonctionne pas...

Bonjour,

Tu as oublié de préciser que tu utilises Bootstrap (quelle version ?) !...

D'autre part, un id doit être UNIQUE.
Sinon, on utilise une classe.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<img class="col-sm-12 col-md-4" src="../images/compétences.png" alt="Compétences">
 
<div class="col-sm-12 col-md-8">
  <input type="button" class="btn btn-primary col-md-2 animer" data-max="80" value="HTML/CSS">
  <div class="col-md-5">
    <div class="progress active">
      <div class="progress-bar"><span class="pull-right"></span></div>
    </div>
  </div>
</div>
 
<div class="col-sm-12 col-md-8">
  <input type="button" class="btn btn-primary col-md-2 animer" data-max="60" value="PHP">
  <div class="col-md-5">
    <div class="progress">
      <div class="progress-bar"><span class="pull-right"></span></div>
    </div>
  </div>
</div>

Pour "cibler" le bon élément, il faut le transmettre à la fonction

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function timer(btn, n) {
  let n_max = Math.min( btn.data('max'), 100); // maxi 100%
  btn.parent().find(".progress-bar").css("width", n + "%");
  btn.parent().find(".progress-bar span").text(n + "%");
 
  if (n < n_max) {
    setTimeout(function() {
      timer(btn, n + 1);
    }, 100);
  }
}
 
$(function() {
  $(".animer").on("click", function() {
    timer($(this), 0);
  });
});

Remarque :

Code:

<input type="button" class="btn btn-primary col-md-2 animer" data-max="80" value="HTML/CSS">

J'ai ajouté un attribut data-max (pourcentage max) sur chaque bouton.

Alors oui j'utilise Bootstrap v3.3.7. Et Jquery v3.3.1.

Et désolé si j'ai tronqué le code et qu'il n'était pas testable, c'était pour éviter de tout mettre, car je commence à avoir pas mal de lignes.

Voilà le code concerné :

Code:

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link href="../css/bootstrap.css" type="text/css" rel="stylesheet">
    <link href="../css/main.css" type="text/css" rel="stylesheet">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
    <!--[if lt IE 9]>
 
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
    <![endif]-->
 
 
</head>
<body>
 
	<div class="col-md-12">
 
	  <h3> Compétences développement </h3>
 
	  <img class="col-sm-12 col-md-4" src="../images/compétences.png" alt="Compétences">
 
	  <div class="col-sm-12 col-md-8">
 
	    <input type="button" class="btn btn-primary col-md-2 animer" value="HTML/CSS">
 
	    <div class="col-md-5 parent">
 
 
	      <div class="progress active">
 
	        <div class="progress-bar 80"><span class="pourcentage pull-right"></span></div>
 
	      </div>
 
	    </div>
 
	  </div>
 
	  <div class="col-sm-12 col-md-8 parent">
 
	    <input type="button" class="btn btn-primary col-md-2 animer" value="PHP">
 
	    <div class="col-md-5">
 
 
	      <div class="progress">
 
	        <div class="progress-bar 50"><span class="pourcentage pull-right"></span></div>
 
	      </div>      
	    </div>
 
	  </div> 
 
 
	</div>
 
	<script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/functionsJS.js"></script>
 
    <script type="text/javascript">
        
        function timer(n) {
 
                  $(".progress-bar").css("width", n + "%");
                  $(".pourcentage").text(n+"%");
 
                  if(n < 80) {
 
                    setTimeout(function() {
 
                      timer(n + 1);
 
                    }, 100);
 
                  }
 
                }
 
                $(function(){
 
                $(".animer").click(function() {
 
                    $(this).css("backgroundColor", "red");
                    timer(0);
                    $(this).children().children().children(".progress-bar").addClass("progress-bar-danger");
 
                  }); 
 
 
                  
 
                });
 
    </script>
 
</body>
</html>

J'espère que vous pourrez me répondre avec ça...

17/07/2018, 12h28
Invité
J'ai modifié mon post précédent.

Variante, pour animer toutes les barres à l'ouverture :
Code:

1 2 3 4 5 $(function() { $(".animer").each(function() { timer($(this), 0); }); });
18/07/2018, 22h24
Romenag

Cool, merci !
Désolé, je n'ai pas eu le temps de répondre plus tôt.
Je ne connaissais pas l'attribut data en html. Je vais étudier le sujet.
En tout cas ça fonctionne nickel, merci beaucoup !!
18/07/2018, 23h45
Invité
Bonjour,
- Les attributs universels data-*
- Utiliser les attributs de données

Merci pour les liens :)

Petites questions supplémentaires par rapport à la fonction que tu m'as donné pour activer toutes les barres à l'ouverture.
Je fais un CV one page avec un scrollspy.
Du coup je me demandé s'il était possible d'activer la fonction avec each que tu m'as donné seulement au click sur le bouton du menu.
J'ai essayé ça :

Code:

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
 
<html lang="fr">
 
  <head>
 
    <title>Test Forum</title>
 
    <meta charset="utf-8">
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet">
    <link href="css/main.css" type="text/css" rel="stylesheet">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
    <!--[if lt IE 9]>
 
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
    <![endif]-->
 
  </head>
 
   <body id="page-top">
 
 
 
    <header class="contener">
 
      <!-- Navigation
      ================================================== -->
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">   
 
        <div class="navbar-header col-md-offset-1">   
 
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
            <span class="icon-bar"></span>
 
            <span class="icon-bar"></span>
 
            <span class="icon-bar"></span>
 
          </button>
 
          <a class="navbar-brand" href="#page-top">Menu</a>
 
        </div>
 
        <div class="collapse navbar-collapse">
 
          <ul class="nav navbar-nav">
 
            <li> <a href="#prez">Présentation</a> </li>
 
            <li class="dropdown"> 
 
              <a data-toggle="dropdown">Scolarité <b class="caret"></b></a>
 
              <ul class="dropdown-menu">
 
                <li><a href="#school">Parcours Scolaire</a></li>
 
                <li><a href="#dipList">Diplômes Education Nationale</a></li>
 
                <li><a href="#comp">Compétences Développement</a></li>
 
                <li><a href="#OC">Certificats</a></li>
 
                <li class="divider"></li>
 
                <li><a href="#">Autres diplômes et certificats</a></li>
 
              </ul>
 
            </li> 
 
            <li class="dropdown"> 
 
              <a data-toggle="dropdown" href="#">Expérience <b class="caret"></b></a>
 
              <ul class="dropdown-menu">
 
                <li><a href="#">Parcours Professionnel</a></li>
 
                <li><a href="#">Références</a></li>
 
                <li><a href="#">Bénévolat</a></li>
 
              </ul>
 
            </li>
 
             <li> <a href="#prez">Projets</a> </li>
 
          </ul> 
 
          <ul class="nav navbar-nav navbar-right">
 
            <li> <a href="#contact">Contact</a> </li>
 
          </ul>
 
 
        </div>
      </nav>
 
    </header>
 
      <!-- Corps de page
    ================================================== -->
 
<div class="contener-fluid">
 
        <div class="col-md-12">
 
          <h3> Compétences développement </h3>
 
          <img class="col-sm-12 col-md-4" src="images/compétences.png" width="100%" alt="Compétences">
 
          <div class="col-sm-12 col-md-4">
            <input type="button" class="btn btn-primary col-xs-5 col-md-offset-1 col-md-3 animer" data-max="80" value="HTML">
            <div class="col-md-8 col-xs-7">
              <div class="progress active">
                <div class="progress-bar"><span class="pull-right"></span></div>
              </div>
            </div>
          </div>
 
          <div class="col-sm-12 col-md-4">
            <input type="button" class="btn btn-primary col-xs-5 col-md-offset-1 col-md-3 animer" data-max="80" value="CSS/Bootstrap">
            <div class="col-md-8 col-xs-7">
              <div class="progress">
                <div class="progress-bar progress-bar-success"><span class="pull-right"></span></div>
              </div>
            </div>
          </div>
 
 
 
 
 
    </div>
 
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript">
      
      $(function(){
 
//Fonction pour le scroll
 
$('li>a, li>ul>li>a').on('click', function(e) {
    e.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
      scrollTop: $(this.hash).offset().top
    }, 1000, function(){
      window.location.hash = hash;
    });
  });
 
        //Pour le défilement normal avec la barre, obligation de cliquer sur les boutons de compétences
 
        $(".animer").on("click", function() {
          timer($(this), 0);
        });
 
        //Pour le défilement par le menu, activation automatique des barre de progression
 
        $("#comp").on("click", function(){
 
          $(".animer").each(function() {
            timer($(this), 0);
          });
          
        });
 
 
      });
 
    </script>
 
  </body>
 
</html>

Désolé ça fait pas mal de ligne mais comme tu m'as dit que tu préférais un code utilisable...

Du coup ça ne fonctionne pas ce que j'ai tenté. Peux-tu m'indiquer si ce que je veux est possible et comment faire ?

De plus, mon scroll fonctionne malgré tout mais j'ai une erreur JS au click sur le menu déroulant "Scolarité" : TypeError: $(...).offset(...) is undefined

J'ai ajouté ma fonction dans le code plus haut.

As-tu une idée de pourquoi j'ai cette erreur ?

Merci d'avance !!

19/07/2018, 09h25
Invité
Bonjour,

1-
Code:

1 2 3 <li><a href="#comp">Compétences Développement</a></li> ... $("#comp").on("click", function(){
Il ne faut pas confondre le '#' du lien (qui est une ancre) avec le '#' du jQuery (qui indique un id) !

Donc, ajoute un id :
Code:

1 2 3 <li><a href="#comp" id="comp">Compétences Développement</a></li> ... $("#comp").on("click", function(){
2- Quant au message d'erreur... à priori, ça vient de cette ligne :

Code:

scrollTop: $(this.hash).offset().top.
19/07/2018, 09h53
Romenag

Ah mais oui bien-sûr !

Merci :)

Pour le message d'erreur, oui c'est bien cette ligne mais je ne vois pas trop quel est le problème, surtout que ça fonctionne. J'aimerais bien avoir quelque chose de propre mais bon...

Essaie avec ce code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  //Fonction pour le scroll
  $(".nav li>a").on("click", function(e) {
    e.preventDefault();
    var hash = this.hash;
    if( hash != '' && typeof $(hash).offset() !== 'undefined' ) // on vérifie l ancre (pas vide) et qu il existe bien un id de destination
    {
      $("html, body").animate(
        { scrollTop: $(hash).offset().top },
        1000,
        function() {
          window.location.hash = hash;
        }
      );
    }
  });

19/07/2018, 10h14
Romenag

Avec ce code, je n'ai plus d'erreur mais mon menu déroulant ne fonctionne plus... :?

Essaie avec :

Code:

1
2
$('li>a, li>ul>li>a').on('click', function(e) {
...

19/07/2018, 15h54
Romenag

Re,

Idem, mes deux menus déroulants ne fonctionnent plus avec ce code...
Aucun souci pour les parties du menu qui ne se déroulent pas par contre.

:?
19/07/2018, 16h06
Invité

OK.

1- As-tu la page en ligne ?

2- mon test semble fonctionner.
20/07/2018, 15h43
Romenag

Salut,

Alors oui effectivement j'ai retesté et ça fonctionne autant pour moi, c'était un problème de parenthèse !

Merci beaucoup :)

Bonjour,
je vais en rester à la question principale, pourquoi ne pas utiliser la « puissance » de la méthode animate() et ses propriétés méconnues comme step par exemple ?

Fichier de test d'une façon de faire

Code:

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress-bar</title>
<meta name="Author" content="NoSmoking">
<style>
.progress {
  display: inline-block;
  box-sizing: border-box;
  width: 20em;
  height: 2em;
  margin-left: 1em;
  border: 1px solid #BCA;
  line-height: 2;
  vertical-align: middle;
  color: #080;
}
.progress-bar {
  display: inline-block;
  width: 0;
  height: 100%;
  text-align: center;
  line-height: inherit;
  color: #080;
  background-color: #DEC;
}
[data-progress] {
  display: inline-block;
  width: 5em;
  height: 2em;
  font: inherit;
  cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body> 
<p>
  <button data-progress="html" data-value="70">HTML</button>
  <span class="progress">
    <span id="html" class="progress-bar"></span>
  </span></p>
<p>
  <button data-progress="css" data-value="90">CSS</button>
  <span class="progress">
    <span id="css" class="progress-bar"></span>
  </span>
</p>
<script>
// Récup. éléments concernés
var oBtns = $("[data-progress]");
//Action au click
oBtns.on("click", function () {
  var $this = $(this);
  var progress = $this.data("progress");
  var size = $this.data("value");
  $("#" + progress)
    .stop()
    .css({
      width: 0
    })
    .animate({
      width: size + "%"
    }, {
      duration: 2000,
      step: function (valeur, fx) {
        var elem = $(fx.elem);
        elem.text(parseInt(valeur,10) + "%")
      }
    });
});
// Déclenche l'animation
oBtns.trigger("click");
</script> 
</body>
</html>

Plus besoin d'ID ou de fonctions extérieures