text resizer

how to do it

[HelenDev]

I would like one of those text resizers on my site, the kind that emulate 'view > text size' in IE - what's the simplest way to do it?

I've had a look at the code on one site and it appears to set a cookie depending on which size you choose - is that the best way to do it?

[Bernard Marx]

I'm having problems with cookies at the moment, but YES.
It's probably the only sensible way to do it.
Rambo Tribble pointed out a link to a good article at #*$! about it.
Can't find the link just now.

[ Why is a_list_apart censored?]

[AWildman]

You might also be able to use parameters to keep state. In this way, a user who has js enabled but doesn't accept cookies can still view the site as you intend it.

[Bernard Marx]

Search parameters in the url, you mean?

[AWildman]

Yep. Exactly. Especially if you only have to keep track of the state of one item. A cookie seems like overkill unless there is a valid reason why you can't use parameters, and I'm sure there are valid reasons. I just tend to shy away from cookies, js too for that matter, since more and more people and companies are turning them off.

[Bernard Marx]

Indeed.
I suppose it wouldn't be too hard implement both options, to cover all angles.

[Rambo Tribble]

An often overlooked means of transferring data between pages is the window name. Usually left blank, except for popups, the window name property persists between pages and can be read/written with a string of your choice.

This technique doesn't, of course, provide persistence between sessions, as a cookie or URL-encoded string can.

[edited by: Rambo_Tribble at 2:11 pm (utc) on Oct. 12, 2004]

[AWildman]

Wow! Awesome tip. I had no idea you could do that and maintain state. Thanks!

[HelenDev]

Thanks for the replies, guys :)

I'm interested to know how I could use parameters and window names to do this, but can you give an example of how that would work?

I went to the list apart site Bernard and found this article [#*$!.com...] I've glanced through it and I don't think it uses cookies but it does use javascript - is this a good way of doing it in your opinion?

Basically I only want three choices of text size - the size it is normally (font-size:80%;), and two bigger choices. I understand what I basically need to do is create two new stylesheets, right? and allow users to select the one of their choice? Does this mean that I must maintain three stylesheets - or am I overcomplicating things? I just want to find out the simplest and most user friendly way to do this before I get started!

Cheers,
Helen.

[AWildman]

No need for three style sheets. You can use the JS to do the resizing.

Assuming that you're changing the size of the font for the ENTIRE body, you could probably do:

function change_size(fontsize)
{
document.body.style.fontSize = fontsize + "%";
}
Obviously, change the "%" to whatever unit of measurement you're using.

This assumes that you are going to give the function a fontsize, as in the following case:

<select name = "pickasize" onchange = "change_size(this.options[selectedIndex].value)">
<option value = "">Choose a size:</option>
<option value = "20">Small</option>
<option value = "50">Medium</option>
<option value = "100">Large</option>
</select>

The next step is to give the url the parameter to maintain state, and to change the fontsize of the next page based on that parameter. I've given you a start, but unfortunately, work calls at the moment so I'll have to leave you in suspense! :) I"ll try to write more later if someone else hasn't solved your issue by then.

[HelenDev]

Great stuff, AWildman. I think I know what I'm doing now. I've started to code and I'm almost there, but it's not quite working yet for some reason(?)

Here is my code:

in the head of the document...

<script language="JavaScript" type="text/JavaScript">
<!--
// text resizer

//see if cookie is set and do relevant text size...
var textsize = document.cookie;
if (textsize!= null) document.body.style.fontSize = textsize + "%";

//function to change the text size
function change_size(fontsize) 
{ 
document.body.style.fontSize = fontsize + "%"; 

//set the cookie
var the_cookie = "textsize=" + fontsize;
var the_date = new Date("December 31, 2050");
var the_cookie_date = the_date.toGMTString();
the_cookie = the_cookie + ";expires=" + the_cookie_date;
document.cookie = the_cookie;
} 
//-->
</script>

