Bonjour à tous,

Je souhaite générer une chaine texte avec 2 couleurs différentes pour la typo, de 0 à 50px ==> #999, de 51px à la fin ==> #FFF.

J'ai imaginé ce script qui ne fonctionne que de manière aléatoire (!?)

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 largeur = parseInt($('tempsRestant').up('div').getStyle("width")) * parseInt($('tempsRestant').getStyle("width")) / 100; // Cette largeur est en % dans la CSS
var largeurRef = Math.max(largeur, parseInt($('tempsRestant').getStyle("min-width"))); // C la largeur de référence pour la 1ere couleur
console.log("LargeurRef : "+largeurRef+" px\nLargeur : "+largeur)
$('tempTextTmepsPasse').setStyle({color: "#999"}); // Couleur de départ
for (var i = 1; i < $('tempsRestant').innerHTML.length; i++) {
	$('tempTextTmepsPasse').innerHTML = $('tempsRestant').innerHTML.substring(0, i);
	var largeurTemp = $('tempTextTmepsPasse').measure('width');
	console.log("Largeur variable : "+$('tempTextTmepsPasse').innerHTML+" ••• "+largeurTemp);  // largeurTemp est tjours à zéro ???!!
	if($('tempsRestant').getWidth() > largeurRef) {
		console.log("Break"); // pour passer à le seconde couleur
		$('tempTextTmepsPasse').innerHTML += "<span style='color:#999; '>";
		break;
	}
//suite du code 	
}
Aucun débugger ne me retourne d'erreurs (Safari, Chrome, FF ou IE), $('tempsRestant').getWidth() est tjrs à 0 ==> le script ne break jamais.

Qui pourrait me donner une piste ? D'avance merci.

PS : $ pour le framework PrototypeJS, la div id="tempTextTmepsPasse" n'a aucun formatage objet
<div id="tempTextTmepsPasse" class="Note-Text" style="font-weight:bold; display:inline; ">Il vous reste 320 heures</div> (Note-Text ne sert qu'au formatage du texte donc à sa longueur)