SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Jan 5, 2008, 16:41 #1
- Join Date
- Oct 2005
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How Do I Save a Users Preference?
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>
-
Jan 5, 2008, 17:08 #2
- Join Date
- Jan 2005
- Location
- heaven
- Posts
- 953
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You need to create a cookie to store their preferences.
-
Jan 5, 2008, 17:17 #3
- Join Date
- Oct 2005
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Jan 5, 2008, 17:32 #4
- Join Date
- Jan 2005
- Location
- heaven
- Posts
- 953
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jan 5, 2008, 17:33 #5
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Jan 5, 2008, 17:35 #6
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
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>
-
Jan 7, 2008, 19:29 #7
- Join Date
- Jan 2005
- Posts
- 502
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Rather than specifying the font size in js, I suggest using the alternate stylesheet method
Bookmarks