(4 votes, average: 2.75 out of 5)
Loading ...Javascript - text resize with cookie
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 here: http://www.quirksmode.org/js/cookies.html.
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 found this useful, please consider linking to this page or subscribe to my feed! Thanks!
Tags:code , javascript , js , programming stuffPopularity: 48% [?]
Any ideas? Thanks a lot for your help Nick!
Hi Nick, have you been successful in integrating this type of capability into a WordPress blog? Any chance you could give us a demo on your next post?