Change Style

Pascal Vyncke Sep 23, 2006

General

Let your visitors change the style sheet on your Web site. This script will let your visitors choose between five style sheets, which you can create yourself or use the ones included.

Choose your style!

Style 1
Style 2
Style 3
Style 4
Style 5

Notes

Created by: Pascal Vyncke
Web Site: http://www.seniorennet.be
Posted: September 23, 2006

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: changeStyle.js

// 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());

Head

Paste this code into the HEAD section of your HTML document.


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

Body

Paste this code into the BODY section of your HTML document


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

Other

Download the images using the URL below:

Download the stylesheets here

Leave a Response

(8 comments)

Great code, with one exception. The cookie seems to apply only to pages within the directory where the user selected a style sheet. When they browse the site, and view pages within a different directory, the default style sheet is used. Anyone have a suggestions as to how to alter the code to overcome this limitation?

Matt Strippelhoff Apr 3, 2008

Sean, you would need something [a href="http://alistapart.com/articles/bodyswitchers"]a bit different[/a].

Lee Underwood Jan 29, 2008

I successfully used your code to create a user-defined css home page (with multiple external css files), but I wanted to know what I need to use in the headers of the pages to follow to keep this selection active?[br /](http://javascript.internet.com/css/change-style.html)[br /][br /]Thanks,[br /]S

Sean Ayotte Jan 9, 2008

I'm new at js, after following the directions carefully, the script only managed to put radio buttons and the list of style sheets in my Safari browser.[p]Any suggestions before I drag it into the trash?

Grego May 8, 2007

Great example. Thanks!

jeff Apr 24, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details