homepage Welcome to WebmasterWorld Guest from 54.163.72.86
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
rover




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

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




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

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

Bernard Marx




msg:1494528
 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.

rover




msg:1494529
 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...

ricfink




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

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




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

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




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

Thanks!

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