can I switch the css via a link?

dazsly · 14 Sep 2006 at 10:00

Hi, as the title, Im quote new to css and am trying to learn as I go.
Whats the easiest way to change the css to a black text only css? via a link if possible or using code.

This is so any one with sight problems can access the site.

Thanks!

JonD · 14 Sep 2006 at 10:16

Its done using javascript:

http://www.alistapart.com/articles/alternate/

dazsly · 14 Sep 2006 at 12:14

Hmm cant seem to get it to work help please

I have downloaded the javascript for switching between css and put it into the root along with the default css and the alternative test css.

Thanks

Code:

html
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The History Of The INSURANCE Industry</title>
<link href="history-of-insurance.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" 
src="/scripts/styleswitcher.js"></script>
</head>
<a href="#" 
onclick="setActiveStyleSheet('history-of-insurance.css'); 
return false;">change style to default</a>
<a href="#" 
onclick="setActiveStyleSheet('test.css'); 
return false;">change to test</a>
<body>

JAVASCRIPT FILE

Code:

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

toString · 14 Sep 2006 at 13:01

Dunno if it's the problem, but you've got your links outside of the body tag....

herrpoon · 14 Sep 2006 at 13:23

KingAdora said:
Dunno if it's the problem, but you've got your links outside of the body tag....

That probably doesn't help

Try assigning a title attribute to the style sheet, a la:

Code:

<link rel="stylesheet" type="text/css" href="default.css" title="default"

Worked for me anyway!

Sic · 14 Sep 2006 at 21:13

i knew i'd be able to think of a half decent way to do this with php

Code:

<?
$sheet = $_REQUEST['style'];

if ($sheet == NULL)
{
	$sheet="style";
}
else
{
	$sheet = $_REQUEST['style'];
}

$file = "css/$sheet.css";

if (file_exists($file))
{
echo "<link href=\"css/$sheet.css\" type=\"text/css\" rel=\"stylesheet\" />"; 
}
else
{
header("Location: select.php");
exit;
}

?>

stick that in your header because it'll print the stylesheet import thing or redirect if the stylesheet doesn't exist. that's looking in a folder called "css" for your stylesheet so change them if you want

i've not tested it, so there's a good chance that it won't work, but the thought's there