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
Michael Paccione
9,017 PointsChange Styles Incrementally with Javascript
I want to change font size incrementally because I want responsive text. My code doesn't change the size and I don't know why.
function textResize() {
var about = document.getElementById('about');
var text = document.getElementById('text');
var aboutWidth = about.offsetWidth;
var aboutHeight = about.offsetHeight;
var textWidth = text.offsetWidth;
var textHeight = text.offsetHeight;
var textSize = getComputedStyle(text).getPropertyValue("font-size");
console.log('About Width:'+aboutWidth);
console.log('About Height:'+aboutHeight);
console.log('Text Width:'+textWidth);
console.log('Text Height:'+textHeight);
console.log('Text Size:'+textSize);
if (textHeight > aboutHeight || textWidth > aboutWidth){
text.style.fontSize = textSize - 0.1;
textResize();
}
}
2 Answers
Marcus Parsons
15,719 PointsHey Michael Paccione,
The problem you're running into is that when you call text.style.fontSize = textSize - 0.1;, it is returning NaN because textSize is a string containing "#px" (where # is the current font-size) and you are trying to subtract 0.1 from that. Instead, you should parse the number from textSize and then subtract 0.1 from that. I don't know the overarching goal of your project because you could use em or % units for responsive text instead of using JavaScript (and I would recommend that), but if you are deadset on using JavaScript, I would use parseFloat to get the value of textSize like so:
if (textHeight > aboutHeight || textWidth > aboutWidth){
text.style.fontSize = (parseFloat(textSize) - 0.1) + "px";
textResize();
}
That will now decrement the current font-size by 0.1px each time the script is run.
michaelangelo owildeberry
18,173 PointsWhere is the else statement? =)
Michael Paccione
9,017 PointsDon't need it.
Would be else{}
Michael Paccione
9,017 PointsMichael Paccione
9,017 PointsAwesome, this is the advice I was looking for.
I am using em's for the text but I still have to add media query breakpoints for the different screen sizes. The page I have in mind features mainly a block of text and is tedious to use media queries for so I thought this would be a quick fix. I will test this out and if it works I'll come back and best answer you.
Michael Paccione
9,017 PointsMichael Paccione
9,017 PointsYea this worked! Thank You.
The idea behind this is to have a perfect size text without ever changing the em's. I could go further and set a minimum offset difference between the two elements and have the em's change from say a 42inch screen to a 6inch phone without doing any css change. I'll likely look towards making this a plugin.
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsMy pleasure, Michael. I'm certainly happy it worked! You should be aware, though, that if a user has JavaScript disabled, you lose all responsiveness in the text unless the units are set via CSS. I think media queries might be faster, because you only need a few of them to cover a lot of pixelated ground lol. If it's in a just for fun project, though, go nuts with it! Good luck, man!
Michael Paccione
9,017 PointsMichael Paccione
9,017 PointsYes media queries are definitely faster. I upped the increment to 0.5 for faster load. With media queries I'd have to write a new one every 100-200px width and then more for when the height changes into a portrait view...every 100-200px change in that as well. I remember when I started learning I thought oh I can set text to a % great...percentage of a container...not! =/