style madness #
HAHA!! As you can see by the little f buttons you can see I’ve gone style mad. If you aint messed with ya cookie settings it should remember which style ya like when ye come back here (:
How to do it, well:
make say 3 external style sheets with the different styles in (font-color, background pic, you can do font-size as well which could be handy). Then inside the <head> tags put:
-----------------------------------------------------------------------------------------------------
I like the little buttons I made, very easy. In style sheet(s) just put:
How to do it, well:
make say 3 external style sheets with the different styles in (font-color, background pic, you can do font-size as well which could be handy). Then inside the <head> tags put:
<link rel=stylesheet href="style.css" type="text/css" media="screen" />You can see how it works, then the javascript. I like to make me JS external as well and just add:
<link rel="alternate stylesheet" href="style.css" type="text/css" title="s1" media="screen" />
<link rel="alternate stylesheet" href="style2.css" type="text/css" title="s2" media="screen" />
<link rel="alternate stylesheet" href="style3.css" type="text/css" title="s3" media="screen" />
<script language="JavaScript" SRC="script.js" type="text/javascript"></script>In-between the <head> tags, you could just put the script right in the <head> tags if ya wanted:
<script language="JavaScript" type="text/javascript">OK here’s the script:
>>>>Script goes here<<<<
</script>
function setActiveStyleSheet(title){got that… cool. Now just make the links:
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);
<a href="#switcher" onClick="setActiveStyleSheet('s1'); return false;">click here to switch style</a>Easy.
<a href="#switcher" onClick="setActiveStyleSheet('s2'); return false;">click here to switch style</a>
<a href="#switcher" onClick="setActiveStyleSheet('s3'); return false;">click here to switch style</a>
-----------------------------------------------------------------------------------------------------
I like the little buttons I made, very easy. In style sheet(s) just put:
a:link.switchb,a:visited.switchb{then just put class=”switchw” in the <a> tag, i.e.
color:red;
background-color:black;
text-decoration:none;
border:1px solid red;
font-style:normal;
font-weight:bold;
}
a:hover.switchb{
color:black;
background-color:red;
text-decoration:none;
border:1px solid black;
font-style:normal;
font-weight:bold;
}
a:link.switchw,a:visited.switchw{
color:gray;
background-color:white;
text-decoration:none;
border:1px solid gray;
font-style:normal;
font-weight:bold;
}
a:hover.switchw{
color:white;
background-color:gray;
text-decoration:none;
border:1px solid white;
font-style:normal;
font-weight:bold;
}
a:link.switchbl,a:visited.switchbl{
color:white;
background-color:#5053F3;
text-decoration:none;
border:1px solid white;
font-style:normal;
font-weight:bold;
}
a:hover.switchbl{
color:#5053F3;
background-color:white;
text-decoration:none;
border:1px solid #5053F3;
font-style:normal;
font-weight:bold;
}
<a class=”switchw” href="#switcher" onClick="setActiveStyleSheet('s3'); return false;"> f </a>enjoy
<a class=”switchb” href="#switcher" onClick="setActiveStyleSheet('s3'); return false;"> f </a>
<a class=”switchbl” href="#switcher" onClick="setActiveStyleSheet('s3'); return false;"> f </a>
