homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Javascript Stylesheet Switcher
Problem with Cookies

10+ Year Member

Msg#: 2874 posted 11:56 pm on Dec 8, 2004 (gmt 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+ Year Member

Msg#: 2874 posted 10:08 am on Dec 9, 2004 (gmt 0)

Why don't u make simple?

Bernard Marx

WebmasterWorld Senior Member 10+ Year Member

Msg#: 2874 posted 10:20 am on Dec 9, 2004 (gmt 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.


10+ Year Member

Msg#: 2874 posted 4:21 pm on Dec 9, 2004 (gmt 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...


10+ Year Member

Msg#: 2874 posted 4:33 am on Dec 12, 2004 (gmt 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.


WebmasterWorld Senior Member 10+ Year Member

Msg#: 2874 posted 10:53 am on Dec 12, 2004 (gmt 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');


10+ Year Member

Msg#: 2874 posted 4:23 pm on Dec 13, 2004 (gmt 0)


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved