Longueur d'une chaîne en Pixels

**bronon** · 05/03/2013, 12h31

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)

**SpaceFrog** · 05/03/2013, 12h43

http://www.developpez.net/forums/d26...ongueur-texte/

**bronon** · 05/03/2013, 13h06

Merci pour ta réponse,

Je n'avais rien trouvé sur Internet concernant ce sujet.

Je regarde ceci de plus près cet après-midi

Cordialement

**SpaceFrog** · 05/03/2013, 13h06

^Désolé, j'ai lu le post en diagonal et je me suis fié au titre ...

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
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
.one {color :red;}
.two {color :#FFF;}
</style>
<script type="text/javascript">
$(function(){
$('.foo').html( $('.foo').text().replace(/^(.{50})(.*)/,"<span class='one'>$1</span><span class='two'>$2</span>") )
})
</script>
</head>
 
<body>
<div class="foo">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div>
</body>
</html>

**bronon** · 05/03/2013, 13h31

Ah ouais ca semble très bien,

Petite question je ne comprends pas

Code :

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

replace(/^(.{50})(.*)/ // 50 pourquoi ?

Encore merci

**SpaceFrog** · 05/03/2013, 13h38

de 0 a 50 px ...
mais encore une fois je n'avais pas compris tout la problématique
je planche un peu et reviens vers toi avec une nouvelle proposition

**bronon** · 05/03/2013, 13h47

Merci pour ton intérêt à mon problème.
La problématique est :
Scinder la chaine en 2 parties. La première partie (moins de 50 px) d'une couleur et le reste d'une autre couleur.
Ou combien de caractères sont contenus dans 50 px, ceci étant fonction de la CSS appliquée évidemment.
Bon courage.

**SpaceFrog** · 05/03/2013, 14h54

Bon voilà ou j'en suis:

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
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.one {color :red;}
.two {color :green;}
 
 
</style>
<script type="text/javascript">
 
$(function(){
mytop=$('#foo').offset().top;
newdiv=$('#foo').clone();
mask=$('<div/>').css({'margin':0});
newdiv.removeClass('one').addClass('two').css({width:$('#foo').width(),"position":"relative"});
mask.append(newdiv);
mask.css({"position":"absolute", "z-index":2, "overflow":"hidden", width:'50px',top:mytop, "border":"solid 0"});
 
$('body').append(mask)
 
})
 
</script>
</head>
 
<body>
<div id="foo" class="one">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>

ça passe nickel sous FFX et chrome

IE me génère un décalage de deux pixels malgré un positionnement à parti du offset top

le dernières versions de jquery ayant supprime le $.browser, au profit de support. Mais j'ai beau essayer de trouver quelle est le support en question ... boxmodel ne passe pas

**SpaceFrog** · 05/03/2013, 15h33

en forçant un line-height à 20 px ça passe ...

Code :

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

1
2
3
div { font-size: 13px;
      line-height:16px;
      font-family: arial;}

il faut néamoins une corrélation entre le line-height et la taille de font...

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
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
 
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.one {color :red;}
.two {color :green;}
div { font-size: 13px;
      line-height:16px;
      font-family: arial;}
 
</style>
<script type="text/javascript">
 
$(function(){
mytop=$('#foo').position().top;
newdiv=$('#foo').clone(true);
mask=$('<div/>').css({'margin':0});
newdiv.removeClass('one').addClass('two').css({width:$('#foo').width(),"position":"relative"});
mask.append(newdiv);
mask.css({"position":"absolute", "z-index":2, "overflow":"hidden", width:'50px',top:mytop, "border":"solid 0"});
 
$('body').append(mask)
 
})
 
</script>
</head>
 
<body>
<div id="foo" class="one">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>

**SpaceFrog** · 05/03/2013, 16h20

à l'horizontlae c'est marrant aussi

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
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
 
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.one {color :red;}
.two {color :green;}
div { font-size: 20px;
      line-height:25px;
      font-family: arial;}
 
</style>
<script type="text/javascript">
 
 
$(function(){
mytop=$('#foo').position().top;
newdiv=$('#foo').clone(true);
mask=$('<div/>').css({'margin':0});
newdiv.removeClass('one').addClass('two').css({width:$('#foo').width(),"position":"relative"});
mask.append(newdiv);
mask.css({"position":"absolute", "z-index":2, "overflow":"hidden", height: "38px",top:mytop, "border":"solid 0"});
 
$('body').append(mask)
 
})
 
</script>
</head>
 
<body>
<div id="foo" class="one">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>

**bronon** · 05/03/2013, 16h35

Ah zut je n'avais pas vu ta réponse.

Entre-temps j'ai finalisé un autre script qui fonctionne bien mais moins complet que le tien :

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
	var largeur = parseInt($('tempsRestant').up('div').getStyle("width")) * parseInt($('tempsRestant').getStyle("width")) / 100;
	var largeurRef = Math.max(largeur, parseInt($('tempsRestant').getStyle("min-width")));
String.prototype.textWidth=function(){
	var container=document.createElement('div');
	container.style.visibility='hidden';
	//container.style.fontFamily=police
	//container.style.fontSize=taille+'px'
	container.class = "Note-Epce"
	container.style.fontWeight= 'bold';
	container.id="magicdiv";
	container.style.display='inline';
	document.body.appendChild(container);
	document.getElementById('magicdiv').innerHTML=this;
	var longueur = document.getElementById('magicdiv').offsetWidth;
	document.getElementById('magicdiv').parentNode.removeChild(document.getElementById('magicdiv'))
	return longueur + ' px'
	}
	var tt= $('tempsRestant').innerHTML;		//	'Il vous reste 497 heures';		
	console.log("largeur : "+largeur+"\nlargeur Ref : "+largeurRef)
	for(var i = 1; i <= tt.length; i++) {
		console.log(tt.toString().substring(0, i).textWidth()+"\n"+tt.toString().substring(0, i));
		if(largeurRef < parseInt(tt.toString().substring(0, i).textWidth())) {
			i++;
			break;
		}	/**/
	}
$('tempsRestant').innerHTML = tt.toString().substring(0, i)+"<span style='color:#FFF; '>"+tt.toString().substring(i, 100)+"</span>"

Encore merci pour ta patience et ton aide
Seuls pb qui subsiste : récupérer la fontFaimly et Size de la CSS parce que en utilisant la class le résultat est parfois Rock'n Roll

Longueur d'une chaîne en Pixels

jQuery

Discussions similaires

Partager

Partager