May 26, 2009

jQuery (JavaScript) Font Resize

Here is a way to resize text with javascript. Calling these 2 functions from clicks on images or button is easy. Just add a click event to call the functions as needed.

This will take all the specified elements and increase or decrease whatever their line-height and font-size is by 2. A bug that I found with IE was that since I hadn’t declared a specific font-size for the elements IE returned the font-size as undefined and when I converted it to a integer and applying the new font-size I was getting sizes at over 600px. Firefox and Safari was of course doing what I wanted and was nicely inheriting their font-sizes in the DOM properly.

It’s a bit of a panicky solution and if you are implementing this kind function in a project and you know about it from the beginning, you can set the font-size on the body element and do all the other fonts and line-heights in “em”. Then you just have to resize the body font-size.

Leave a Reply