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

[Historical Forums User]

[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:

Heres the mark up for the “switch”:

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:

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;

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++) {

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++) {

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.

[Historical Forums User]

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:

black

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

[Historical Forums User]

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

[Author]

Posts