Dynamic Increase / Decrease Font Size Box with Javascript
Web Accessibility is important aspect of the modern websites and including functionality for increasing / decreasing the font-size of the body text is a good step for achieving it. With all recent A grade browsers this is kind of unneeded since they have build in zoom functionality (ctrl + / ctrl -) but still there are couple of advantages for using custom solution:
- Preventing broken design due to resizing displacements
- Easier for less experienced users who don’t know how to zoom from the browser
- Looks kind of cool
The script I’ve written has the following features:
- Stores settings (increase/decrease value) in cookie
- Uses style switching (overwriting) so there is no font resizing after page load
- Limits the resizing to three steps in each way
Here is the code and example. Note that I’m changing only the body font-size because all paragraphs are using relative units (em). If you prefer to use absolute units (px) you will need to declare all CSS selectors you are using.
Of course there are couple of things which can be improved but I wanted a simple script working under all major browsers : IE 6+, FF, Opera, Safari.
Tags: accessability, font resize, JavaScript, zoom
February 7th, 2009 at 7:10 pm
Heya, this is really cool, can you lend a guy a hand on how to implement this into my website?
February 7th, 2009 at 7:26 pm
sure drop me a line (mail, skype, whatever)
February 20th, 2009 at 1:25 am
Great script, Peter! Just having one small issue while integrating this into my site with it defaulting to the largest size?
February 21st, 2009 at 3:09 am
it stores the last value in cookie, delete your cookie and check again
March 12th, 2009 at 11:11 am
Thanks for this script.
March 18th, 2009 at 8:18 pm
[...] Text Resizer [...]
March 27th, 2009 at 7:36 am
Hi, I was searching for this for a long. Would you please mail me the script and how to add this to a website. Thanks in advance.
March 27th, 2009 at 7:52 pm
@Aby check the example – it is all there
March 31st, 2009 at 8:59 pm
As a visual impaired person, I don’t like an idea of increase/decrease font size. I never used the buttons “+” and “-”. There are much better options available – most of them are external to browser. In Linux there is a screen magnifier derived as plug-in for Compiz available just after installation. I use it on the daily basis. For Windows there are (crappy and expensive but still…) other magnification options and screen readers, which could read text that we point on (it’s especially good when eyes are tired).
There also internal good solutions for resizing fonts with layout (I think it works only on FF) described somewhere on yahoo – it doesn’t need JS. As far as there are better solutions for disabled peoples we, programmers, don’t need to do extra work writing code you posted here. However it’s extremely important to tell disabled people that there are these solutions and teach how to use them. As far as I’m concerned you are from Bulgaria, and there are problems with money for specialized computer systems for disabled people. In that case you should take this into your own hands and spread a word about abilities of free Linux. I’m sure this is valuable activity.
Feel free to contact me if you have any questions. I have big experience in the field of researching web usability for disabled people, and own experience as one of disabled web programmers.
April 10th, 2009 at 3:23 pm
Hey man i have been trying to use ur javascript font size script in my cms made simple content management site.
I have created a seperate javascript file here
http://www.armaghruraltransport.co.uk/dynamic-font-resize.js
i have placed this code into the content area div on my index page.
A+ a-
i have attached the javascript link to the template here
{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}
but nothing seems to be happening, can you see any reason why?
April 10th, 2009 at 3:38 pm
you have forgotten the id of your body tag, currently in the JS it is named #your-body
April 13th, 2009 at 11:14 pm
cool man cheers
April 25th, 2009 at 4:57 pm
Hi Peter,
Nice script, both modifiable and unobtrusive. I like it and am trying to work it into my current design. However, I keep running into a small problem. When I rename the body ID from “your-body” to anything else, the script does not function. I’m making the changes in the CSS, the HTML, and this line in the JS:
#your-body {font-size:’ + (10+x) +’px;}\
I would think I could rename it anything I wanted to, i.e.
#foo {font-size:’ + (10+x) +’px;}\
as long as I made the corresponding changes in the CSS here:
#foo{
and in the HTML here:
(Sorry to be pedantic, but I want to make sure I’m saying everything straight.)
Any thoughts? Thanks, Peter.
April 25th, 2009 at 7:03 pm
@Black Max – it should be working, at least I don’t see a reason why. Can you put the code somewhere so I can give it a look?
April 26th, 2009 at 12:38 am
Peter, now it seems to work, at least in a demo page. Go figure.
Maybe it was a cookie or cache issue…?
June 4th, 2009 at 8:54 am
It will be good if the code gets uniformly re-sized. If the syle code is applied to the parent tags like div’s etc, instead of p tags it would be great. There is id=”decrease” defined in the <a>, however the syle definition for the same is missing, oe am i missing something?. Then it would have been great. Also a Reset option will be very very useful. However the script is great thanks.
June 4th, 2009 at 9:46 am
Generally it is best to use relative size fonts (em, %) this way you can adjust only the size of the body tag. The decrease id is not used (i think) and reset option is easy to implement, just store the initial value in some var.
July 1st, 2009 at 2:25 pm
good job peter thanks for the code.
I’m using it.
but I’m also interested in Adrian Kalbarczyk comment.
I think I will google it in my spare time.
I wanna ask you something if it’s ok with you.
In realized your web site identifies that I’m using adblock how can you do that?
Can you show us how to do that?
And after that I won’t use adblock plus in your site and I will happily click your ads.
Thanks in advance
July 1st, 2009 at 2:50 pm
@emre – For the ads basicly i check the size of the iframe. Here is the code:
if ($$(“.google-sense468″)[0] && $$(“.google-sense468″)[0].clientHeight == 0 && $(‘block-warning’)) $(‘block-warning’).setStyle(‘display’,'block’);
October 27th, 2009 at 2:47 pm
Hi,
Nice script, works very well!
What if I want to use the same script at two or more places? For example at #your-body and #your-body2 etc.
So how should I add #your-body2 at the code?
October 29th, 2009 at 12:51 pm
@Apparatus – if you use relative font sizing all fonts on your page will resize
November 23rd, 2009 at 9:56 am
Nice code
i want the code something like which has radio buttons having options like small, larger, largest, medium
and when user clicks on radio button and apply the changes must get applied
Plz can u help me out
November 23rd, 2009 at 12:23 pm
@sangeetha – well create three radio buttons and attach click/selected events to them, then call the increase/decrease function
January 2nd, 2010 at 10:17 am
Friend, where should I paste into?
my Blog XHTML?
please teach me, thanks.
January 13th, 2010 at 10:50 pm
Hi., Peter Nice work., It works fine., ..,
——–
i had gone thru all u r post…..
I had a question..,
Similar to this work., is it possible to change the background color(not only the color., but also font color as per the bgcolor ets) as per the user choice… it similar to theme creation’s… Do u have any idea doing this in css & javasript….
January 15th, 2010 at 1:18 am
@Yasin – Best is to replace the whole css, there are examples, google it
January 15th, 2010 at 10:39 pm
Hi, Peter great work
Thanks for the great script.
I was able to integrate in HTML code, but I have a problem that certain elements do not work in IE.
Is there a solution to this problem??
Thanks in advance.
January 22nd, 2010 at 9:11 pm
Usefull tutorial, thx
January 29th, 2010 at 4:50 pm
Peter,
This is certainly the best font resizer I have seen. How can it be changed to apply only to a with a specified id instead of the entire ?
Thanks
January 29th, 2010 at 4:52 pm
Peter – resending. My div and body words did not appear in the original text
This is certainly the best font resizer I have seen. How can it be changed to apply only to a div with a specified id instead of the entire body?
Thanks
March 26th, 2010 at 5:08 pm
Works like a charm – and easy customisable, even for a JS rookie like me. Thanks!
July 19th, 2010 at 7:44 am
can u tell how to use this code in our website
August 16th, 2010 at 4:43 pm
We have implemented your javascript and given the body an id of “school”. I have altered the style accordingly, yet the buttons seem not to make a difference. Can you advise ?
thanks !
Andy
September 27th, 2010 at 6:22 pm
Hi,
Thanks so much for this article. I guess I am one of those hundreds searching for something like this.
I use macromedia dreamweaver in developing my sites. Can you mail me an example of how i can incorporate this in a web page? Will be glad if I can get it.
Regards
March 4th, 2011 at 5:11 am
Thanks for your great script. It works like a charm, wondering whether you can add another function to return to default size.
regards
March 5th, 2011 at 12:48 am
Thanks again for this great font-resize tool. I used it a few years ago and am now implementing it again. The darn cookie issue is really messing with me again, though. Is there a way to remove it from the javascript or at least have it not remember the largest size? It’s really throwing me (and the client) for a loop to continually erase our cookies during this testing phase.
April 11th, 2011 at 12:39 am
I was interested to know how to incorporate your code , like where, and how of it. Please let us know. Where to find the info on how to put it in my firefox browser
April 16th, 2011 at 1:28 pm
Thanks for your great script.
January 15th, 2012 at 3:08 pm
Thanks for a great script! I have a question, the script does not erase the memory in Internet Explorer 9. Open your example by increasing the IE9 IE9 letter close and reopen, it will be the size that you left. Do you have any idea to solve this error? Thanks again and sorry for my bad English.
January 21st, 2012 at 1:46 pm
@Antonio – uncomment eraseCookie function call