Partage

[jQuery] Exercice (n° 4) pour s'entraîner

Une barre de progression contrôlable

23 janvier 2012 à 15:15:57

Bonjour à tous,

Je vous propose aujourd'hui un quatrième exercice (voir le n° 1, le n° 2 et le n° 3) sur jQuery, dans l'idée de faire progresser les membres mais aussi d'animer la section.

Avant d'entrer dans le vif du sujet, il y aura un certain nombre de règles à respecter pour que tout se passe bien dans ce topic.

Règles

Le troll et le flood ne sont pas tolérés. Inutile de balancer des "Pourquoi jQuery et pas Mootools ?", les messages non constructifs seront modérés.
Je vous fournis le code HTML, vous n'aurez pas le droit de le modifier.
Votre réponse contiendra uniquement du code jQuery avec la balise <secret> de manière à respecter ceux qui n'ont pas commencé l'exercice.
Evidemment, le code que vous posterez devra être de vous, pas la peine de recopier un code externe, cela n'a pas d'intérêt. L'utilisation de plugins n'est pas autorisée.

Objectif du script

Description

Nous allons créer une barre de progression, typiquement appelée progress bar, l'animation devra durer 3 secondes et la taille maximum de la barre sera de 400 pixels.
Il y a 2 boutons qui permettront d'arrêter (stop) l'animation et de la reprendre (start).
Lorsque l'on arrête l'animation, il faut indiquer le pourcentage d'avancement dans #log. Cet avancement sera exprimé avec un nombre entier.
Une fois l'animation terminée, on doit voir apparaître 100 % dans #log, les 2 boutons désactivés et la progress bar avec un fond vert.

HTML

<button id="start">Start</button>
<button id="stop">Stop</button>

<div id="bar"></div>
<div id="log"></div>

CSS

#bar {
    width:0px;
    height:25px;
    border:1px solid black;
    background-color:yellow;
    border-radius:3px;
}

Rendu FINAL

Ressources

Bon code ! :pirate:

Il n'y a pas une seule solution, je donnerai plus tard ma version du script commentée, j'attends un peu pour ne pas vous inciter à la regarder.

http://chez-syl.fr/

Chris31_

23 janvier 2012 à 18:17:39

Prem's !
Alors voilà. Désolé si mon code n'est pas bien optimisé je débute (tu le sais Désolation

)
Donc voilà j'ai fait ceci :

$('#start').click(function start(){
     $("#bar").animate({ 
        width: "400px"
     },
     { 
       duration: 3000,
       complete: function() {
       $(this).after('<div id="log">100%</div>');
       $('#bar').css('background-color', "green");
                            }
      });
});
  
$('#stop').click(function stop(){
     $("#bar").stop();
});

$('#log').css('display','none');

A noter : mon code ne prend pas en compte l'affichage des pourcentage lors du stop ni le disable pour les boutons lorsque l'animation est complétée.
J'éditerai mon message si je suis capable de le faire.
Pour l'instant non

Edit :
Après un petit travail, voilà les bouton sont disable une fois l'animation terminée.
Il ne me reste plus que le pourcentage lors du stop.
Voici le nouveau code :

$('#start').click(function start(){
     $("#bar").animate({ 
        width: "400px"
     },
     { 
       duration: 3000,
       complete: function() {
        $(this).after('<div id="log">100%</div>');
$('#bar').css('background-color', "green");
         $('#start').replaceWith("<button disabled=true id='start'>Start</button>");
          $('#stop').replaceWith("<button disabled=true id='start'>Stop</button>");
           }
      });
});
  
$('#stop').click(function stop(){
     $("#bar").stop();
}
 );

$('#log').css('display','none');

Desolation

23 janvier 2012 à 19:29:53

Merci Chris31_, mes remarques sur ton code :

Très bon pour un débutant.

