IndoLance.com

I was telling you in a previous article – Javascript – text resize – how you can give your site’s visitors the possibility to see your page’s content at different text sizes, using javascript. Let’s take this further and think a little about the user… now, if he really needs a bigger text size, then he will have to use those buttons or links on each page – not so convenient, right?

Well, don’t you worry about this because that’s what we have cookies for!

Using the same example as in the previous article, here is what you have to do:

1. Add two more functions to the javascript file for cookie’s handling

Javascript code:

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

The createCookie function has three parameters: the name and value of the cookie and the number of days it is to remain active. If you set the number of days to 0 the cookie is trashed when the user closes the browser. If you set the days to a negative number the cookie is trashed immediately.
In my example, I used “textsizestyle” as cookie’s name, javascript variable textsize as value and I set it to be active for 365 days: createCookie("textsizestyle", textsize, 365);.

The readCookie function has only one parameter: the name of the cookie. It returns the value of that cookie or null.
In my example, I used “textsizestyle” as cookie’s name: readCookie("textsizestyle");

More info on these two functions and cookies in general Go to Quirksmode site.

2. Use createCookie to store user’s preferred text size

I used it in the fsize function, so that each time the user change the text size, the font value is stored in the cookie. Here is the modified fsize function:

function fsize(size,unit,id){
var vfontsize = document.getElementById(id);
if(vfontsize){
vfontsize.style.fontSize = size + unit;
createCookie("textsizestyle", textsize, 365);
}
}

3. Use readCookie to change text size on rendering

I added the following piece of code at the end of the page to read the cookie’s value and in case there is a value stored into the cookie to force the page content to be render at that specific font size.

<script type="text/javascript">
var cookie = readCookie("textsizestyle");
textsize = cookie ? cookie : 10;
fsize(textsize,'px','content');
</script>

To make it easy, I have put them all js functions in a javascript file, ready for you to download and add to your site.

[ Download Javascript Text Resize File ]

That’s it! Enjoy!

If you want to give your site’s visitors the possibility to see your page’s content at different text sizes, you can do it with the following javascript text resize solution.

First you should decide which part of the page will be affected by text resizing and mark it with an id – in my example id=”content”. It can be a div or a table or the entire page if you want.

Alright, the javascript code..

Simple Text size Switcher

function fsize(size,unit,id){
var vfontsize = document.getElementById(id);
if(vfontsize){
vfontsize.style.fontSize = size + unit;
}
}

This function has 3 parameters: size (like 10, 80, 2), unit (like px, %, em) and id (like content).

Next add links for text resize – you can use text or images for these – for example:

<a href="javascript:fsize(10,'px','content');"> Increase size </a>
<a href="javascript:fsize(14,'px','content');"> Reduce size </a>

There you have a simple text size switcher!

Dynamic Text Size Changer

I wanted to change the text size dynamically by 2 px at each click, so I changed the code a little bit. I used another function to calculate the new value of the text size by adding or subtracting 2 out of a js variable (textsize) which holds the current text size value.

Here is what you need to add into the javascript code:

var textsize = 10;
function changetextsize(up){
if(up){
textsize = parseFloat(textsize)+2;
}else{
textsize =parseFloat(textsize)-2;
}
}

Now, add onclick event on those links to call the new function and also change the first parameter of fsize function with the js var (textsize) – like this:


<a href="javascript:fsize(textsize,'px','content');" onclick="changetextsize(1);"> Increase size </a>
<a href="javascript:fsize(textsize,'px','content');" onclick="changetextsize(0);"> Reduce
size </a>

That should do it! Enjoy!