Review of a CSS font-size switcher

[mipapage]

Hello (this is my first post here!)

I am a bit of a js hack. Last week I threw together a Font-Size switcher which uses JS along with CSS to provide a function that when present in a webpage allows users to resize the text of the page.

I basically hacked this together. It seems to work fine in most major PC browsers - I haven't tested it on mac as I don't have one.

A sample of the function can be found here:
CSS Font Size Switcher (http://www.masadelante.com/css/sizeswap.htm)

I have attached the JS script for ease of viewing.

What I want to know is this: Although it works, I am not aware of the 'good habits you should have while writing js'. Can someone have a look at the code and let me know if I have made some sort of rookie mistake that will come and get revenge in the future?

Cheers,
Mike

[mipapage]

Hmm, can't seem to see the attached file, so, here's the JS:


// Here we declare some variables and check to see if cookie exists. If it does, get the variable
// snew, if not, set snew to 13px. Then write a style tag:
// body selector, font-size:"snew";
var size, dom, snew;
if(document.getElementsByTagName) dom=true;
if (dom) {
// check cookie...
snew = parseInt(readCookie('masadFs'));
//...and set to thirteen px if nothing found...
if (!snew>0) snew=13;
varsizeSwap();
//...then write either the 13px or the value from the cookie into the body tag:
document.writeln('<style type=\"text\/css\">body{font-size:'+size+'px;}<\/style>');
}


//functions - the following functions set the new size, change the value for the
//font-size attribute for the <div> tag (see note below), run the +- buttons,
//and of course fire up a pan of font-size cookies

//this applies the new font size from snew (size new) to size
function varsizeSwap() {
size = snew
}
// can you believe that Opera 7 chokes if you choose
// to replace the body font-size instead of the div font-size?
// as a result, I lost more sleep, here we set the div tag font-size to the new size
function docsizeSwap() {
if (!dom) {return false;}
document.getElementsByTagName('div').item(0).style.fontSize=size+'px';
// here we put the new size in the cookie
createCookie("masadFs",snew,60);
}

//the increase font function - here you can put a max size.
// The function checks the size of 'size', and if it's less than
// 20px, it adds one to 'snew', swaps that value to 'size' via varsizeSwap();
// then makes the change to the div with docsizeSwap();
function up() {
if(size<20){
snew+=1; varsizeSwap(); docsizeSwap();
}
}

// same as above, but this time font-decrease. Here you can set
// a minimun size.
function down() {
if (size>10) {
snew-=1; varsizeSwap(); docsizeSwap();
}
}



//I tried the cookie functions by Peter Paul Koch, but they made me itchy and want to go to bed.
//With a little more caffeine, I found these by searching Google, (setting a cookie)
//and going here:http://www.javascripter.net/faq/settinga.htm
//Can you believe that the only good cookie code was 3 pages deep in
//Google!? This page looked promising, http://www.webreference.com/js/column8/functions.html,
//but the code below was just copy drop and go!!
//Another Opera 7 sidenote: It doesn't seem to set cookies locally.
function createCookie(cookieName,cookieValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=1;
expire.setTime(today.getTime() + 3600000*24*nDays);
document.cookie = cookieName+"="+escape(cookieValue)
+ ";expires="+expire.toGMTString();
}

function readCookie(cookieName) {
var theCookie=""+document.cookie;
var ind=theCookie.indexOf(cookieName);
if (ind==-1 || cookieName=="") return "";
var ind1=theCookie.indexOf(';',ind);
if (ind1==-1) ind1=theCookie.length;
return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
}

[Xikron]

Mike,
Thank you for your post, I've been looking all over for such a feature. When i implement it into a site, i'll send you a link.

Jesse

[mipapage]

You're welcome.

I'm working with someone to improve on what I have. Feel free to contact me here or visit our site and use the e-mail there to get in touch. There are a few catches etc. and maybe I can help you through them.

Mike

[Xikron]

Im still kind of new when it comes to js, but have a history of programming with vb which helps me along. I'm also still learning about CSS and it capabilities. It would be great to hear about any improvements to your code. Im allways looking for ways of error trapping. Ill check back in a few days to see how you've made out.

Jesse

[Xikron]

One question, the code as it is works fine but when i move the increase and decrease font links to a different part of a page it only works once. Have you come accross this problem previously or am i doing something wrong. Is it possible for those links to be anywhere on a page or is there a specific order in which the code must remain to work properly?

Jesse

[mipapage]

Hey,

I'm heading out for the weekend, but here are two ideas:
1 - wrap your entire page in a <div>.
or
2 - add this bit of codedocument.getElementsByTagName('body').item(0).style.fontSize=size+'px';
right after this:
document.getElementsByTagName('div').item(0).style.fontSize=size+'px';

And that should cause the behavior to change.

I have added a bit of different stuff to the code here and there. If that doesn't work for you, I can find the extra bit and post that...