CSS pour multiple progressbar

Invité · 29/05/2013, 15h05

Bonjour,

Sur ma page j'ai plusieurs progressbar. Je les génères dynamiquement avec des nom de classe differents:

Code html :

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

1
2
3
4
<div class="progbar1 pbar"...>
<div class="progbar2 pbar"...>
<div class="progbar3 pbar"...>
...

J'essai de faire comme dans cet exemple http://jqueryui.com/progressbar/#indeterminate

Du coup j'ai crée des propriétés CSS pour :

Code css :

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

1
2
3
.pbar .ui-progressbar-value {
   background: red;
}

Les progressbars sont correctement initialisées et j'arrive bien a recupérer les valeurs.
voici le bout de script cense m'aider a modifier le CSS:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
//je boucle sur toutes mes bars
 
//je stock la pregressbar courante
var bar = $(".progbar"+id);
//j'isole la propriété CSS (techniquement)
var barValue = bar.find(".ui-progressbar-value");
//puis je la modifie
if (parseInt(bar.progressbar("value") < 30))
   barValue.css({ "background": "black" });

Or la couleur ne change pour aucune bar.
Merci

**Lorenzo77** · 29/05/2013, 20h15

salut,

ca serait pas plutot (css) :

Code :

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

background-color: red;

?

et en JS l'exemple passe une couleur sous la forme héxa (#FF0000), alors que toi tu esssayes de passer le nom d'une couleur .... faut verifier ...

**danielhagnoul** · 29/05/2013, 22h38

Il n'y aurait pas une confusion entre barValue et bar ?

Invité · 30/05/2013, 09h31

Envoyé par Lorenzo77

ca serait pas plutot (css) :

Code :

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

background-color: red;

?

et en JS l'exemple passe une couleur sous la forme héxa (#FF0000), alors que toi tu esssayes de passer le nom d'une couleur .... faut verifier ...

J'ai essayé. La propriété background-color n'a aucun effet, avec ou sans héxa.

Lorsque je fais

Code :

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

background: red;

toutes les bares passent en rouge (bleu a l'origine).

J'ai l'impression de mal isoler le CSS dans mon JS. C'est certainement due au fait que les noms de classe soient du genre class="progbarXXX pbar" alors que le CSS s'applique sur .pbar .ui-progressbar-value . Je ne vois pas comment faire autrement.

Envoyé par danielhagnoul

Il n'y aurait pas une confusion entre barValue et bar ?

A ce stade la j'en ai aucune idée ....

Edit: lorsque je fais un

Code :

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

alert(barValue.css("background"))

Le resultat est "undefined".

**danielhagnoul** · 30/05/2013, 09h43

Avez-vous vraiment essayé : bar.css({ "background": "black" }); ?

Invité · 30/05/2013, 09h49

Oui, rien ne se produit.

**danielhagnoul** · 30/05/2013, 11h56

Bonjour

J'ai pris le temps de mieux lire la question et de tester, la complication vient du fait que vous voulez gérer plusieurs progressbar. Voici un exemple statique (l'inclusion dynamique des progressbar compliquera encore plus le code et je manque de temps) :

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
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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-2.0.0.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
/*
 * Toutes les divisions ave un ID qui débute
 * par 'progressbar'.
 */
$( "div[id^='progressbar']" ).progressbar({
	"value" : false
});
 
/*
 * Tous les button avec un ID qui contient 'Button'
 */
$( "button[id*='Button']" ).on( "click", function( event ){
	var target = $( event.target ),
    	progressbar = target.prevAll( "div[id^='progressbar']" ).eq( 0 ),
    	progressbarValue = progressbar.find( ".ui-progressbar-value" );
 
    // debug
    //console.log( target, progressbar, progressbarValue );
 
    /*
     * progressbarValue : c'est une division générée dynamiquement
     * 
     * <div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" 
     * aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
     *     <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 50%;"></div>
     * </div>
     */
 
    if ( target.is( "button[id*='num']" ) ){
    	progressbar.progressbar( "option", {
    		"value" : Math.floor( Math.random() * 100 )
    	});
 
    } else if ( target.is( "button[id*='color']" ) ){
    	progressbarValue.css({
    		"background" : '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
    	});
 
  	} else if ( target.is( "button[id*='false']" ) ){
    	progressbar.progressbar( "option", "value", false );
  	}
});
				});
 
				$( window ).load( function(){
 
				});
 
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		#progressbar .ui-progressbar-value { background-color: #ccc; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<div id="progressbar1"></div>
<button id="numButton1">Random Value - Determinate</button>
<button id="falseButton1">Indeterminate</button>
<button id="colorButton1">Random Color</button>
 
