Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
orange sky
Front End Web Development Techdegree Student 4,945 PointsfitText
Hello,
If the text I am trying to resize has a font-style of 4em; what does this line do?
$("#title").fitText(.83, { minFontSize: '20px', maxFontSize: '100px' });
2) What does the .83 mean?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
$("#title").fitText(.83, { minFontSize: '20px', maxFontSize: '100px' });
</script>
</body>
5 Answers
Chris Shaw
26,676 PointsWhat does the .83 mean?
This refers to the compressor which is used to determine how aggressively the font size is changed, by default this value is 1 so setting it to .83 will make the text resize less often as the browser is resized compared to going past 1 which will make it resize a lot faster.
Andrew Stelmach
12,583 PointsI wouldn't worry too much about this yet. The dollar sign indicates that this line is jQuery. It's using magic to throw fittext spells onto your page. Don't worry about it, but if you want to understand more about what's going on under the surface you could do the jQuery Basics course here.
PS don't know exactly what the .86 does, but it doesn't really matter! :-)
orange sky
Front End Web Development Techdegree Student 4,945 PointsHello Chris,
$("#title").fitText(.83, { minFontSize: '20px', maxFontSize: '100px' });
1) How does the screen know when to minimize the font to 20px or to maximize the font to 100px.
2) If '1' causes the font to get resized more frequently, what would be a range of number to use so that the text resizes naturally? Perhaps, I should ask, is .83 the only number to use? thanks!
Chris Shaw
26,676 PointsHow does the screen know when to minimize the font to 20px or to maximize the font to 100px.
It uses a bit of maths to determine this, it calculates the font size based on the width of the parent container and if a min and/or max size are set the code won't allow the size to get smaller or larger what has been set, if you don't supply these values then it will scale infinitely.
If '1' causes the font to get resized more frequently, what would be a range of number to use so that the text resizes naturally? Perhaps, I should ask, is .83 the only number to use? thanks!
I think you misunderstood, 1 is the natural compressor size, anything above or below this number changes the speed in which the font resizes, .83 will cause a slower resize speed.
orange sky
Front End Web Development Techdegree Student 4,945 PointsI think I am getting this:). Just one last question, John. Can I use another value to slow down the resize speed? I think it is easier to remember a range of numbers as opposed to a number (.83)
Cheers!
Chris Shaw
26,676 PointsSadly no, because fitText uses maths to calculate the font size you have to use either an decimal or whole number.
orange sky
Front End Web Development Techdegree Student 4,945 PointsThanks Chris!