Dynamic Font Sizes

One of the undocumented features on the web is how dynamic it is, especially in a Web 2.0 environment. Even at today, the web has evolved from what it was in the mid to late 90s. In the late 90s every site was static, and if something was to be changed it would take the designer or web master to change the page. Since then, the web has become a even more interactive environments. The script we are going to be coding today is small, but will give viewers of your site a lot of control over the site’s font. While giving the user a lot of control, you can still control the look and feel of your site.

To create the “illusion” that the user has a lot of control over the font on your site, we will be using a little bit of JavaScript with some CSS. JavaScript has become the glue that binds a lot of different technologies with HTML. Using JavaScript, we can return CSS attribute values then edit those value and dynamically replace them. To get the CSS values with JavaScript we are going to be “tapping” into HTML’s DOM Style Object. (You can learn more about HTML’s DOM Style Objects at W3school.com (http://www.w3schools.com/htmldom/dom_obj_style.asp)) The style object we are going to be using is fontSize. Now that we know what style object we will be needing we can structure our JavaScript to retrieve this value. The basic structure is document.getElementById(id).style.fontSize, where id is the id of the element you want to edit. If we had an element name crazy_fonts, then we would use document.getElementById(crazy_fonts).style.fontSize. If the crazy_fonts element had it’s font size set at 12px, then JavaScript will return 12px.

So now that we have can get the font size, we can set what JavaScript is returning to a variable, and work with the variable. Before we change the font size, we will first need to make for sure that the variable we are working with is actually a number. To do that we will use the JavaScript function named parseInt. This function will take any not numeric value and remove it from the variable. So if we use to use something like

var font_size = parseInt(document.getElementById(id).style.fontSize);

We can now store the current font size for any element on a site to the variable font_size. Now that we have a clean numeric number, we can now create a function for the user so that they can change the font size “without” needing to edit any files on the server. Here is the function that we are going to be using.

function ChangeFont(id, change){
var block = document.getElementById(id);
var font_size = parseInt(document.getElementById(id).style.fontSize);

if (change == ‘increase’){
font_size = font_size + 2;
block.style.fontSize = font_size + “px”;
}
if (change == ‘decrease’){
font_size = font_size – 2;
block.style.fontSize = font_size + “px”;
}
}

If you don’t know JavaScript that well, don’t be afraid of the code. We will break the function down and you will see that it is very simple. Let’s start off with the first line. function ChangeFont(id, change){. This is a way to call a function with JavaScript. With this function, JavaScript is expecting two variable, id and change, to be sent to it. These variables are going to be used later in the function, and are passed to the function when the user interacts with the site. More on how that is done later, let’s go to the next part of the code.

var block = document.getElementById(id);
var font_size = parseInt(block.style.fontSize);

Here we see that there are two JavaScript variables being created. Var just basically tells the JavaScript handler, the user’s browser in most parts, that we want to create a variable. In this case we are creating two variable, block and font_size. The variable block isn’t really needed, and you can create the script without it. Block was added to the script to reduce the amount of typing needed to create the code. So now instead of typing document.getElementById(id), we can use block. Speaking of id. When creating the function we pointed that the script will be expecting a variable named id being sent to it. With block we are using that variable. This will allow us to apply this script to any element we would like it to apply to on our site. By passing the element’s id, it makes the code reusable. We already saw the second variable in the code. This variable will store the value set to the font size of the element we are wanting to change. Also, notice how instead of typing document.getElementByID(id) we used the block variable. Now moving to the next nine lines of code.

if (change == ‘increase’){
font_size = font_size + 2;
block.style.fontSize = font_size + “px”;
}
if (change == ‘decrease’){
font_size = font_size – 2;
block.style.fontSize = font_size + “px”;
}

These are two if statements, do basically the same thing, just sightly different. The both if statements are checking the values of the variable change (the second variable passed to the function). Depending on which if statement is triggered depends on what happens. If the value of change is “increase”, then script increases the current font size by two pixels and sets the element’s font size to the new size. If change is set to “decrease”, it does the same thing but decreases the font size by two pixels. After the if statements we close the JavaScript function by using a closing bracket (}). That is it for this part of the JavaScript. To make the script actually work, we will be using JavaScript’s Event features very shortly.

Here is a look at the HTML that we will be using. The HTML will consist of three div elements, and those JavaScript events we were speaking about.

Font:<div onclick=”ChangeFont(‘meat’, ‘increase’)”>+</div>
<div onclick=”ChangeFont(‘meat’, ‘decrease’)”>-</div>
<div id=”meat” style=”font-size: 12px;”>This font size will change depending on if you click the plus or minus signs..</div>

If you are familiar with JavaScript, then you may understand what is happening, you don’t understand we can clear that up also. Lets first look at the HTML that we do know, and we will get back to the JavaScript Events. You can tell that there is a div element with a plus (+) sign, and one with a minus (-) sign. There is another div element, which has an id of meat. This id can be anything, we are using meat since this is the “meat” section of the page. We can also tell that the id has a font size of 12 pixels which is being controlled by CSS. If we look back at the first two div elements, you will see the JavaScript event onclick. What this event does, is “activates” or runs the JavaScript code when the element is clicked on. What the code is telling JavaScript to do is to run the ChangeFont function that we created, and to send the id and change variables. Depending on which element is click, the script will send meat, and either increase or decrease. All we need to do now is put all the code together and we have a functioning script that will allow the user to change their font size.

<html>
<head>
<script language=”JavaScript” type=”text/JavaScript”>
<!–
function ChangeFont(id, change){
var block = document.getElementById(id);
var font_size = parseInt(document.getElementById(id).style.fontSize);
if (change == ‘increase’){
font_size = font_size + 2;
block.style.fontSize = font_size + “px”;
}
if (change == ‘decrease’){
font_size = font_size – 2;
block.style.fontSize = font_size + “px”;
}
}
–>
</script>
</head>
<body>
<div onclick=”ChangeFont(‘meat’, ‘increase’)”>+</div> <div onclick=”ChangeFont(‘meat’, ‘decrease’)”>-</div>
<div id=”meat” style=”font-size: 12px;”>This font size will change depending on if you click the plus or minus signs..</div>
</body>