Very Simple Yet Effective Text Zoom Function

As part of a school project I had the main body of text at 11px, some people could read it, some couldn't, and so I created a zoom function. Unlike the normal zoom functions in JS or the browser's own zoom, which increase the size of everything thus throwing some areas out of proportion, mine only increases the size of the main body of text.

(using php tags to get code highlighting)

<table>
<tr><script type="text/javascript">
var px = new Array(11,12,13,14,15,16,17,18,19,20,21,22,23); // insert your own numbers here, these are the font sizes - goes as higher or as low as you want. If the number is less than the original font size you have yourself a zoom-out function too.
var size = 0;
function do_change_down(elemID) {

if (size > 0) {
size--
document.getElementById(elemID).style.fontSize = px[size]
}

}
function do_change_up(elemID) {

if (size < 12) { // number is how many elements in the px array. if there are more elements in the array, it will not use them all, it'll stop at that number, so make sure you increment it when you add more to the array.
size++
document.getElementById(elemID).style.fontSize = px[size]
}

}
</script>
<td>
<label for="zoom">Change font size: </label><a href="javascript:do_change_down('text')" id="zoom" name="zoom">-</a>&nbsp;&nbsp;<a href="javascript:do_change_up('text')" name="zoom" id="zoom">+</a>
</td>
</tr>
</table>


in this instance I have the main content area with the id="text" - change the do_change_down('your_element_id'); and same for do_change_up accordingly to the text you want to be 'zoomed' in on..

As it says in the title, this is a very simple function but is also very effective.