Primary Function
1:function fontSizer(inc,unit) {
2:if (!document.getElementById)
3:return;
4:var size = initSize;
5:size += inc;
6:if (size < 0 ) {
7:size = 0;
8:}
9:if (size > 6 ) {
10size = 6;
11:}
12:initSize = size;
13:getBody = document.getElementsByTagName('body')[0];
14:for (i = 0 ; i < tags.length ; i++ ) {
15:getallTags = getBody.getElementsByTagName(tags[i]);
16:for (k = 0 ; k < getallTags.length ; k++)
17:getallTags[k].style.fontSize = (unit=='px') ? pixelArray[size]+unit: emArray[size]+unit;
18:}
19:}
Line 1:We create a
function named fontSizer and use two arguments, inc and unit. The inc
argument will be used to increase or decrease the font size by an array
position and the unit argument will allow us to choose between px and
em. This will be a clearer later in the script.
Line 2:Creates a conditional statement that tests to see if the browser supports the document.getElementById method.
Line 3:If the browser
fails the test, then nothing is returned, so that any browsers that
fails the conditional tests do not trigger a JavaScript error.
Line 4:Create a variable called size and we equate that variable to the initSize variable we created earlier.
Line 5:We then make our size variable increment or equate to the inc argument.
Line 6:We want to
signify when an array begins and when it ends, otherwise when we cycle
through the array the function has no way of knowing that the array has
ended or started. To do this we create a condition that looks to see if
the size variable is less than 0.
Line 7:If the size variable is less than 0, then the size variable is reset to 0. Otherwise it skips to the next condition.
Line 8:Closing bracket for condition.
Line 9:Now we create a condition to see if the size variable is greater than 6.
Line 10:if the size variable is greater than 6, then we reset it to 6, if not we move on to the rest of the script.
Line 11:Closing bracket for condition.
Line 12:The initSize variable is pointed back to the size argument that will store our array position.
Line 13:This line
allows us to collect the body tag of the document by creating a
variable called getBody and then employing the
document.getElementsByTagName method. The 0 indicates an array position
for the tag. Since there will only be one body tag in the document
setting it to 0, finds the first body tag it runs across.
Line 14:Now we create a for loop and cycle through our tags array and store that information in the variable i.
Line 15:We then want
to retrieve that information so we can put it to good use. To achieve
this we create a variable called getallTags. That variable is then
pointed to the getBody variable and we then ask the browser to find all
the matching tags from the array that are also contained within the
body tags. In this way any tags we want to affect will be affected and
those that aren't contained within the array will not.
Line 16:Then we run another for loop this time the purpose it to collect all the matching tags for us.
Line 17:The
getallTags variable with the k array has all the information we need
stored in it. So now we can dynamically manipulate all the tags that we
have defined in the array. To do this, we use the style.fontSize
syntax. In other words we are telling the browsers that all tags
contained within the array will have their font size altered in some
way.
We then point the getallTags variable
to a conditional expression. We ask the question does the argument unit
equate to px or pixels in other words. If the answer is yes then it
uses the pixelArray. The pixelArray then has the size variable attached
to it, so that we can tell what position the array is in when a user
clicks on a link. We then stick on the unit argument, which is defined
in the event handler. If the unit argument doesn't equate to px then it
uses the emArray instead.
If you wanted to you could make more
arrays for other units of measure and continue to create conditions to
see if the argument unit matches or not and then attach the
corresponding array depending upon your results.
Line 18 & 19:Closing brackets for function.
Then all we have to do is use an event handler like so and we are done!
<a href="#" onmousedown="fontSizer(1,'px')">Click for Larger Font</a>
<a href="#" onmousedown="fontSizer(-1,'px')">Click for Smaller Font</a>
If we wanted to leave some text
untouched as in the below sample, then we would omit a tag
purposefully. For example, I omitted the span tag in the example below
so that some text wouldn't change size, while the other text would.
View Finished Example
Download Finished Example