<div id="progressbar2"></div>
<button id="numButton2">Random Value - Determinate</button>
<button id="falseButton2">Indeterminate</button>
<button id="colorButton2">Random Color</button>
 
<div id="progressbar3"></div>
<button id="numButton3">Random Value - Determinate</button>
<button id="falseButton3">Indeterminate</button>
<button id="colorButton3">Random Color</button>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-05-29T22:29:24.860+02:00" pubdate>2013-05-29T22:29:24.860+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

Invité · 30/05/2013, 14h00

Suite a votre démonstration, j'ai changé mon JS. Il est maintenant comme ceci:

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
var allLabel = $("div[id^='progress-label']");
var allProgressbar = ("div[id^='progressbar']");
allProgressbar.progressbar({ "value": false });
 
for (var i = 0; i < json.aaData.length; ++i) {
   var bar = allProgressbar .eq( i )
   var barValue = bar.find(".ui-progressbar-value");
 
   var label = allLabel.eq( i );
   bar.progressbar("option", { "value": parseInt(json.aaData[i][5]) }); //aaData[i][5] contient la valeur de la progressbar.
   label.text(bar.progressbar("value") + "%");
 
   if (parseInt(json.aaData[i][5]) < 25) {
      barValue.css({ "backgroud": "black" });
   }

Du coup j'ai changé comment sont créées mes progressbars:

Code html :

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

1
2
3
4
<div id="progressbar1"><div id="progress-label1"...
<div id="progressbar2"><div id="progress-label2"...
<div id="progressbar3"><div id="progress-label2"...
...

Et le CSS:

Code css :

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

1
2
3
4
5
6
7
8
9
div[id^='progressbar'] .ui-progressbar-value {
   background-color: #ccc;
   background: Red;
}
 
div[id^='progress-label'] {
   position: absolute;
   left: 50%;
}

Le code me satisfait beaucoup plus maintenant, mais je n'arrive toujours pas a modifier la couleur.

**danielhagnoul** · 30/05/2013, 22h41

Je ne suis pas devin, je ne comprends rien à vos extraits de codes.

On est loin de :

J'essai de faire comme dans cet exemple http://jqueryui.com/progressbar/#indeterminate

J'ai des capacités très limitées

, je peux uniquement tester un code complet (CSS, HTML, JS). Et si je m'imagine l'avoir compris

, modifier ce code.

Invité · 31/05/2013, 09h57

Bonjour,

Plutot que de continuer a vous fournir des informations incomplètes, j'ai épuré mon projet et en ai fait un nouveau.
Il est disponible a cette adresse

J'ai mi le javascript dans "Scripts > Script perso".
Si vous n'etes pas famillier avec les datatables:
Cette ligne dans InitTopTable me permet de templeter le contenu de la case de mon tableau contenant une progressbar.

Code js :

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

1
2
 
return '<div id=\"progressbar' + oObj.aData[0] + '\"><div id=\"progress-label' + oObj.aData[0] + '\"></div></div>

Le contenu de la fonction js RefreshTable n'est d'aucune importance.
Seul la fonction UpdateProgressBar est a modifier (je crois).

**danielhagnoul** · 31/05/2013, 23h12

Bonsoir

J'ai téléchargé et examiné les codes, malheureusement je ne peux rien tester, car je n'utilise pas cet environnement de travail et son langage et je ne connais pas très bien le plugin datatable.

Concernant la partie purement JS, je crois qu'il faut écarter le contenu du JSON. C'est seulement lorsqu'un test simplifié fonctionnera que l'on pourra réintroduire le contenu du JSON pour fixer la valeur et la couleur de chaque progressbar.

Je suggère de tester le code ci-dessous (j'ai aussi retouché la structure du code, voir les commentaires).

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/*
 * C'est ici que l'on crée la table qui crée les progressbar
 * On ne les crée qu'une seule fois ?
 */
var allLabel = null,
	allProgressbar = null;
 
function InitTopDataTable() {
   var TopTable = $("#TopTable").dataTable({
      "bPaginate": false,
      "bJQueryUI": true,
      "bServeSide": true,
      "sAjaxSource": "Home/GetTopTable",
      "bProcessing": true,
      "aoColumns": [
               { "sName": "ID" },
               { "sName": "PROGRESS",
                  "fnRender": function (oObj) {
                     return '<div id="progressbar' + oObj.aData[0] + '\"><div id=\"progress-label' + oObj.aData[0] + '\"></div></div>';
                  }
               }
            ]
   });
}
 
/*
 * Test simplifié.
 * On parcourt toutes les progressbar en donnant
 * une valeur et une couleur aléatoire.
 */
function UpdateProgressBar( json ){
	var jObjLabel = null,
      	jObjBar = null,
      	jObjBarValue = null;
 
	for ( var i = 0; i < json.aaData.length; ++i ){
    	// debug
      	// console.log( "Updtate Progressbar " + i );
 
      	jObjLabel = allLabel.eq( i );
      	jObjBar = allProgressbar.eq( i );
      	jObjBarValue = jObjBar.find(".ui-progressbar-value");
 
      	jObjBar.progressbar( "option", {
    		"value" : Math.floor( Math.random() * 100 )
    	});
 
      	jObjLabel.text( jObjBar.progressbar( "value" ) + "%" );
 
      	jObjBarValue.css({
    		"background" : '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
    	});
   }
}
 
function RefreshTable(tableId, urlData, bar) {
   $.getJSON(urlData, null, function (json) {
      table = $(tableId).dataTable();
      oSettings = table.fnSettings();
      table.fnClearTable(this);
 
      for (var i = 0; i < json.aaData.length; ++i) {
         table.oApi._fnAddData(oSettings, json.aaData[i]);
      }
 
      oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
      table.fnDraw();
 
      if (bar == "top") {
         UpdateProgressBar(json);
      }
   });
}
 
function AutoReload() {
   RefreshTable("#TopTable", "/Home/GetTopTable", "top");
   setTimeout(function () { AutoReload(); }, 1000);
}
 
$(document).ready( function(){
	InitTopDataTable();
 
	var allLabel = $( "div[id^='progress-label']" ),
   		allProgressbar = $( "div[id^='progressbar']" );
 
   	// debug console, touche F12
   	// résultat correct ?
   	console.log( allLabel, allProgressbar );
 
   	// initialisation
   	allProgressbar.progressbar({ "value": false });
 
   	/*
   	 * Tout est initialisé, alors on débute le cycle
   	 * des rafraîchissements
   	 */
	setTimeout( function(){ AutoReload(); }, 1000 );
});

Invité · 03/06/2013, 11h01

Merci pour votre aide jusqu'à présent Danielhagnoul

.
J'attends un peu et si personne d'autre ne se penche sur le sujet, je posterais le problème une nouvelle fois en fournissant tous les détails dès le début.

**danielhagnoul** · 03/06/2013, 11h23

Bonjour

Jeter le bébé avec l'eau du bain est une solution, mais j'aurais bien aimé savoir le résultat du test que je vous propose.

Si la structure du code proposé est la bonne, et si la modification aléatoire des progressbar fonctionne, nous pourrions en conclure que le problème se situe dans la structure du JSON ou dans l'utilisation de la structure du JSON.

Invité · 03/06/2013, 11h50

J'extirperais le bébé du siphon dès que j'en aurais le temps, promis

Pour le moment je met ce problème là en suspends jusqu'à jeudi.

CSS pour multiple progressbar

jQuery

Discussions similaires

Partager

Partager