Cependant, tu crées #log alors qu'il existe déjà.
Pour désactiver les boutons tu as beaucoup plus simple, ta méthode n'est pas la bonne.
Ta dernière ligne n'est pas demandée, et d'ailleurs il existe aussi plus simple pour faire cette action.

http://chez-syl.fr/

Chris31_

23 janvier 2012 à 19:34:56

Bon alors j'ai modifié ceci :

$('#start').click(function start(){
     $("#bar").animate({ 
        width: "400px"
     },
     { 
       duration: 3000,
       complete: function() {
        $('#log').replaceWith("<div id='log'>100%</div>");
$('#bar').css('background-color', "green");
         $('#start').replaceWith("<button disabled=true id='start'>Start</button>");
          $('#stop').replaceWith("<button disabled=true id='start'>Stop</button>");
           }
      });
});
  
$('#stop').click(function stop(){
     $("#bar").stop();
}
 );

$('#log').is(':hidden');

Je ne créé plus de #log je la remplace.
et j'ai changé par hidden
Ensuite, pour désactiver, je ne vois pas comment faire d'autre.

Desolation

23 janvier 2012 à 19:38:29

Remplacer #log ? Tu sais que tu peux écrire dedans directement avec la méthode .html() ?

Pour les boutons regarde la méthode .attr().

Ta dernière ligne ne veut rien dire dans ce contexte. De toute façon dans l'énoncé j'ai dit nulle part qu'il fallait cacher #log.

http://chez-syl.fr/

Chris31_

23 janvier 2012 à 19:47:33

J'ai fait ceci :

$('#start').click(function start(){
     $("#bar").animate({ 
        width: "400px"
     },
     { 
       duration: 3000,
       complete: function() {
        $('#log').html("100%");
$('#bar').css('background-color', "green");
         $('#start').replaceWith("<button disabled=true id='start'>Start</button>");
          $('#stop').replaceWith("<button disabled=true id='start'>Stop</button>");
           }
      });
});
  
$('#stop').click(function stop(){
     $("#bar").stop();
}
 );

pour la méthode attr() je ne vois pas :euh:

Edit :
voici mon nouveau code :

$('#start').click(function start(){
     $("#bar").animate({ 
        width: "400px"
     },
     { 
       duration: 3000,
       complete: function() {
        $('#log').html("100%");
$('#bar').css('background-color', "green");
         $('#start').attr("disabled","disabled");
          $('#stop').attr("disabled","disabled");
           }
      });
});
  
$('#stop').click(function stop(){
     $("#bar").stop();
}
 );

Il manque plus que le pourcentage mais je ne sais pas quelle méthode utiliser...

Desolation

23 janvier 2012 à 23:19:01

C'est bien tu as trouvé, même si au lieu d'appliquer la valeur "disabled", je mettrais true.

Pour le pourcentage c'est un simple produit en croix, niveau 6ème ou 5ème. :-°

http://chez-syl.fr/

vanz

24 janvier 2012 à 13:10:40

Voilà pour ma part.

var anim = "";

	$("#start").click(function(){
	anim = 	$("#bar").animate({
			width: 400},
			{
				duration: 3000,
				complete: function(){
					$(this).css("background-color","green");
					$("#log").text("100 %");
					$("#start, #stop").prop("disabled", true);
				}
			}
		);
	});

	$("#stop").click(function(){
		anim.stop();
		var poucentage = parseInt($("#bar").width()/400*100);
		$("#log").text(poucentage+ " %");
	});

Chris31_

24 janvier 2012 à 14:39:04

Voilà !

$('#start').click(function start(){
     $("#bar").animate({ 
        width: "400px"
     },
     { 
       duration: 3000,
       complete: function() {
        $('#log').html("100%");
$('#bar').css('background-color', "green");
         $('#start').attr("disabled","true");
          $('#stop').attr("disabled","true");
           }
      });
});
  
$('#stop').click(function stop(){
     $("#bar").stop();
  var pourcentage = $('#bar').width()/400*100;
   $('#log').html(parseInt(pourcentage, 0) + "%");
}
 );

