Dynamically Change Text Size Javascript Text Size Page Text Resizing

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):


						<font size="2">
<a href="javascript:void(0);" onClick="changemysize(16);">A</a>
</font>
<font size="4">
<a href="javascript:void(0);" onClick="changemysize(20);">A</a>
</font>
<font size="5">
<a href="javascript:void(0);" onClick="changemysize(25);">A</a>
</font>

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.


						<div id="mymain">
Only this text gets affected
</div>

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:


						<body onload="mydefaultsize()">

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:


						<body onload="mydefaultsize()">
<font size="2"><a href="javascript:void(0);" onClick="changemysize(16);">A</a></font>
<font size="4"><a href="javascript:void(0);" onClick="changemysize(20);">A</a></font>
<font size="5"><a href="javascript:void(0);" onClick="changemysize(25);">A</a></font>
<br>
Welcome to page ONE !
<br>
<div id="mymain">
This text gets affected
</div>
<br>
See you later...
<a href="my2.htm">go to next page</a>
</body>

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:


						<script type="text/javascript">
function changemysize(myvalue)
// this function is called by the user clicking on a text size choice
{
// find the div to apply the text resizing to
var div = document.getElementById("mymain");
// apply the text size change
div.style.fontSize = myvalue + "px";
// store the text size choice into a cookie
document.cookie="mysize=" + myvalue;
}
</script>

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:


						<script type="text/javascript">

function changemysize(myvalue)
// this function is called by the user clicking on a text size choice
{
// find the div to apply the text resizing to
var div = document.getElementById("mymain");
// apply the text size change
div.style.fontSize = myvalue + "px";
// store the text size choice into a cookie
document.cookie="mysize=" + myvalue;
}

function getmycookie(myname)
// this function is called by the function mydefaultsize()
// this function merely looks for any previously set cookie and then returns its value
{
// if any cookies have been stored then
if (document.cookie.length>0)
  {
// where does our cookie begin its existence within the array of cookies  
  mystart=document.cookie.indexOf(myname + "=");
// if we found our cookie name within the array then
  if (mystart!=-1)
    {
// lets move to the end of the name thus the beginning of the value
// the '+1' grabs the '=' symbol also
    mystart=mystart + myname.length+1;
// because our document is only storing a single cookie, the end of the cookie is found easily
    myend=document.cookie.length;
// return the value of the cookie which exists after the cookie name and before the end of the cookie
    return document.cookie.substring(mystart,myend);
    }
  }
// if we didn't find a cookie then return nothing  
return "";
}

function mydefaultsize(){
// this function is called by the body onload event
// this function is used by all sub pages visited by the user after the main page
var div = document.getElementById("mymain");
// call the function getmycookie() and pass it the name of the cookie we are searching for
// if we found the cookie then
	if (getmycookie("mysize")>0)
	{
// apply the text size change	
	div.style.fontSize = getmycookie("mysize") + "px";
	}
}

</script>

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