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

**Romenag** · 16/07/2018, 12h43

Bonjour,

Voici mon code

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
<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 javascript :

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

**Romenag** · 16/07/2018, 13h18

modification du sujet

**Romenag** · 16/07/2018, 14h33

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 !

**Romenag** · 17/07/2018, 11h39

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

Invité · 17/07/2018, 11h54

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 :

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
<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 JavaScript :

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

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

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

**Romenag** · 17/07/2018, 12h20

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

Invité · 17/07/2018, 12h28

J'ai modifié mon post précédent.

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

Code JavaScript :

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

1
2
3
4
5
$(function() {
  $(".animer").each(function() {
    timer($(this), 0);
  });
});

**Romenag** · 18/07/2018, 22h24

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

Invité · 18/07/2018, 23h45

Bonjour,

**Romenag** · 19/07/2018, 06h39

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

Invité · 19/07/2018, 09h25

Bonjour,

1-

Code :

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

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 :

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

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 :

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

      scrollTop: $(this.hash).offset().top.

**Romenag** · 19/07/2018, 09h53

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

Invité · 19/07/2018, 09h56

Essaie avec ce code :

Code JavaScript :

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

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

**Romenag** · 19/07/2018, 10h14

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

Invité · 19/07/2018, 10h24

Essaie avec :

Code :

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

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

**Romenag** · 19/07/2018, 15h54

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.

Invité · 19/07/2018, 16h06

OK.

1- As-tu la page en ligne ?

2- mon test semble fonctionner.

**Romenag** · 20/07/2018, 15h43

Salut,

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

Merci beaucoup

**NoSmoking** · 22/07/2018, 11h17

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

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

jQuery

Discussions similaires

Partager

Partager