CSS choice not carrying to new pages

evil-monkey

Hi all. Slight problem.

I have two CSS developed for my site. Users can choose which one of these two styles they prefer on the homepage. However, once you then go to another page, their choice is forgotten.

How can I set it that the CSS that is selected at the start remains as the site's CSS until they go back and decide to change it again??

I'm thinking cookies, but is that way off the mark? Not a web developer at all at all...

Thanks in advance

ron_darrell

That's like saying "Yesterday I was on a road. Anyone have any idea where I was headed to?" Give us more information. Are you using scripts to pick (and save the choice) the style? If so are you using client side or server side scripts? What language are the scripts written in? What kind of server is the site hosted on?

RD

evil-monkey

ron_darrell wrote: »

That's like saying "Yesterday I was on a road. Anyone have any idea where I was headed to?" Give us more information. Are you using scripts to pick (and save the choice) the style? If so are you using client side or server side scripts? What language are the scripts written in? What kind of server is the site hosted on?

RD

Cheers for the fast response RD.

I have used Javascript and created functions in the HTML as follows;

<script type="text/javascript">
function changeToStyle1()
{
var css = document.getElementById("css");
css.href = "style1.css";
}
function changeToStyle2()
{
var css = document.getElementById("css");
css.href = "style2.css";
}
</script>

I then have the choice made by users working off of an image map, as follows;

<area shape="rect" coords="30,288,103,320" a="a" onclick="changeToStyle1();" href="#" />
<area shape="rect" coords="193,290,261,319" a="a" onclick="changeToStyle2();" href="#" />

Site is being hosted on bog standard free student hosting offered by Digiweb.

louie

You need to set a cookie or session and check for its value on the new page.
If there is a value, load the respective CSS file else load the default....

evil-monkey

louie wrote: »

You need to set a cookie or session and check for its value on the new page.
If there is a value, load the respective CSS file else load the default....

I see. Any chance you could dumb that down a bit

Dades

Being a non programmer myself I'd just create duplicate HTML folders with each folder's pages using a different stylesheet!

I can hear the screams of anguish already.

Eoin

get/set cookies with JavaScript:
http://www.quirksmode.org/js/cookies.html

ron_darrell

Would have to side with Dades here, seeing as you aren't a programmer. You have two problems here:

1. Your user may have disabled javascript in which case not only will your selection code not work but your cookie setting/getting code won't work either
2. Your user may have disabled cookies in which case you won't be able to retrieve which style they selected and your back to square 1

Your best bet here is to have a style selection page and then as dades recommended save the styles and a copy of your HTML in separate folders. Let's pretend that your selection page is index.html in the root folder. It should contain code like this then:

<a href="/style1/main.html">Style 1 - Blue</a><br />
<a href="/style2/main.html">Style 2 - Green</a><br />
...
...
<a href="/styleK/main.html">Style K - Red</a><br />

(where K is the number of styles you are making available). This code could be redesigned to work with an image map quite easily just sending the user to the appropriate link now instead of to a javascript function.

A copy then of all the HTML files that make up your site can be put in each of the style folders and the associated CSS file (which now have the same name in all these folders but are different files i.e. they generate different layouts). A link back to the index.html in the root then in each of these 'sites' needs to be added if the user wishes to change the style again.

Hope that's of some help.

Regards,
RD

PS: To head off the nay sayers

1. The OP is not a programmer
2. Depending on javascript is never a good idea
3. Cookies are hardly any better than hope as no guarantee that the user hasn't disabled them
4. As the same HTML files are going to be used in all of these designs the amount of extra work is minimal (namely making a copy of any changed HTML files in all of the style folders)
5. Simpler is often better

evil-monkey

Ok. So despite all the advice, and against my better judgment I went away and got this working using Cookies (what can I say, I was curious :P )

Anyway, now, I have the CSS selection being saved on the index page no problem using the following;

<link rel="stylesheet" type="text/css" href="style1.css" title="default" />
<link rel="stylesheet" type="text/css" href="style2.css" title="alt1" />
<link rel="stylesheet" type="text/css" href="style3.css" title="alt2" />
<link rel="stylesheet" type="text/css" href="style4.css" title="alt3" />
<link rel="stylesheet" type="text/css" href="style5.css" title="alt4" />

<script type="text/javascript" src="/scripts/styleselection.js"></script>

</head>

<body>

<div id="header">
  <h1>Help With Words.com</h1>
    <h2>&nbsp;</h2>
    <h2><a href="#" onclick="setActiveStyleSheet('default'); return false;">Black/White</a> |  <a href="#" onclick="setActiveStyleSheet('alt1'); return false;">Black/Turquoise</a> | <a href="#" onclick="setActiveStyleSheet('alt2'); return false;">Black/Yellow</a> |  <a href="#" onclick="setActiveStyleSheet('alt3'); return false;">Electric Blue</a> | <a href="#" onclick="setActiveStyleSheet('alt4'); return false;">Olive</a><br />

and the styleselection.js file;

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

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

So the cookies are working on this page. But when I open a new page, the default is still loaded. Is there any way that I can set it so that the other pages load the CSS based on the cookie?? So that the selection remains constant across all pages??

