Allowing readers to control the look of the page has a number of advantages. First and foremost is accessibility. Wired Magazine has done a redesign of their site in the two years or so, one of the features they added was the ability to control the size of text on screen. This is useful for all the viewers with poor vision. Allowing changes to the complete style has some advantages as well. Multiple different layouts could be created to cater to different audiences.
There are multiple ways to change the current page style. A List Apart posted a discussion on this some time ago. The reason to roll my own was that I needed toggle functionality. Meaning that as long as you click the control at the top of the page the stylesheets will keep cycling through a predefined list. There are other differences between the two implementations as well.
First we setup the global variables this includes the list of stylesheet names that will be toggled between, the path to the stylesheets and the default stylesheet selection. The togglestyle method takes two parameters neither of which is required. If sheetid is not null, this function will set the current stylesheet to the value stored in the stylelist array under that index. The first for loop looks at all HTML elements of type link, and then just the ones that have their media attribute set to screen. If you are not sure what these are, reference the "CSS style" section of the Simple website templates article. Once we find the element that meets those criteria, and we are only expecting one, we will set the href attribute to point to the new location.
If the sheetname variable is passed to the function instead, we will determine the index of the stylesheet that was passed in the stylelist array, provided that it exists in the first place, and if it does, we will call the same function again passing the sheetid parameter instead.
If both parameters are null, we will attempt to match the currently loaded stylesheet against the stylelist array. After determining its index, we will load the next stylesheet in the array wrapping around the end with the help of the modulo function.
Before we can store preferences we need some basic code to deal with cookies, much in the same way that code for URL parameter parsing was done.
The above code will read all the cookies that the browser is willing to return and store them in an object after the name, value pairs have been parsed. After initializing the storage objects, we will read the cookies from the browser, if there are none, we return null. Otherwise we split the cookies around a semicolon that is used to separate them. Then in the for loop we will further separate the cookies into name, value pairs by splitting the cookie string around the equal sign. After which we will store the name and the value of the cookies in name and value array respectively with the same index. Lastly we will return the parsed cookies object to the caller.
The function in example 4 will return the values of a cookie by cookie name. Because we stored the names and the values at the same index in the arrays we can do this simply by iterating over the names array comparing stored cookies to the name that was provided. If a match is made, the associated value will be returned.
Now that cookie management basics are in place we can use them to store visitor preferences for stylesheet and text size. The easiest way to do this would be to store the array index for each of those values, so first we need to determine the font-size offset and the stylesheet name index in the stylelist array. Below is the code to determine the font-size offset.
Here we simply read the current font-size of the element with id "page", if we cannot determine what it is, we assume that the text is at its minimum size so the offset is zero. Next we need to determine the array index of the currently selected stylesheet.
In code sample 6, we first iterate over all the link elements in the document looking for the one that stores the stylesheet reference for onscreen display, once we find it, we stop looking. Next we look for the name of that stylesheet in the stylelist array, when we find it, we return it, if we do not find it, we simply return the default stylesheet index.
Now that our preference values are ready to be stored, we should package them in a cookie and attach it to the request.
Above we get the current stylesheet and text size preferences, separate them with a comma, and add them to a cookie that is set to expire in 30 days. The call to the storestylepref function should be put into the onunload attribute of the body tag of the page.
Once we stored our preferences, we now need to apply them the next time the user visits.
The loadstylepref function is simple, it builds on all the code we have written thus far. After being called, this method will attempt to locate a cookie by the name "site_pref", if it exists it will attempt to use the values stored in it to restore the stylesheet and text size preferences. First we split the value around the comma we used to separate the stylesheet index from the font-size offset and then we simply call the togglestyle and togglefontsize with the first and second values of the resulting array. The call to the loadstylepref function should be made from the onload attribute of the body tag of the page. The complete working implementation of this code is being used by this site at /js/style.js