View Full Version : Switch themes using document.className
JohnL
03-08-2015, 08:14 AM
I am currently switching themes with css "title". See: http://12phillipstreet.com/button.html I would like to switch themes using document.className. Any suggestions?
Beverleyh
03-08-2015, 03:57 PM
Your question is unclear.
What is it exactly that you would like help with?
If you want to reference the <html> element, document.className should be document.documentElement.className
JohnL
03-08-2015, 10:38 PM
Your question is unclear.
What is it exactly that you would like help with?
If you want to reference the <html> element, document.className should be document.documentElement.className
"Thanks for your quick response Beverly. I will try to clarify my problem for you.
Currently my site has 23 pages each using a large"common" style sheet plus "3 optional theme-colour" style sheets. The theme-colour options are switched using the traditional alternative "title" Eg. <link href="css/black.css" rel="alternate stylesheet" type="text/css" title="black" /> and maintained globally with Javascript and cookies. This all works very well.
My problem: In order to reduce the number of server requests, I have combined the three small theme-colour styles within the common CSS. The themes are now switched with Eg. <button class="black" type="submit" onclick="document.body.className = 'tb';">.</button> . This also works well except that the theme change is not global and does not hold on refresh.
I think my problem is really a Javascript/cookie problem. Unfortunately my knowledge of Javascript is very limited so I'm hoping some kind person can provide me with a suitable script to make it work globally and solve my problem.
See: html://12phillipstreet/button.html & html://12phillipstreet/accessibility.html
Thanks in advance jl"
vwphillips
03-09-2015, 10:37 AM
remove the body onload statement and associated code
change the HTML to
<div class=button-new>Themes:
<button class=white type=submit onclick="CSS('tw',1);">.
</button>
<button class=khaki type=submit onclick="CSS('tk',1);">.
</button>
<button class=black type=submit onclick="CSS('tb',1);">.
</button>
</div>
insert this code just before the </BODY> tag
<script type="text/javascript">
/*<![CDATA[*/
function CSS(c,d){
if (c){
document.body.className=c;
document.cookie='css='+c+(typeof(d)=='number'?';expires='+(new Date(new Date().getTime()+d*86400000).toGMTString())+';path/;':';');
}
}
function cookie(nme){
var re=new RegExp(nme+'=[^;]+','i');
return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
}
CSS(cookie('css'),1);
/*]]>*/
</script>
function CSS parameters are:
the first function parameter is the class name,
the second parameter(in red) refers to the number od days to restor the CSS else it is the browser session
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.