PDA

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