CSS Style Switcher

First you will need to set up multiple CSS files that users can switch between, whether these are just different colours or use different font sizes for accessibility is up to you.

For this example we will say that we are doing 3 style sheets each with larger fonts so the user can chose from Default, Large, Largest.

So our CSS Code would look like this:

<link href="default.css" rel="stylesheet" title="default" type="text/css" />
<link href="large.css" rel="alternate stylesheet" title="large1" type="text/css" />
<link href="largest.css" rel="alternate stylesheet" title="large2" type="text/css" />

There are a few things to note:

1. If you are copying and pasting this, it is in XHTML so make sure you either remove the trailing slash or change your pages doctype
2. Each style sheet must have a title. This is used to distiguise each sheet from the others.
3. Your default style sheet should have the rel attribute set to stylesheet and the other style sheets set to alternate stylesheet, this is so that the page doesn't use styles in those sheets when you load up the page, although they are loaded in to the cache.

So now we have our CSS sheets sorted and set on to our page, we need the javascript to enable us to switch between.

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

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;
}

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;
}

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;
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

I don't know much about javascript so I can't tell you a lot about this code. What it basically does is look at the titles that we put in to the link tags for the style sheets and creates a cookie on the users machine, which is not the most ideal way of doing it as some people have cookies disabled, but this is probably the easiest way and will work with basic HTML.

So put this in a new file and give it a .js extension.

Then we need the page to load up the javascript file so put the following code in the head of your document:

<script type="text/javascript" src="js/styleswitcher.js"></script>

Now we have our CSS and a means of changing between them now we just need to make it so that the user can change them easily.

The HTML we use for this is this:

<a href="http://skeletorscorpse.com/joomla/#" onclick="setActiveStyleSheet('default'); return false;">Default</a>
<a href="http://skeletorscorpse.com/joomla/#" onclick="setActiveStyleSheet('large1'); return false;">Large</a>
<a href="http://skeletorscorpse.com/joomla/#" onclick="setActiveStyleSheet('large2'); return false;">Largest</a>

You will notice that the setActiveStyleSheet attribute uses the titles that we gave to our stylesheets. So if a user clicks Large, the style sheet with the title large1 will be loaded and a cookie will be set on the machine so that the user always has that style sheet.