textfill voor een class
Op mijn site heb ik verschillende div's met tekst,
ik wil graag dat de tekst, aan de hand van textfill of een andere manier, aangepast wordt aan de grote van de div waar de tekst in staat.
Het volgende script werkt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
;(function($) {
$.fn.textfill = function(options) {
var fontSize = options.maxFontPixels;
var ourText = $('p:visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
})(jQuery);
$(document).ready(function(){
$('#mm1').textfill({ maxFontPixels: 100 });
});
$.fn.textfill = function(options) {
var fontSize = options.maxFontPixels;
var ourText = $('p:visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
})(jQuery);
$(document).ready(function(){
$('#mm1').textfill({ maxFontPixels: 100 });
});
In dit geval is #mm1 één van de div's waarvan ik de tekstgrootte wil aanpassen.
Zodra ik echter in plaats van '#mm1' '.mm' gebruik komt alle tekst in het formaat van de als eerst benoemde div in het html script.
Hoe kan ik dit oplossen?
Met vriendelijke groet,
Joep.
$(this).textfill({ maxFontPixels: 100 });
});