Welcome to WebmasterWorld Guest from 54.227.101.214

Forum Moderators: open

Message Too Old, No Replies

Javascript Stylesheet Switcher

Problem with Cookies

     

rover

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

10+ Year Member



Hi,

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>

orion_rus

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

10+ Year Member



Why don't u make simple?
onChange="this.style.className=[this.options[this.selectedIndex].value]"

Bernard Marx

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

WebmasterWorld Senior Member 10+ Year Member



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.

rover

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

10+ Year Member



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

ricfink

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

10+ Year Member



rover,

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.

Span

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

WebmasterWorld Senior Member 10+ Year Member



Rover,

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');

rover

4:23 pm on Dec 13, 2004 (gmt 0)

10+ Year Member



Thanks!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month