Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Javascript Stylesheet Switcher

Problem with Cookies

11:56 pm on Dec 8, 2004 (gmt 0)

Full Member

10+ Year Member

joined:Jan 5, 2004
votes: 0


I'm trying to implement a javascript stylesheet switcher. It works fine on a single page, but it doesn't seem to be able retain the chosen stylesheet when a user links to another page with the same code on it.

Can anyone see what might be wrong with the setting and reading of the cookies with this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<link rel="stylesheet" type="text/css" media="screen" title="style-default" href="style-default.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="style-a" href="style-a.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="style-b" href="style-b.css">
<title>Style Switcher</title>

<script language="JavaScript" type="text/javascript">

function makeCookie(Name,Value,Expiry,Path,Domain,Secure){
if (Expiry!= null) {
var datenow = new Date();
datenow.setTime(datenow.getTime() + Math.round(86400000*Expiry));
Expiry = datenow.toGMTString();

Expiry = (Expiry!= null)? '; expires='+Expiry : '';
Path = (Path!= null)?'; path='+Path:'';
Domain = (Domain!= null)? '; domain='+Domain : '';
Secure = (Secure!= null)? '; secure' : '';

document.cookie = Name + '=' + escape(Value) + Expiry + Path + Domain + Secure;

function readCookie(Name) {
var cookies = document.cookie;
if (cookies.indexOf(Name + '=') == -1) return null;
var start = cookies.indexOf(Name + '=') + (Name.length + 1);
var finish = cookies.substring(start,cookies.length);
finish = (finish.indexOf(';') == -1)? cookies.length : start + finish.indexOf(';');
return unescape(cookies.substring(start,finish));

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

function selectStyle (vCookieName, vSelection) {
makeCookie(vCookieName, vSelection, 90, '/');

if (document.cookie.indexOf('layout=')!=-1) {
css = readCookie('layout');


<h1>Style Switcher using alternate style sheets</h1>
<select class="select2" style="width:165px" onchange="var v=this.options[this.selectedIndex].value; if (v!= '') selectStyle('style', v);">
<option value="">-- Select Style --</option>
<option value="style-a">Style A</option>
<option value="style-b">Style B</option>

<br /><br />
<div id="testbox">
This is a DIV that will be changed when the style sheet is changed.

<p><a href="styletest_new.htm">styletest_new.htm</a></p>


10:08 am on Dec 9, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Oct 3, 2004
votes: 0

Why don't u make simple?
10:20 am on Dec 9, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
votes: 0

rover wants to switch the whole stylesheet, not styles for individual elements.

I'm no good. Whenever I mess with cookies, it's me that gets burned.

4:21 pm on Dec 9, 2004 (gmt 0)

Full Member

10+ Year Member

joined:Jan 5, 2004
votes: 0

Yes as Bernard Max says, the script lets the user change the style sheet being used by the HTML page.

So basically, the user can click on a link for the style sheet that they want applied to the page.

It works great on a single page, but somehow the cookie functions don't seem to be working properly, so that if the user changes the style sheet, their preference isn't carried when they visit other pages (that include this same code).

Somehow, it seems that the cookie is not being set properly, or is not being read properly, but I'm not sure why not...

4:33 am on Dec 12, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 10, 2003
votes: 0


Sorry for this "non reply" to your problem but what prompted you to take the stylesheet switcher approach in the first place?

Were users complaining about the size of text?

Are you sizing using pixels to solve cross-browser problems and are trying to compensate for IE's inability to resize pixels?

Or what?

Your input is greatly appreciated.

10:53 am on Dec 12, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 30, 2004
votes: 0


The name of the cookie your script sets is style.

selectStyle('style', v);"

But at the next page it searches for a cookie with the name of 'layout='.

if (document.cookie.indexOf('layout=')!=-1) {
css = readCookie('layout');

Obviously, it can't be found and you get the default css.
Changing those two lines will make it work:

if (document.cookie.indexOf('style')!=-1) {
css = readCookie('style');
4:23 pm on Dec 13, 2004 (gmt 0)

Full Member

10+ Year Member

joined:Jan 5, 2004
votes: 0