Using Persistent Styles with Multiple Style Sheets - Refreshing some previous concepts and methodologies
(Page 2 of 5 )
In case that you didn't have the chance to read the first tutorial of the series and see the complete source code of the application that I developed to switch between different alternate style sheets, I included its entire definition below. You can study it in detail before I move on and show you how to work with persistent style sheets.
That being explained, here's the complete code for the aforementioned application along with the definitions of some sample alternate style sheets:
(definition for "red.css" file)
div{
background: #f00;
}
(definition for "green.css" file)
div{
background: #0f0;
}
(definition for "blue.css" file)
div{
background: #00f;
}
(definition for "fonta.css" file)
p{
font: normal 14pt Arial, Helvetica, sans-serif;
}
(definition for "fontb.css" file)
p{
font: normal 18pt Arial, Helvetica, sans-serif;
}
(definition for "fontc.css" file)
p{
font: normal 24pt Arial, Helvetica, sans-serif;
}
(definition for "sample_web_page.htm" file)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Swapping Style Sheets</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" href="red.css"
title="redstyle" />
<link rel="alternate stylesheet" type="text/css" href="green.css"
title="greenstyle" />
<link rel="alternate stylesheet" type="text/css" href="blue.css"
title="bluestyle" />
<link rel="alternate stylesheet" type="text/css" href="fonta.css"
title="fontstylea" />
<link rel="alternate stylesheet" type="text/css" href="fontb.css"
title="fontstyleb" />
<link rel="alternate stylesheet" type="text/css" href="fontc.css"
title="fontstylec" />
<script language="javascript">
function changeStyleSheet(title){
var lnks=document.getElementsByTagName("link");
if(!lnks){return};
for(var i=0;i<lnks.length;i++){
if(lnks[i].getAttribute("rel").indexOf("style")!=-1&&lnks
[i].getAttribute('title')){
lnks[i].disabled=true;
if(lnks[i].getAttribute('title')==title){
lnks[i].disabled = false;
}
}
}
}
function displayStyleLinks(){
var labels=new Array('Red','Green','Blue','Font Size 1','Font
Size 2','Font Size3');
var div=document.createElement('div');
div.setAttribute('id','linkcontainer');
for(var i=0;i<labels.length;i++){
var lnk=document.createElement('a');
lnk.setAttribute('href','#');
lnk.setAttribute('title',labels[i]);
lnk.appendChild(document.createTextNode(labels[i]));
div.appendChild(lnk);
}
document.getElementsByTagName('body')[0].appendChild(div);
}
window.onload=function(){
if(document.getElementById && document.createElement &&
document.getElementsByTagName){
// display style links on the browser
displayStyleLinks();
var link1=document.getElementsByTagName('a')[0];
if(!link1){return};
link1.onclick=function(){
changeStyleSheet('redstyle');
return false;
}
var link2=document.getElementsByTagName('a')[1];
if(!link2){return};
link2.onclick=function(){
changeStyleSheet('greenstyle');
return false;
}
var link3=document.getElementsByTagName('a')[2];
if(!link3){return};
link3.onclick=function(){
changeStyleSheet('bluestyle');
return false;
}
var link4=document.getElementsByTagName('a')[3];
if(!link4){return};
link4.onclick=function(){
changeStyleSheet('fontstylea');
return false;
}
var link5=document.getElementsByTagName('a')[4];
if(!link5){return};
link5.onclick=function(){
changeStyleSheet('fontstyleb');
return false;
}
var link6=document.getElementsByTagName('a')[5];
if(!link6){return};
link6.onclick=function(){
changeStyleSheet('fontstylec');
return false;
}
}
}
</script>
</head>
<body>
<h1>Working with multiple style sheets</h1>
<div>
<p>This is the sample content of the DIV.</p>
</div>
<div>
<p>This is the sample content of the DIV.</p>
</div>
<div>
<p>This is the sample content of the DIV.</p>
</div>
<div>
<p>This is the sample content of the DIV.</p>
</div>
</body>
</html>
As you can see, the above bunch of source files is all the supporting material that you actually need to get this CSS style swapping application working as expected. Of course, as I mentioned before, it's highly recommended to add to it some kind of data persistence mechanism for maintaining the selected style sheet across different web pages. However, the implementation of this feature is out of the scope of this article.
So far, so good. At this stage you hopefully recalled the approach that I used to activate/deactivate multiple alternate style sheets, which means that we can move on and start developing yet another simple web application that will allow users to swap the so-called "persistent" style sheets, with minor difficulties.
Curious about how this brand new application will be built? Go ahead and read the next section. It's just one click away.
Next: Working with persistent style sheets >>
More Style Sheets Articles
More By Alejandro Gervasio
