chris9902
01-02-2004, 09:32 AM
I got this script working so i thought i would share it with you guys.
this script alows you to change the style sheet you are using on your site without using php or asp.
first we need the javascript
save this file as styleswitcher.js
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);
when you have saved it place an external link to it in the head of your site, like this...
<script type="text/javascript" src="styleswitcher.js"></script>
now for the CSS.
in you web page you properly have something like
<link rel="stylesheet" type="text/css" href="1.css" title="1" />
if not it is important you add it becuase this will only change external style sheets.
now in the HEAD of your HTML page add this line
<link rel="stylesheet" type="text/css" href="1.css" title="1" />
this will be your default style sheet (named 1.css for this) this will be the style sheet that loads when people don't change the style.
now to make an alt style sheet. Do so by adding...
<link rel="alternate stylesheet" type="text/css" href="2.css" title="2" />
Also place this inside the HEAD, this will stay inactive until the javascript calls for it.
the important thing is the title="" app, each style sheet links title MUST be different, they don't have to match the name of you style sheet they just can't be the same as another external style sheet link.
you can add as many of them as you like, so your head could end up like...
<head>
<title>styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="1.css" title="1" />
<link rel="alternate stylesheet" type="text/css" href="2.css" title="2" />
<link rel="alternate stylesheet" type="text/css" href="3.css" title="3" />
<link rel="alternate stylesheet" type="text/css" href="4.css" title="4" />
<script type="text/javascript" src="styleswitcher.js"></script>
</head>
Now for the HTML part...
all you need to change the style sheet is...
<a href="#" onclick="setActiveStyleSheet('1'); return false;">change style to 1</a>
the part ('1'); this must match the style sheet you want to call.
and thats it. download avalible for anyone who wants it.
this script alows you to change the style sheet you are using on your site without using php or asp.
first we need the javascript
save this file as styleswitcher.js
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);
when you have saved it place an external link to it in the head of your site, like this...
<script type="text/javascript" src="styleswitcher.js"></script>
now for the CSS.
in you web page you properly have something like
<link rel="stylesheet" type="text/css" href="1.css" title="1" />
if not it is important you add it becuase this will only change external style sheets.
now in the HEAD of your HTML page add this line
<link rel="stylesheet" type="text/css" href="1.css" title="1" />
this will be your default style sheet (named 1.css for this) this will be the style sheet that loads when people don't change the style.
now to make an alt style sheet. Do so by adding...
<link rel="alternate stylesheet" type="text/css" href="2.css" title="2" />
Also place this inside the HEAD, this will stay inactive until the javascript calls for it.
the important thing is the title="" app, each style sheet links title MUST be different, they don't have to match the name of you style sheet they just can't be the same as another external style sheet link.
you can add as many of them as you like, so your head could end up like...
<head>
<title>styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="1.css" title="1" />
<link rel="alternate stylesheet" type="text/css" href="2.css" title="2" />
<link rel="alternate stylesheet" type="text/css" href="3.css" title="3" />
<link rel="alternate stylesheet" type="text/css" href="4.css" title="4" />
<script type="text/javascript" src="styleswitcher.js"></script>
</head>
Now for the HTML part...
all you need to change the style sheet is...
<a href="#" onclick="setActiveStyleSheet('1'); return false;">change style to 1</a>
the part ('1'); this must match the style sheet you want to call.
and thats it. download avalible for anyone who wants it.