...and in the body...

 <div class="textresizer"> Text Resizer
 <a href="#" class="smalltxt" onClick="change_size(80); return false;">a</a> ¦
 <a href="#" class="medtxt" onClick="change_size(100); return false;">a</a> ¦
 <a href="#" class="largetxt" onClick="change_size(140); return false;">a</a>
 </div>

I think it it setting the cookie but it doesn't seem to be getting the value out again. Any further help would be appreciated. Thanks!

[AWildman]

I think you'll find that :
var textsize = document.cookie;
if (textsize!= null) document.body.style.fontSize = textsize + "%";

is your problem. If you set textsize to equal your entire cookie, you'll probably get something like:
myval=12px; instead of just 12px; Alert textsize to see what you are actually getting if you haven't already.

[HelenDev]

You're exactly right - the value I'm returning is 'textsize=100' and not '100'

I've had a go at splitting my cookie name and value...

//see if cookie is set and do relevant text size...
if (document.cookie && document.cookie!= ""){
var textsize1 = document.cookie;
var textsize2 = textsize1.split("=");
var textsize = unescape(textsize2[1]);
document.body.style.fontSize = textsize + "%";
}

but it's still not working right - any thoughts?

[AWildman]

Try removing the unescape on textsize and then alert to see what you're getting.

If you still can't get the proper number, you might try something like this:

cookieInfo = document.cookie;

if(cookieInfo =~ /.*\=(\d+).*/)
{textsize = $1;}

[HelenDev]

Cheers, AWildman. The alert() indicates that I do appear to be getting the right value now - but it doesn't seem to be resizing the text on the page.

The text resizes when I click on the link to resize the page, but if I refresh the page, it goes back to normal, but I want the cookie to remember the enlarged text size.

I hope that makes sense - I think I'm in a bit of a muddle myself!

[AWildman]

Well, lessee...if you are able to alert the proper textsize onload of the page when you refresh, then it must be properly setting and reading the cookie. So maybe the problem is still the fontsize number you're getting from the cookie. Try this. Make document.body.style.fontSize = "50px"; just to be certain that the syntax is correct. If on refresh the font size changes to 50px, we'll know that the syntax is correct and that there is still something wrong with the text size that you're getting from the cookie. If that is the case, make textsize = parseInt(textsize2[1]); It may just be that the number you're getting out of the cookie is not a number but a string and the script doesn't like that.

[HelenDev]

Make document.body.style.fontSize = "50px"; just to be certain that the syntax is correct.

It doesn't work :(

[HelenDev]

It works if I put this line in the <body> though, just not in the <head>?

[AWildman]

OH wait! I just noticed something. You're js isn't external. You are setting a new cookie everytime you visit the page. That means, whatever cookie you had before appears to be getting wiped out. First step, make the js be external to the page. Don't put it in the head. This will actually save you a lot of time anyhow if you are trying to make your whole site resize. Make a few separate functions in this js, one to do the resizing, one to set the cookie, and one to read the cookie.

Here's what I would do. This should be the external js:

function set_cookie(fontsize)
{
var the_cookie = "textsize=" + fontsize;
var the_date = new Date("December 31, 2050");
var the_cookie_date = the_date.toGMTString();
the_cookie = the_cookie + ";expires=" + the_cookie_date;
document.cookie = the_cookie;
}

function read_cookie()
{
var cookieInfo = document.cookie;
var cookieInfoArray = textsize1.split("=");
var textsize = parseInt(cookieInfoArray[1]);
change_size(textsize);
}

function change_size(val)
{document.body.style.fontSize = val + "%";}

function change_and_set(val)
{
change_size(val);
set_cookie(val);
}

In the html...

<body onload = "read_cookie()">
<div class="textresizer"> Text Resizer
<a href="#" class="smalltxt" onClick="change_and_set(80); return false;">a</a> ¦
<a href="#" class="medtxt" onClick="change_and_set(100); return false;">a</a> ¦
<a href="#" class="largetxt" onClick="change_and_set(140); return false;">a</a>
</div>

[AWildman]

Sorry for the double post, but I might even take this one step further:

