Customizing styles: User-Controlled Style Sheets – Part III - Listing the complete source code
(Page 3 of 6 )
As stated before, here’s the complete code for implementing the above example:
<html>
<head>
<title>CHANGING STYLES BY STYLE SHEET EXPANDED</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="default.css" id="default" />
<link rel="alternate" type="text/css" href="accessible.css" id="accessible" />
<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>
</head>
<body>
<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>
</body>
</html>
And here are the style sheets, "default.css" and "accessible.css," including some CSS rules to be applied to the HTML elements. First, the rules for "default":
.content {
font: normal 12px "Arial", Helvetica, sans-serif;
color: #000;
background: #fff;
margin-bottom: 10px;
}
h1 {
font: bold 24px "Arial", Helvetica, sans-serif;
color: #000;
}
And second, the CSS rules for "accesible":
.content {
font: 300% "Arial", Helvetica, sans-serif;
color: #ff0;
background: #000;
margin-bottom: 10px;
}
h1 {
font: bold 24px "Arial", Helvetica, sans-serif;
color: #00f;
}
At this point, we can rest assured that we have a working script to easily swap style sheets, right? Well, not so fast. You may have noticed the significant limitation of this method. While we’ve provided it with nice reversing capabilities, the style change is still stateless. What if the user (hopefully) tries to visit another page of our site? Clearly, we run into serious difficulties.
Style changes must be persistent, allowing visitors to keep their preferred style during the session. We don’t want them to be upset by changing fonts and colors every time they take a look at a different document, right? So, to make style changes persistent, we’re going to set a cookie to indicate what style sheet the user has selected. Besides this, we’ll be giving to visitors the choice to select among several style sheets, not limited to only two. Isn’t it too much? I don’t think so. Let’s get ready to make the big change.
Next: Making the big change: multiple style sheets and persistence >>
More Style Sheets Articles
More By Alejandro Gervasio
