Through the magic of MyBlogLog statistics, I found someone trying to use one of my javascript codes. It is always touching to find out that someone has found your work useful and it spurs you on to better things.

In this case, the user wanted something slightly different out of the code than what I had provided. Changing a page's font size was the code in question here, but rather than changing it using the link method I had provided, they wanted to display a different font size based on a reader's screen resolution. This is an inspired idea, I thought, as monitors get bigger and resolutions get smaller and text on screen disappears. This is why I use 1024x768 otherwise I wouldn't be able to read anything!

Screen.width

Thankfully, javascript provides us with a very easy way of discovering the screen resolution, screen.width gives us the width and screen.height unsurprisingly gives out the height of the user's screen. For the purposes of this example, I am going to use the height as my guide to the full resolution. Also, for simplicity I will only be maing one distinction between sizes, one size for a width of 800 pixels or less and another font size for greater than 800 pixels. I will also be modifying my previous example of a font sizing script.

Onto The Code

As we are changing the font size as soon as possible, we need to modify the init() function I wrote before as it runs as soon as the body of the site has loaded. The code at the moment is:

function init() {
if(readCookie('fs')) { var si = parseInt(readCookie('fs')); }
if (!document.getElementsByTagName) {return false;}
var sizes = new Array('0.9', '1', '1.1', '1.2', '1.3');
setFontByTag('div', sizes[si]+'em');
}

Currently it checks if we have stored a previous font size in a cookie and loads that font size, we need it to check first for the cookie (as we will be setting one rather than checking the screen size each time) then the screen size. Here is the modified code:

function init() {
var sizes = new Array('0.9', '1', '1.1', '1.2', '1.3');
if(readCookie('fs')) {
var si = parseInt(readCookie('fs'));
if (!document.getElementsByTagName) {return false;}
setFontByTag('body', sizes[si]+'em');
}
else if (screen.width > 800) {
var si = 4;
setFontByTag('body',sizes[si]+'em');
createCookie('fs',si,30);
}
}

Now the first if statement carries out the function we already had and it starts to get interesting during the else if section. If no cookie is set then we check if the screen width is greater than 800. if it is, we use the pre-written setFontByTag function to set the font size of the body element to 1.3em (see the array of sizes declared at the top). You can set it to whatever you like by editing the array and/or the index of the array set in the variable "si".

You can now use the script by downloading Fontsizer version 2. The instructions for use are in the script. Finally, here is a working example just to make sure it works!

Let me know if there are any problems with the code and please tell me if this helps you out!