function set_cookie(fontsize)
{
var the_cookie = "textsize=" + fontsize;
var the_date = new Date("December 31, 2050");
var the_cookie_date = the_date.toGMTString();
the_cookie = the_cookie + ";expires=" + the_cookie_date;
document.cookie = the_cookie;
}

function read_cookie()
{
var textsize = ''
var cookieInfo = document.cookie;
var cookieInfoArray = textsize1.split("=");
textsize = parseInt(cookieInfoArray[1]);
return textsize;
}

function get_fontsize()
{
var textsize = read_cookie();
if(textsize!= '')
{change_size(textsize);}
}

function change_size(val)
{document.body.style.fontSize = val + "%";}

function change_and_set(val)
{
change_size(val);
set_cookie(val);
}

In the html...

<body onload = "get_fontsize()">
<div class="textresizer"> Text Resizer
<a href="#" class="smalltxt" onClick="change_and_set(80); return false;">a</a> ¦
<a href="#" class="medtxt" onClick="change_and_set(100); return false;">a</a> ¦
<a href="#" class="largetxt" onClick="change_and_set(140); return false;">a</a>
</div>

I just made the script a little more modular so that the read_cookie function wasn't doing much other than simply reading the cookie and returning a result. This way also, if there wasn't a new textsize, i.e. - the visitor didn't change the size, the default fontsize won't change.

[HelenDev]

Thanks AWildman :)

However, things still don't appear to be working quite right, and I'm getting those 'error on page' things.

There was a problem with this part

function read_cookie() 
{ 
var textsize = '' 
var cookieInfo = document.cookie; 
var cookieInfoArray = textsize1.split("="); 
textsize = parseInt(cookieInfoArray[1]); 
return textsize; 
} 

in which textsize1 was undefined - was I right to change it to

var cookieInfoArray = textsize.split("="); 

?

Also, there now seems to be a problem with this part

function change_size(val) 
{document.body.style.fontSize = val + "%";} 

I'm getting the error 'invalid arguement'

If you could help again with these that would be great!

Cheers.

[AWildman]

Oh! I did something dumb. It should be

function read_cookie()
{
var textsize = ''
var cookieInfo = document.cookie;
var cookieInfoArray = cookieInfo.split("=");
textsize = parseInt(cookieInfoArray[1]);
return textsize;
}

I don't know what could be wrong with this part.
function change_size(val)
{document.body.style.fontSize = val + "%";}

Does the error occur when you are first trying to resize, i.e. - right after you've clicked the size link or does the error occur when you refresh the page and are thus getting the textsize from the cookie?

[HelenDev]

Thanks again AWildman.

I've fixed the code and it now works fine in Firefox and IE5.

In IE6 is where I'm getting the error -
error on page

line: 28
character: 2
error:invalid argument
code:0

It does work in IE4, but upping the text size makes the page go crazy and lots of the text and navigation falls off the edge, including the text resizer iteself, which is a slight concern.

[AWildman]

Offhand, I see that I missed a semicolon at the end of the statement declaring textsize. Other than that, you might want to alert the val that is getting passed to change_size to see if its getting the val okay. Strange that it would work in IE 5 and not 6. But isn't that the way of it? :) Did you check the cookie to make sure it is getting set properly?

The percents you are using to change the size of the text are kinda large so I can see why the text goes all over the place upon resizing.

[HelenDev]

I think that's it. The cookie isn't getting set in IE6 (I have my other versions of IE on another machine and they're OK).

I think it's that because I put this in my code to test...

function getcookieinfo() 
{ 
alert(document.cookie);
} 

...and this in my html....

<a href="#" onClick="getcookieinfo();"return false;">wheres me cookie?</a>

... and I'm getting a blank alert box.

I wonder why the cookie isn't getting set - I know that it was refusing cookies earlier, but I changed the setting to 'accept all cookies' so it's a bit of a mystery. I restarted IE as well.

Still the good news is - in general this appears to work (I'll test it out IE6 on another machine) - so I'd like to thank you very much for all your help :)

Helen.

[AWildman]

No problem! If there's anything else I can help with, please let me know.