Description
This allows the user to change the size of the font on the page by clicking an anchor link that will manipulate the css font-size property according to whether they choose to increase or decrease the font.
In this particular example, clicking the anchor tag only changes the font-size of the p elements on the page (not the list items). If you wanted to change the font on an entire page, you may call to a #wrap div to get all child elements on the page and increase the font size across the entire page. Conversely, you can call to a specific element through its unique id to target one particular element on the page.
Demo
Make the font larger.
Make the font smaller.
The Code:
HTML
<a id="larger" href="#">Make the font larger.</a><br /> <a id="smaller" href="#">Make the font smaller.</a>
jQuery
<script type="text/javascript" charset="utf-8">
$(function() {
$('a').click(function() { // run this function onclick
var os = $('p').css('font-size' /*, '12px' -- adding comma and another parameter of font-size would set the font-size to twelve pixesls. If you just have the one parament it will get the css value. So you can both and GET and ASSIGN css values with .css */); // create a variable called os (original size) and store the size of the font of the p element designated in the css. Bascially, find the p tag and find the font-size propterty in the css and store that value in the variable os.
var num = parseFloat(os, 10); // create a variable called num (number). parseFloat goes through and gets anything that is an integer and removes the rest...leaving us with just a number value. The '10' parameter means we are working in base 10 (don't know why or how, just do it, research more later if necessary).
var uom = os.slice(-2); // create a variable called uom (unit of measure) and set it equal to the value of the last two characters stored in os (the px, or em) so it is saving the original unit of measure.
$('p').css('font-size', num / 1.1 + uom); // this is the default action when the anchor tag is clicked. However, follow the if statement below to see what will happen if certain other conditions are met. Also note, since we are using a second parameter, not just font-size, we will be ASSIGNING a font-size to p, not GETTING it.
if(this.id == 'larger') { // this checks to see if the id of the anchor tag clicked has an id equal to larger. 'this' refers to 'a' defined above. .id refers fo the id of that a, and =="larger" checks to see if the value of the id is in fact "larger".
$('p').css('font-size', num * 1.1 + uom); // if the above statement is true, if the id is larger, then increase the font size by 1.4. You could set creat a variable and set it equal to num * 1.4 + uom ... but in this case, we are just writing it out by hand.
}
return false;
});
})
</script>
