Dynamically Change Text Size Using Javascript
~ Tutorial & Code Samples
May 17, 2009
   
Objective
To present the visitor of your web page with links for changing the text size on your page so that it is more readable for them.  This is great for older users who have trouble seeing and are not as computer literate to know how to adjust text settings via their browser options. 
 
Background
There are various explanations on the internet regarding how to dynamically change text size but the key is to store the text size choice in a cookie so that the choice is remembered across all of the pages of your website.
 
Overview
1) Present the user with three different text resizing links to choose from.
2) Establish a portion of your page (usually the main content area) to be the only area affected by the text size change.  This is done via a <div> tag.
3) Use javascript functions to find the <div> tag and resize its contents.
4) Use javascript functions to store the text size choice in a cookie (set the cookie).
5) Use the onload event of the body tag to fetch the cookie.
 
Assumptions
 I am using HTML pages with Javascript.  I am also using IE8.
 
Procedures
Step #1 - Provide 3 text size options to the user
Add the following code somewhere near the top of your page (within the body tag):
Note the javascript:void(0);  This tells the browser that we don't want to navigate anywhere, we just want to call our javascript function named changemysize() via the onclick event.
Tip: Any content that exists within <font> tags can never have its text dynamically resized.
 
Step #2 - Establish a portion of your web page to be affected by the text change
Add the following <div> tag anywhere within the body of your page.
Our javascript function will locate this area (by its id name) and only change the text size of this area.
Tip: If you want the entire contents of your web page to have its text changed, then place the <div> tag immediately after the body tag so that the <div> tag encompasses everything.  Alternatively you can choose to have multiple <div> tags throughout your page and have each of their contents text size affected differently.
 
Step #3 - Set the onload event of the body tag to fetch the default text size choice
Replace your body tag with the following:
When the page loads, the javascript function will be called and the previously chosen text size will be fetched.  This is useful for sub pages to know what choice was made on the previous page.
 
For the sake of continuity I am sharing the entire contents of my <body> tag here:
 
Step #4 - Use javascript functions to change text size and store the choice in a cookie
When a user clicks on one of the text resizing choices, the javascript function changemysize() gets called.  Place the following code within your <head> tag:
This function locates the <div> tag, then changes the text size of its contents.  Finally it stores the text size choice in a cookie for future retrieval by subsequent pages of your website.
Tip: You could add multiple <div> tags throughout your webpage, each experiencing a different text resizing.  In fact each <div> tag could get resized as a proportion of the original size chosen.  This is useful for menu areas which would grow only slightly compared to the body area.  Of course you would need to label each set of <div> tags with a different id name.  You would also need to create new variables like var div2, reference them to the new set of div tags, and set their value appropriately like this:
div2.style.fontSize = myvalue - 5 + "px";
 
Step #5 - Use javascript functions to fetch the cookie and set the default size
When a user visits a sub page of your site, the original text size choice should hold.  A couple more javascript functions achieve this.  I'm including the entire contents of my <script> tag here:
Note your body tag onload event calls the function mydefaultsize() which in turn calls the function getmycookie()
Tip: When you test everything out on your local computer, you will most likely get the IE warning:
"To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options...".
 
For now you must click it and choose to Allow Blocked Content.
But never fear, once you place your files on a legitimate web server you will no longer get this warning message.
 
Step #6 - Download and try out the complete files here
Save the following two files to your computer and then run one of them in a web browser to see how they work:
my_test_page_1.htm my_test_page_2.htm
 
Step #7- Enjoy!
I hope this tutorial has been helpful, clear, and concise.  Feel free to send me feedback at the email address shown at the very top of this page.  Happy coding!
 
 

 Articles
   
click to read . . .
 

 Services
   
Project Management
Full SDLC Management,
Vendor Management,
Resource Management,
Timeline Management,
Risk Management
 
Business Analysis
Requirements Gathering, Systems Analysis, Design, Testing, Implementation, Documentation
 
Application Development
Paperless Information Systems,
Point of Sale Systems,
Gift Card Systems,
Human Resource Systems,
Medical Patient Tracking,
Digital Medical Patient Charts,
Online Shopping Carts,
Smartphone Apps (Palm Pre)
 
Systems Administration
Computer Network Installation,
Server Maintenance & Backup, Database Management,
Computer Maintenance & Repair
 
Graphic Design
Websites, Logos, Brochures, Magazine Ads, Business Cards