SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    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>

  2. #2
    SitePoint Guru
    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.

  3. #3
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by imaginethis View Post
    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.

  4. #4
    SitePoint Guru
    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.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    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?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 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>

  7. #7
    SitePoint Evangelist
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •