Guys this is awesome!
jcb33 I think there is a section on a list apart that will help you with it..
Taken from
here..
Cookies
Now we can change the style sheet. Cool. We have a more personalized page. Excellent. But we don’t have a personalized site. The preference is only applied to the current page; when we leave the current page the preference leaves with us. This situation, however, can be rectified with a cookie.
To store a cookie we need another function to return the current style sheet. We also need two functions to store and read the cookie.
To return the current style sheet we look for an active preferred or alternate style sheet and check its title.
First we loop through all the link elements in the document again. We then check whether the link is a style sheet. If it is, we check whether the style sheet has a title. This tells us that the style sheet is either preferred or alternative.
The last check is to see whether or not the style sheet is active. If all three checks return true, we have the current style sheet and we can return the title.
The function ends up looking like this:
Code:
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")
&& !a.disabled) return a.getAttribute("title");
}
return null;
}
As this is an article on style, and cookies are a completely different topic, I won’t explain the cookie functions here, but I will include them for your convenience (these functions are written by ALA author Peter-Paul Koch).
Code:
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 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;
}
To use these cookie functions, we need to add onload and onunload event listeners to the window.
onLoad
There is a w3c specified DOM Level 2 attribute, “disabled,” that is set to false when a style sheet is applied to the document. This attribute is correctly implemented in Mozilla, but unfortunately not in MSIE.
MSIE does have a proprietary HTML attribute, also called “disabled,” that applies to link elements. This attribute is initially set to false for all link elements.
To set the MSIE disabled attribute to match the DOM Level 2 disabled attribute, we can call the setActiveStyleSheet() function with the name of the preferred style sheet.
To find out which style sheet is the preferred style sheet, we need another function. Because this function is so similar to the getActiveStyleSheet() function I’m not going to explain how it works, but here is what it may look like:
Code:
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
In the onload function, we first set a title variable. This either holds the value of the previous style sheet that is stored in the cookie, or if there isn’t one, the title of our preferred style sheet. To keep things logical, let’s call the cookie “style.”
Next we call up the setActiveStyleSheet() function passing the title variable as the title. Our onload function looks something like this:
Code:
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
Note that it may be desirable to call this function before the onload event as well, causing the document to “paint” with our style sheet preference.
If you choose to do this, make sure the function is called after the functions and the link elements have been defined.
onUnload
To save the cookie in the onunload event is simpler. All we have to do is use the getActiveStyleSheet() function to return the active style sheet, and save this in a cookie. Using the function to store a cookie we will end up with something like this:
Code:
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
Dunno if that will help ya..
