Forums

Aaronmccann

[SOLVED]

I'm looking for some light-weight JS code that can swap style-sheets by onClick of a button. I'm currently using one that only seems to work properly in Firefox. My goal is to have the visitor hit a "lightswitch" and swap style-sheets to go from a very light style page, to one thats very dark. Other then it only working in firefox, the JS code I'm using now works pretty good. My only gripes are that it reloads the default style-sheet on refresh and it works off of two a href links.

Heres the JS code and style-sheet links:


<head>
	<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/nav.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/content.css" type="text/css" media="screen">
	<link rel="stylesheet" title="lights-on" href="css/lights-on.css" type="text/css" media="screen">
	<link rel="stylesheet" title="lights-off" href="css/lights-off.css" type="text/css" media="screen">
	<script type="text/javascript">
	function changeCSS(a){
	for(i=0; i<document.styleSheets.length; i++){
	if(document.styleSheets[i].title){
	document.styleSheets[i].disabled=true;
	if(document.styleSheets[i].title==a){
	document.styleSheets[i].disabled=false;
	}
	}
	}
	}
	</script>
</head>

Heres the mark up for the "switch":


<div class="lightswitch">
	<a href="javascript://" onclick="changeCSS('lights-on');"><div id="switchon"></div></a>
	<a href="javascript://" onclick="changeCSS('lights-off');"><div id="switchoff"></div></a>
</div>

You can check out the code above in action here.
Keep in mind that the page layout in the link ONLY works in Firefox right now.

Thanks for any Input!

-Aaron-

Senff

jQuery is quite cross-browser compatible. Check out this fiddle: http://jsfiddle.net/senff/WGC68/

It basically just changes the class of the BODY element, so you can have separate sections in your CSS file that only apply to specific body classes.

Mottie

I've used a version of this theme switcher forever. Instead of disabling the stylesheet as you have above, it just disables the link, it works very nicely.

Actually, the one of dynamic drive is really messy... this is the version that I used in the past, now I just use jQuery to disable the link.

Set up the links like this:

<link rel="stylesheet" type="text/css" href="theme/bold.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="theme/black.css" title="black" />
<link rel="alternate stylesheet" type="text/css" href="theme/blue.css" title="blue" />
<link rel="alternate stylesheet" type="text/css" href="theme/red.css"  title="red" />

And the script:

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;
}

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;
    createCookie("style", title, 365);
   }
  }
 }
}

function setPassiveStyleSheet(title) {
 var i, a, main;
 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
  if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
   a.disabled = true;
    if(a.getAttribute("title") == title) a.disabled = false;
  }
 }
}

Note: The setPassiveStylesheet function is run on page load, then the setActiveStyleSheet function is used to change themes. The title is just the title of the theme contained within the link.

Aaronmccann

Cool, looks like I have some things to try out. Is the script you provided triggered by a clicking a link Mottie? Im not that great at jquery or .js just yet.

Mottie

Yeah, sorry here is an example link:

<a href="#" onclick="setActiveStyleSheet('black'); return false;">black</a>

and up in the document head, make sure to add this to set the passive stylesheet:

<script type="text/javascript">
 var cookie = readCookie("style");
 var cssName = cookie ? cookie : "default";
 setPassiveStyleSheet(cssName);
</script>

Aaronmccann

Thanks Mottie. I finally got around to tinkering with this again. I got it working and it works great! I appreciate your help!

treehouse : what would you like to learn today?

Forums

[Solved] Any Cross-browser JS code that can swap CSS Stylesheets by onClick?