Forum Moderators: open
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">
<html>
<head>
<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) {
//WRITE COOKIE
makeCookie(vCookieName, vSelection, 90, '/');
//ACTIVE SELECTED ALTERNAT STYLE SHEET
setActiveStyleSheet(vSelection)
}
if (document.cookie.indexOf('layout=')!=-1) {
css = readCookie('layout');
//ACTIVATE SELECTED STYLE SHEET
setActiveStyleSheet(css)
}
</script>
</head>
<body>
<!-- [STYLE SWITCHER] -->
<h1>Style Switcher using alternate style sheets</h1>
<br/>
<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>
</select>
<br /><br />
<div id="testbox">
This is a DIV that will be changed when the style sheet is changed.
</div>
<p><a href="styletest_new.htm">styletest_new.htm</a></p>
</body>
</html>
I'm no good. Whenever I mess with cookies, it's me that gets burned.
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...
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.
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');
