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++) {
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++) {
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++) {
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;
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=http://www.webdeveloper.com/forum/archive/index.php/"styleswitcher.js"></script>
now for the CSS.
in you web page you properly have something like
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"1.css" title="1" />
<link rel="alternate stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"2.css" title="2" />
<link rel="alternate stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"3.css" title="3" />
<link rel="alternate stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"4.css" title="4" />
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"styleswitcher.js"></script>
</head>
Now for the HTML part...
all you need to change the style sheet is...
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" 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.You are missing "already done that" option in your poll.
Good job anyway...and the demo site? lolWhen i get home.
at work now.You also forgot the option "know where else to fine it."
Don't you think you should have given credit where credit was due?
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/alternate/i">http://www.alistapart.com/articles/alternate/i</a><!-- m --> was never taken credit for it, just wanted to post it for people.
nothing wrong with that
anyway....
here is a working example and Download .
<!-- m --><a class="postlink" href="http://chris9902.free-host.com/change.htmErr">http://chris9902.free-host.com/change.htmErr</a><!-- m -->, not working in Moz......becuase of the host....
Originally posted by chris9902
i was never taken credit for it, just wanted to post it for people.You also didn't say (or even allude to the fact) that it wasn't yours, so had I (or someone else) not recognized it and pointed that out, others would not have known. Giving proper credit for code that you did not write is the only civil thing to do.okOh yes it doesn't work when JS is disabled and Mozilla has the style switching capacity built into the browser as standard - but I suppose it was the thought what counted.Originally posted by Robert Wellock
Oh yes it doesn't work when JS is disabled and Mozilla has the style switching capacity built into the browser as standard - but I suppose it was the thought what counted.
IMHO the discussed feature is among those where the dependence on javascript is perfectly ok. It does not affect the delivery of content nor the default presentation - just adds presentation options for browsers which can handle it.just out of curiosity,
is there anywhere where a quick stylesheet switcher (php server side) can be Download ed and impleted without any customization except for the URLs of the style sheet?
just a link or soemthing?
for future reference
ta!Well there's an ALA tutorial: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/phpswitch/">http://www.alistapart.com/articles/phpswitch/</a><!-- m -->
and here's one that someone who read that article has compiled into a Download , and added extra functionality: <!-- m --><a class="postlink" href="http://www.contrastsweb.com/switcher/Actually">http://www.contrastsweb.com/switcher/Actually</a><!-- m --> SSI could be used to style switch if you happen to be one of those people who don't have PHP or ASP, and SSI tends to be available to more users with free accounts.ah good stuff
thanks very much
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++) {
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++) {
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++) {
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;
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=http://www.webdeveloper.com/forum/archive/index.php/"styleswitcher.js"></script>
now for the CSS.
in you web page you properly have something like
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"1.css" title="1" />
<link rel="alternate stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"2.css" title="2" />
<link rel="alternate stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"3.css" title="3" />
<link rel="alternate stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"4.css" title="4" />
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"styleswitcher.js"></script>
</head>
Now for the HTML part...
all you need to change the style sheet is...
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" 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.You are missing "already done that" option in your poll.
Good job anyway...and the demo site? lolWhen i get home.
at work now.You also forgot the option "know where else to fine it."
Don't you think you should have given credit where credit was due?
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/alternate/i">http://www.alistapart.com/articles/alternate/i</a><!-- m --> was never taken credit for it, just wanted to post it for people.
nothing wrong with that
anyway....
here is a working example and Download .
<!-- m --><a class="postlink" href="http://chris9902.free-host.com/change.htmErr">http://chris9902.free-host.com/change.htmErr</a><!-- m -->, not working in Moz......becuase of the host....
Originally posted by chris9902 i was never taken credit for it, just wanted to post it for people.You also didn't say (or even allude to the fact) that it wasn't yours, so had I (or someone else) not recognized it and pointed that out, others would not have known. Giving proper credit for code that you did not write is the only civil thing to do.okOh yes it doesn't work when JS is disabled and Mozilla has the style switching capacity built into the browser as standard - but I suppose it was the thought what counted.Originally posted by Robert Wellock
Oh yes it doesn't work when JS is disabled and Mozilla has the style switching capacity built into the browser as standard - but I suppose it was the thought what counted.
IMHO the discussed feature is among those where the dependence on javascript is perfectly ok. It does not affect the delivery of content nor the default presentation - just adds presentation options for browsers which can handle it.just out of curiosity,
is there anywhere where a quick stylesheet switcher (php server side) can be Download ed and impleted without any customization except for the URLs of the style sheet?
just a link or soemthing?
for future reference
ta!Well there's an ALA tutorial: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/phpswitch/">http://www.alistapart.com/articles/phpswitch/</a><!-- m -->
and here's one that someone who read that article has compiled into a Download , and added extra functionality: <!-- m --><a class="postlink" href="http://www.contrastsweb.com/switcher/Actually">http://www.contrastsweb.com/switcher/Actually</a><!-- m --> SSI could be used to style switch if you happen to be one of those people who don't have PHP or ASP, and SSI tends to be available to more users with free accounts.ah good stuff
thanks very much