Customizing styles: User-Controlled Style Sheets – Part III (Page 1 of 6 )
In this third part and final part of our article series about user-controlled style sheets, we will learn how to make switching between style sheets both reversible and persistent across all pages of your website for your visitors.
Introduction
Welcome to Part III of the series "Customizing Styles: User-controlled Style Sheets." It’s our last article in this series, aimed specifically at swapping entire style sheets in Web documents, making the style change reversible and even persistent across different Web pages.
Hopefully the methods to be explained here will boost your already vast knowledge of style sheets and have applications beyond this article. But, wait! Did you say you’re already an expert on the subject? Okay, good for you, but I must consider the kind people who wish to learn more about it. Sounds fair. So, join me in this last trip. We’re going to make the whole style sheet swapping process a really fun experience. Let’s get started.
To swap or not to swap. That is the question.
In first place, we need to tackle the problem of making the style change process really reversible. This sounds like common sense, since we want to give users the possibility to alternate between different style sheets, and offer a straightforward way to return to the default style sheet loaded initially. At this point, we’re talking about a simple but real style-switching tool, which might be implemented with minor effort. Thus, let’s declare the two corresponding external style sheets, "default.css" and "accessible.css" respectively, in the <head> section of the Web document, just as we did in the previous examples:
<link rel="stylesheet" type="text/css" href="default.css" id="default" />
<link rel="alternate" type="text/css" href="accessible.css" id="accessible" />
If your memory is one of your strongest points (unlike me), remember that we’ve solved the conflict of dealing with two style sheets by deactivating the second one, that is, "accessible.css," so that we give the browser only one style sheet to parse. By including the following JavaScript code in the <head> section of the page, the disabling process is thus performed:
var accessibleSheet=document.getElementById('accessible');
accessibleSheet.disabled=true;
With the above lines, we’ve directly disabled the "accessible.css" style sheet quickly. Now what? So far, the technique closely resembles the previous method described in second part of this article. Well, we’re going to provide users with a regular link to swap between style sheets, but this time the process will be completely reversible. In other words, we need to redefine the "changeStyle()" JavaScript function for turning on and off both style sheets. Here’s how it can be done:
<script language="javascript">
// disable default style sheet
var accessibleSheet=document.getElementById('accessible');
accessibleSheet.disabled=true;
changeStyle=function(){
var switcher=document.getElementById('switcher');
switcher.onclick=function(){
// get style sheets
var defaultSheet=document.getElementById('default');
if(!defaultSheet){return;}
var newSheet=document.getElementById('accessible');
if(!newSheet){return;}
// exchange style sheets
if(newSheet.disabled){
// disable previous active style sheet
defaultSheet.disabled=true;
newSheet.disabled=false;
}
else {
// enable new style sheet
newSheet.disabled=true;
defaultSheet.disabled=false;
}
return false;
}
}
// execute code when page is loaded
window.onload=function(){
if(document.getElementById){
changeStyle();
}
}
</script>
Before we start explaining the function code, let’s complete the listing, showing the necessary HTML to make the style change work. It is as follows:
<h1>Page Name</h1>
<p><a href="#" title="Change Style" id="switcher">Change style</a></p>
<div class="content">
<p>Content for div1 goes here...Content for div1 goes here...Content for div1 goes here...</p>
</div>
<div class="content">
<p>Content for div2 goes here...Content for div2 goes here...Content for div2 goes here...</p>
</div>
<div class="content">
<p>Content for div3 goes here...Content for div3 goes here...Content for div3 goes here...</p>
</div>
Okay, I know that the HTML markup is basic, but who needs more? It’s good enough to put the JavaScript function into action. It’s time to break down the code and learn how it works, and I explain this in the next section.
Next: Breaking the "changeStyle()" function into pieces >>
More Style Sheets Articles
More By Alejandro Gervasio
