Reputation: 15934
I need to put some icons for font size up and font size down on a website. It has been a while since I have done this and didn't know what was the score these days. Is JQuery the preferred method to deal with this or pure CSS. Also, do I need to do anything special with my font sizes i.e use em instead of px?
Thanks in advance.
Upvotes: 7
Views: 817
Reputation: 7906
I would go about it, by setting up all units in em
s. Then, it's a simple matter to scale all of it at once using a simple javascript, like so:
$(function () {
var fontSize = 1.1;
$("#larger").click(
function () {
console.log("click");
fontSize += .1;
$("body").css("font-size", fontSize + "em");
}
);
$("#smaller").click(
function () {
console.log("click");
fontSize -= .1;
$("body").css("font-size", fontSize + "em");
}
);
});
Upvotes: 5
Reputation: 2941
Normally, I use the 62.5% thing on body (so 1em == 10px), and then define all font sizes on the site in ems. For font scaling, I do one of two things:
Do a jQuery css change on the main container div, and set a font-size percentage. This will change all text on the site in a similar manner.
Do a jQuery class change on body to signify the new font size. Then you can have CSS rules to scale different parts of the page in different ways (only scale nav a little, body copy more, etc).
Upvotes: 1
Reputation: 1234
I would use pure css (although i would use some jQuery/js to modify the BASE font size live) it's best to use ems although it can get really frustrating as the ems cascade. (more on this later)
You need a base font size set in pixels at the top of the resizable area (12px is the standard) and everything under that should be in ems.
now for the frustrating part: keep in mind that if you have a div with font-size:0.9:em; and a nested paragraph with font-size 0.8em the paragraph will be smaller then expected as its base will be the div with font-size:0.9em.
once you work all this out though all you need to do is change the base font-size in pixels!
Upvotes: 2
Reputation: 377
CSS should work fine. Use em because the client can still set font sizes to there liking. For example if they have font sizes starting at 14 px, em 2 would set it to 28 px.
If you set font sizes in px you're setting yourself up for angry clients who have no control over font sizes in their browser of choice.
Upvotes: 2
Reputation: 21723
If you use percentages as font sizes within your CSS, you can just set the font size once on your BODY element and change that one value dynamically. Everything else will become a percentage of that.
Upvotes: 3
Reputation: 21476
You can do this a few ways.
What I would prefer is to switch stylesheets on each up or down click. You can use jQuery or just regular ole' JavaScript to accomplish that.
In this case, whether you use em or px makes no difference, as long as the size goes up or down in value in each stylesheet.
Alternatively, you could use JavaScript to simply alter the size of the text in a specific element. Again, units don't really matter. You're just altering the value (e.g. 12px to 14px, or 1em to 1.5em)
Upvotes: 2