Desolation

24 janvier 2012 à 15:44:04

Mouais le copier/coller hein... Tu peux au moins mettre ça en secret. Merci.

http://chez-syl.fr/

Chris31_

24 janvier 2012 à 15:48:45

Pourquoi copié collé ?
Y a-t-il une autre méthode pour convertir en nombre entiers ?

ninlock

24 janvier 2012 à 15:53:10

Petite question! Après le stop, dans toutes vos réponse si je refait start il remet 3 second meme si je suis a 99% non?

Chris31_

24 janvier 2012 à 15:54:54

oui

malheureusement.

ninlock

24 janvier 2012 à 16:24:56

ok, du coup j'ai fait un script avec un reset, et la durée de la progress bar dynamique si tu stop à 2000, il restera 1000 ms pour finir, et le pourcentage mise a jour tout au long de la progression et un petit div en plus pour suivre le temps restant de la progression:

<html>
<head>
<style>
#bar {
    width:0px;
    height:25px;
    border:1px solid black;
    background-color:yellow;
    border-radius:3px;
}
</style>
<script type="text/javascript" src="../javascript/jquery.js"></script>
<script type="text/javascript">
window.durationDefault = 3000;
window.duration = durationDefault;
window.timeRest = durationDefault;

$(document).ready(function(){
  $('#log').html("0%");
	$('#start').click(function(){
		 var begin = new Date().getTime();
     $('#bar').animate(
      	{width : 400},
      	{duration : window.duration,
      		step: function(width){
      						var tempsPasse = ((new Date().getTime()) - begin);
      						window.duration = window.timeRest - tempsPasse ;
      						$('#log2').html("reste : " + window.duration + " ms");
      						var p = parseInt(width * 0.25);
									$('#log').html(p + " %");
					},
					complete : function(){
						 $('#bar').css("background-color", "green");
						 $('#log2').html("reste : 0 ms");
					}
				}
      );
	});

	$('#stop').click(function(){
		$('#bar').stop();
		window.timeRest = window.duration;
	});

	$('#reset').click(function(){
		 $('#bar').css("width", "0px");
		 $('#bar').css("background-color", "yellow");
		 window.duration = durationDefault;
		 window.timeRest = durationDefault;
	});
});

</script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
<div id="bar"></div>
<div id="log"></div>
<div id="log2"></div>
</body>
</html>

Il y a quelques milliseconde d'erreur de temps en temps mais sinon ça m'as l'air de fonctionner. N'hésitez pas à me faire des retour.

Desolation

24 janvier 2012 à 16:31:07

Merci ninlock je n'ai pas le temps de regarder pour le moment.

J'avais fait aussi le % dynamique à chaque progression : http://jsfiddle.net/sylouuu/V7a3Y/15/

http://chez-syl.fr/

Chris31_

24 janvier 2012 à 16:33:31

Désolation, j'aimerai toujours savoir pourquoi tu as dit copié/collé alors que nos codes ne sont pas les même.
Et aussi s'il existe une autre méthode pour convertir les nombres en entiers (car je n'en connais pas et après quelques recherche je suis tombé sur le parseInt(); )

ninlock

24 janvier 2012 à 16:37:33

Par contre j'ai fait la reprise de la progression personnalisé mais je suis presque persuadé que c'est possible de le faire avec les fonction jQuery, si quelqu'un trouve merci de le spécifier.

tim01

26 janvier 2012 à 14:58:36

Citation : Chris31_

convertir les nombres en entiers (car je n'en connais pas et après quelques recherche je suis tombé sur le parseInt(); )

Il existe aussi Math.round , Math.floor et Math.ceil ?

Chris31_

27 janvier 2012 à 17:15:22

ah ok.
Bah je n'avais pas vu.
Désolé.
En jquery ?
Je ne trouve pas cette méthode sur le site jquery.com.

Desolation

27 janvier 2012 à 17:45:50

C'est du Javascript pur.

http://chez-syl.fr/