Customizing styles: User-Controlled Style Sheets – Part III - Making the big change: multiple style sheets and persistence
(Page 4 of 6 )
Before we start examining any code, a few disclaimers: first, since coding cookies is rather complex, and out of the scope of this article, we’ll be using a basic cookie implementation, to keep the rest of the code uncluttered. Second, we’ll be using five style sheets in the example, generating a style panel that will allow users to select the proper style sheet. The first one will be the default style sheet, and the others will be the alternative ones, used for the style swapping process. This is not meant to imply that you need to have five or more style sheets in your website. They will be used only for example purposes.
With these formalities out of the way, let’s begin including the corresponding style sheets into the document:
<link rel="stylesheet" type="text/css"
href="default.css" id="default" />
<link rel="alternate" type="text/css"
href="style1.css" id="style1" />
<link rel="alternate" type="text/css"
href="style2.css" id="style2" />
<link rel="alternate" type="text/css"
href="style3.css" id="style3" />
<link rel="alternate" type="text/css"
href="style4.css" id="style4" />
The next step is to define the "setStyleSheet()" function, which will accept a style sheet ID as a parameter, activating the selected one but previously deactivating the rest. Finally, the function will store in a cookie the ID for the style sheet activated. Here’s the code for this first function:
function setStyleSheet(sheetId){
// loop over style sheets and deactivate them
for(var i=0;i<document.styleSheets.length;i++){
document.styleSheets[i].disabled=true;
}
// activate selected style sheet
var sheet=document.getElementById(sheetId);
if(!sheet){return;}
sheet.disabled=false;
// store stylesheet ID value in cookie
document.cookie="style="+sheetId;
}
The function loops over all of the style sheets found in the document and deactivates them, using the "styleSheets" collection. Just by assigning a value of "false" to each style sheet’s disabled property, we’re switching them off. Then it activates the proper style sheet, using the passed ID as a parameter.
Finally, the function stores the ID in a cookie named "style," to make the style change persistent. Please notice that we’ve defined the cookie assigning a name and a value. We have not specified a time expiry or even a domain. As stated before, this helps out to keep things simple.
Now, we need to define the "makeStyleSwitchers()" function that simply iterates on all of the links contained within the style panel, in order to change the entire style sheet, when each link is clicked. Does this sound a little confusing? Let’s show the code for this function to clarify the concepts:
function makeStyleSwitchers(){
// locate <a> elements in 'stylepanel' element
var as=document.getElementById
('stylepanel').getElementsByTagName('a');
if(!as){return;}
// assign onclick event handlers
for(var i=0;i<as.length;i++){
as[i].onclick=function(){
// set style sheet
setStyleSheet(this.id.replace
(/switcher/,'style'));
}
}
}
The above function traverses all of the <a> elements contained into the <div> element identified as "stylepanel" and assigns an "onclick" event handler to each of them. This way, when any link is clicked, it calls our previous "setStyleSheet()" function, passing to it the ID of the style sheet to be activated. Don’t get anxious. The line:
setStyleSheet(this.id.replace(/switcher/,'style'));
is really passing the ID of the corresponding style sheet. In a moment, when we take a look at the HTML markup, this expression will become clear.
Once the user has selected a given style sheet, we need the change to be persistent, remember? Thus, the scripts should checks for the existence of a "style" cookie to retrieve the value of the active style sheet. If the cookie is found, its value is passed to the "setStyleSheet()" function to activate the proper style sheet. Otherwise, if no cookie exists, the "default" style sheet is enabled. The line for checking the cookie and enabling the selected style sheet is listed below:
document.cookie!=''?setStyleSheet
(document.cookie.split('=')[1]):setStyleSheet
('default');
Now, we have a cookie that stores user-selected styles. Our style change is really persistent. Just read the next section to see how the rest of the code is explained.
Next: Defining the HTML markup and Style Sheets >>
More Style Sheets Articles
More By Alejandro Gervasio
