Change Cascading Style Sheets
From CodeCodex
Let your visitors change the style sheet on your website. This JavaScript will let your visitors choose between five style sheets.
[edit] Implementations
[edit] JavaScript
<!-- THREE STEPS TO INSTALL CHANGE STYLE:
1. Copy the coding into an external file named "changeStyle.js"
2. Place a link to the external file into the HEAD of your HTML document
3. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into an external file named "changeStyle.js" -->
<HEAD>
<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Pascal Vyncke :: http://www.SeniorenNet.be */
// These are the variables; you can change these if you want
var expDays = 9999; // How many days to remember the setting
var standardStyle = '2'; // This is the number of your standard style sheet; this will be used when the user did not do anything.
var nameOfCookie = 'switchstyle'; // This is the name of the cookie that is used.
var urlToCSSDirectory = ''; // This is the URL to your directory where your .css files are placed on your site. For example: http://www.seniorennet.be/URL_TO_STYLESHEET_DIRECTORY_OF_YOUR_SITE/
// These are the names of your different .css files; use the name exactly as on your Web site
var ScreenCSS_1 = 'screen_1.css';
var ScreenCSS_2 = 'screen_2.css';
var ScreenCSS_3 = 'screen_3.css';
var ScreenCSS_4 = 'screen_4.css';
var ScreenCSS_5 = 'screen_5.css';
// If you use different .css files for printing a document, you can set these. If you don't even know what this is, name then everything exactly the same as above.
// So: make then PrintCSS_1 the same as ScreenCSS_1, for example "screen_1.css".
var PrintCSS_1 = 'print_1.css';
var PrintCSS_2 = 'print_2.css';
var PrintCSS_3 = 'print_3.css';
var PrintCSS_4 = 'print_4.css';
var PrintCSS_5 = 'print_5.css';
/***********************************************************************************************
DO NOT CHANGE ANYTHING UNDER THIS LINE, UNLESS YOU KNOW WHAT YOU ARE DOING
***********************************************************************************************/
// This is the main function that does all the work
function switchStyleOfUser(){
var fontSize = GetCookie(nameOfCookie);
if (fontSize == null) {
fontSize = standardStyle;
}
if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ' ' + ScreenCSS_1 + '" media="screen">'); }
if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_2 + '" media="screen">'); }
if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_3 + '" media="screen">'); }
if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_4 + '" media="screen">'); }
if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_5 + '" media="screen">'); }
if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_1 + '" media="print">'); }
if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_2 + '" media="print">'); }
if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_3 + '" media="print">'); }
if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_4 + '" media="print">'); }
if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_5 + '" media="print">'); }
var fontSize = "";
return fontSize;
}
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
// Function to get the settings of the user
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
// Function to get the settings of the user
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
// Function to remember the settings
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
// Function to remove the settings
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
// This function is used when the user gives his selection
function doRefresh(){
location.reload();
}
// This will call the main function. Do not remove this, because otherwise this script will do nothing...
document.write(switchStyleOfUser());
-->
</script>
</HEAD>
<!-- STEP TWO: Place a link to the external file into the HEAD of your HTML document -->
<script type="text/javascript" src="changeStyle.js"></script>
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<BODY>
<div align="center">
<h2>Choose your style!</h2>
<p>
<input type="radio" name="grootte" value="1" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 1<br>
<input type="radio" name="grootte" value="2" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 2<br>
<input type="radio" name="grootte" value="3" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 3<br>
<input type="radio" name="grootte" value="4" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 4<br>
<input type="radio" name="grootte" value="5" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 5<br>
</p>
</div>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 7.53 KB -->
Original Source: Pascal Vyncke