If you want to see the site so as you know what I mean, it is located at helpwithwords.joscv.com

Thanks in advance

evil-monkey

anyone?

louie

try this

function setActiveStyleSheet(title) {
	if(title == "") title = "default";
	var ewd_head = document.getElementsByTagName("head")[0];
	var ewd_css = document.createElement('link');
	ewd_css.type = 'text/css';
	ewd_css.rel = 'stylesheet';
	switch (title) {
		case "default": 
			ewd_css.href = 'style1.css';
			break;
		case "alt1": 
			ewd_css.href = 'style2.css';
			break;
		case "alt2": 
			ewd_css.href = 'style3.css';
			break;
		case "alt3": 
			ewd_css.href = 'style4.css';
			break;
		case "alt4": 
			ewd_css.href = 'style5.css';
			break;
		default: 
			ewd_css.href = 'style1.css';
	}
	
	ewd_css.media = 'screen';
	ewd_head.appendChild(ewd_css);
}

louie

replace your javascript with this and give it a go

function setActiveStyleSheet(title) {
	if(title == null || title == "") title = "default";
	alert("setting cookie " + title);//comment this when finished testing
	var ewd_head = document.getElementsByTagName("head")[0];
	var ewd_css = document.createElement('link');
	ewd_css.type = 'text/css';
	ewd_css.rel = 'stylesheet';
	switch (title) {
		case "default": 
			ewd_css.href = 'style1.css';
			break;
		case "alt1": 
			ewd_css.href = 'style2.css';
			break;
		case "alt2": 
			ewd_css.href = 'style3.css';
			break;
		case "alt3": 
			ewd_css.href = 'style4.css';
			break;
		case "alt4": 
			ewd_css.href = 'style5.css';
			break;
		default: 
			ewd_css.href = 'style1.css';
	}
	ewd_css.media = 'screen';
	ewd_head.appendChild(ewd_css);
	createCookie("style",title,365);
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
  alert("cookie "+ name + " " + value + " created");//comment this when finished testing
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

var cookie = readCookie("style");
var title = cookie != null ? cookie : "default";
setActiveStyleSheet(title);

CuLT

ron_darrell wrote: »

1. Your user may have disabled javascript in which case not only will your selection code not work but your cookie setting/getting code won't work either
2. Your user may have disabled cookies in which case you won't be able to retrieve which style they selected and your back to square 1

I'd love to see some stats on users who disable javascript/cookies. I mean there are obvious cases like mobile devices etc, but I think your solution is eh, less than elegant, shall we say

How would you tackle this particular problem if you wouldn't use Javascript or Cookies? (they're unreliable after all!)

Eoin

CuLT wrote: »

I'd love to see some stats on users who disable javascript/cookies.

Some fella called Ross should have stats from a pretty big website!

CuLT wrote: »

How would you tackle this particular problem if you wouldn't use Javascript or Cookies? (they're unreliable after all!)

I suppose a cookie-less session variable would be an option.

CuLT

eoin wrote: »

Some fella called Ross should have stats from a pretty big website!

Hah, he's an awful eejit though The only web traffic stats we keep at the moment is Google Analytics. As it's JS and Cookie based, I'm not sure it even tracks anything on users with either of those disabled.

If someone knows otherwise though I can crunch the numbers.

I suppose a cookie-less session variable would be an option.

i suppose, impermanent though. But I guess that's the end goal of people who browse with cookies disabled.

evil-monkey

louie wrote: »

replace your javascript with this and give it a go

function setActiveStyleSheet(title) {
    if(title == null || title == "") title = "default";
    alert("setting cookie " + title);//comment this when finished testing
    var ewd_head = document.getElementsByTagName("head")[0];
    var ewd_css = document.createElement('link');
    ewd_css.type = 'text/css';
    ewd_css.rel = 'stylesheet';
    switch (title) {
        case "default": 
            ewd_css.href = 'style1.css';
            break;
        case "alt1": 
            ewd_css.href = 'style2.css';
            break;
        case "alt2": 
            ewd_css.href = 'style3.css';
            break;
        case "alt3": 
            ewd_css.href = 'style4.css';
            break;
        case "alt4": 
            ewd_css.href = 'style5.css';
            break;
        default: 
            ewd_css.href = 'style1.css';
    }
    ewd_css.media = 'screen';
    ewd_head.appendChild(ewd_css);
    createCookie("style",title,365);
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
  alert("cookie "+ name + " " + value + " created");//comment this when finished testing
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

var cookie = readCookie("style");
var title = cookie != null ? cookie : "default";
setActiveStyleSheet(title);

Same problem Louie. The selection is remembered for the first page, but when you move to another page it kicks back to the default. The first page is remembered, but the selection doesn't carry...

louie

do you have an working example with the above code?

louie

Mine is working as you can see here:

http://www.eireseo.ie/cookie_css/

NotMe

evil-monkey wrote: »

Same problem Louie. The selection is remembered for the first page, but when you move to another page it kicks back to the default. The first page is remembered, but the selection doesn't carry...

You've only put
[PHP]<script type="text/javascript" src="scripts/styleselection.js"></script>[/PHP]
on the index page. You need it on every page.

evil-monkey

Spot on lads. All working away nicely now. Cheers for that.