Simple DHTML Font Sizer

From Dev411: The Code Wiki

Changing font sizes for websites first hit the news when Wired added it to its website back in 2002. Here is a simple font sizer script that relys on DOM but does not require any custom CSS tags. It is good for understanding how the process works in an isolated setting.

Table of contents
1 Synopsis
2 Description
3 Methods
4 Source
[edit]

Synopsis 

<script type="text/javascript">

var fSizer = new fontSizer(2,'fontSizerCookie');

</script>

<body onload="fSizer.init('body');">

<input type="button" name="+ Font Size" onclick="fSizer.adjust('body',1)">
<input type="button" name="- Font Size" onclick="fSizer.adjust('body',-1)">
<input type="button" name="Reset Font Size" onclick="fSizer.reset('body')">
[edit]

Description

A simple font sizer good for learning.

  • Can change items by id or tag name
  • Uses absolute-size keywords (described here (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/fontsize.asp)). Using percentages and relative size would provide for a better experience, especially if you wish to preserve different relative sizes between the text on your page.
  • Uses cookies to store the user's font size preference across a session. It uses two generic global functions setCookie and getCookie. You should be able to find suitable scripts for these.

Tip:

  • A good practice is to write out the controls using JavaScript's document.write so if a browser isn't JavaScript capable, they won't see controls they can't use.
  • Instead of using the init client method to resize the font on the page when it loads, read the cookie on the server and set the font initial font size on the server.
[edit]

Methods

new (defaultSize,cookieName)

Creates new fontSizer object. The default size is the size to show when there is no cookie. The cookie name is the one used by fontSizer.

init (item)

Sets initial font setting based on stored cookie value or configured default value.

adjust (item,increment)

Increment is a positive or negative integer. Incrementing beyond size range will set the setting at either the minimum or maximum setting. The settings are determined by the number of absolute font size keywords array.

reset (item)

Sets tags within the item to the default font size.

[edit]

Source 

function fontSizer (defaultSize,cookieName) {
  if (!document.getElementById) return;
  var d = document, t = this;
  t.defaultSize = defaultSize;
  t.cookieName = cookieName;
  t.minSize = 0;
  t.maxSize = 6;
  if ((t.defaultSize < t.minSize) && (t.defaultSize > t.maxSize))
    t.defaultSize = 2;
  t.currentSize = t.defaultSize;
  t.sizeNames = new Array('xx-small','x-small','small','medium',
    'large','x-large','xx-large');
  t.tagsToChange =new Array('div','td','th','p','tr');
  t.init = function (item) {
    t.setFontSize(item,getCookie(t.cookieName))
  };
  t.adjust = function (item,adjustment) {
    t.setFontSize(item,Number(t.currentSize)+Number(adjustment))
  };
  t.reset = function (item) {
    t.setFontSize(item,t.defaultSize)
  };
  t.setFontSize = function (item,newSize) {
    var itemElement = null, itemTags, i, j;
    if (isNaN(newSize)) newSize = t.defaultSize
    else if (newSize < t.minSize) newSize = t.minSize
    else if (newSize > t.maxSize) newSize = t.maxSize;
    t.currentSize = newSize;
    setCookie(t.cookieName,newSize);
    if (!(itemElement = d.getElementById(item)))
      itemElement = d.getElementsByTagName(item)[0];
    itemElement.style.fontSize=t.sizeNames[newSize];
    for (i=0;i<t.tagsToChange.length;i++) {
      itemTags = itemElement.getElementsByTagName(t.tagsToChange[i]);
      for (j=0;j<itemTags.length;j++)
        itemTags[j].style.fontSize=t.sizeNames[newSize];
    }
  }
}
Retrieved from "http://www.dev411.com/wiki/Simple_DHTML_Font_Sizer"