Changeable Font Size Script

Last Edited: 2009-04-15

Allows the user to change the font size on your web pages, and uses a cookie to remember the selected font size.

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Changeable Font Size Script</title> <meta name="title" content="Changeable Font Size Script" /> <meta name="author" content="Programmer Central" /> <meta http-equiv="Content-Type" content="text/html; charset='UTF-8'" /> <script type="text/javascript"> var COOKIE_NAME = "font_size_preview"; var COOKIE_EXPIRES = 7; var font_sizes = new Array(12, 14, 16, 18, 20); (function() { if (window.addEventListener) { window.addEventListener("load", setup_font_size, false); } else { window.attachEvent("onload", setup_font_size); } })(); function setup_font_size() { change_font_size('default'); var font_size_links = document.getElementById("font_size").getElementsByTagName("a"); for (var i = 0; i < font_size_links.length; i++) { setup_font_size_link(i); } } function setup_font_size_link(i) { var link = document.getElementById("font_size_" + i); link.onclick = function(){change_font_size(font_sizes[i]);}; } function get_cookie(cookie_name) { //This function has been modified from an example at W3Schools if (document.cookie.length > 0) { start = document.cookie.indexOf(cookie_name); if (start != -1) { start += cookie_name.length + 1; end = document.cookie.indexOf(";", start); if (end == -1) { end = document.cookie.length; } var cookie_value = document.cookie.substring(start, end); return unescape(cookie_value); } } return null; } function set_cookie(cookie_name, cookie_value, expire_days) { var str = cookie_name + "=" + escape(cookie_value) + "; "; var expire_date = new Date(); expire_date.setDate(expire_date.getDate() + expire_days); str += "expires=" + expire_date.toGMTString() + "; path=/;"; document.cookie = str; } function change_font_size(size) { if (size == 'default') { //Get font size from the cookie if possible otherwise set the font size to the default value size = get_cookie(COOKIE_NAME); if (!size) { size = 16; } } //Change the font size document.getElementsByTagName("body")[0].style.fontSize = size + "px"; //Store the font size value in a cookie set_cookie(COOKIE_NAME, size, COOKIE_EXPIRES); } </script> <style type="text/css"> #font_size .smallest { font-size: 12px; } #font_size .small { font-size: 14px; } #font_size .default { font-size: 16px; } #font_size .large { font-size: 18px; } #font_size .largest { font-size: 20px; } </style> </head> <body> <h1>Changeable Font Size Script</h1> <div id="font_size"> <a href="#" class="smallest" id="font_size_0">A</a> <a href="#" class="small" id="font_size_1">A</a> <a href="#" class="default" id="font_size_2">A</a> <a href="#" class="large" id="font_size_3">A</a> <a href="#" class="largest" id="font_size_4">A</a> </div> <p>Change the font size above and then reload this page.</p> <table summary="Table Example" border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>Item 1</li> <li>Item 2</li> </ol> </body> </html>

The preview will open up in a new window.

Information

If you use this script on any of your web pages then please provide a link back to us.

More free JavaScript Accessibility scripts.

Rate This Script

Rate This Script
	Excellent!
	Very Good
	Good
	Fair
	Poor

Be Sure To Check Out These Scripts
CSS/JavaScript Drop Down Menu	A horizontal drop down menu script which uses Javascript and CSS. When the mouse pointer is moved over a link a further set of links is revealed.
PHP Directory List	Displays a list of all files and directories in a directory.

Top of Page

Programmer Central

Free Web Related Scripts, Tutorials, and Generators.

Search

Links

Font Size

Random Script

Support Us

Changeable Font Size Script

Code

Information

Rate This Script