How Do I Save a Users Preference?

**abcd** · Jan 5, 2008, 16:41

I want to save the users text size choice that the user chooses from the script below as a cookie using javascript because they wont have to repeatdely pick it over and over again when they leave the web page or reload the web page. Can you please help me finish this script Thanks

<html>
<head>
<title></title>
<script type="text/javascript">
function f(n) {
document.getElementById('s').style.fontSize = n
}
</script>
</head>

<body>

<a href="#" onClick="f('8px')" value="8px">small</a>
<a href="#" onClick="f('12px')" value="12px">normal</a>
<a href="#" onClick="f('24px')" value="24px">larger</a>
<a href="#" onClick="f('32px')" value="32px">x-larger</a>

<div id="s">Adjustable Text Sizer For The Browser Impaired</div>

</body>
</html>

**imaginethis** · Jan 5, 2008, 17:08

You need to create a cookie to store their preferences.

**abcd** · Jan 5, 2008, 17:17

Originally Posted by imaginethis

You need to create a cookie to store their preferences.

Exactly how would I code in the cookie into my script so that it runs smoothley Thank you.

**imaginethis** · Jan 5, 2008, 17:32

Sorry, [cookie] was a link. Go to
http://www.w3schools.com/js/js_cookies.asp the article will explain how to create cookies with javascript.

**Raffles** · Jan 5, 2008, 17:33

What on earth are people who are "Browser Impaired"? Sounds like people using IE4 or NS4.

Users who are visually impaired can adjust their browser's text size so that it's bigger across all websites, thus all you need to do is make it a reasonable size for people with decent vision.

As for using cookies, did you even read the link that imaginethis posted?

**paul_wilkins** · Jan 5, 2008, 17:35

Use the functions to handle cookies that you can get from quirksmode's cookies or the w3schools cookies. I'll be using quirksmode's cookies here.

Code JavaScript:

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
 
function eraseCookie(name) {
	createCookie(name,"",-1);
}

Save them out to a separate file and include them with the following:

Code HTML4Strict:

<script type="text/javascript" src="js/cookies.js"></script>

If you're going to be adjusting the text size for the whole page, you should change the body font size instead. Another issue is that you shouldn't be using pixel sizes for the font size. Not everybody has the same screen setup that you do, so you should set font sizes based on the default size of their browser. This is where em units or percentages become very useful.

Regardless of that, this is where you also create the cookie.

I have also taken the opportunity to rename some variables to more meaningful names, because in six months time you will have no idea what function f(n) was supposed to do.

Code JavaScript:

function setFontSize(size) {
    document.body.style.fontSize = size;
    createCookie('fontsize', size, 90);
}

At the bottom of the page is where you read the cookie, and apply it if available.

Code JavaScript:

var fontsize = readCookie('fontsize');
if (fontsize !== null) ( // cookie exists
    setFontSize(fontsize);
}

Here is the code in full.

Code HTML4Strict:

<html>
<head>
    <title></title>
</head>
 
<body>
<a href="#" onClick="setFontSize('75%')" value="75%">small</a>
<a href="#" onClick="setFontSize('100%')" value="100%">normal</a>
<a href="#" onClick="setFontSize('200%')" value="200%">larger</a>
<a href="#" onClick="setFontSize('250%')" value="250%">x-larger</a>
 
<div>Adjustable Text Sizer For The Browser Impaired</div>
 
<script type="text/javascript" src="js/cookies.js"></script>
<script type="text/javascript">
function setFontSize(size) {
    document.body.style.fontSize = size;
    createCookie('fontsize', size, 90);
}
 
var fontsize = readCookie('fontsize');
if (fontsize !== null) { // cookie exists
    setFontSize(fontsize);
}
</script>
</body>
</html>

**Mr_Money** · Jan 7, 2008, 19:29

Rather than specifying the font size in js, I suggest using the alternate stylesheet method

The SitePoint Forums have moved.

User Tag List

Thread: How Do I Save a Users Preference?

Thread Tools

Display

How Do I Save a Users Preference?

Bookmarks

Bookmarks

Posting Permissions