View Full Version : Style Sheet Switcher

02-12-2007, 08:16 PM
1) CODE TITLE: Style Sheet Switcher

2) AUTHOR NAME/NOTES: Michael Burt (http://mburt.funpic.org/)

3) DESCRIPTION: A style sheet switcher which uses any element (select, radio, buttons, links). Similar to http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm, but much easier to implement. Examples and instructions on url below.

4) URL TO CODE: http://mburt.mb.funpic.org/projects/css_switch/

02-12-2007, 10:07 PM
If there's any problems, go ahead and say so! :)

02-12-2007, 10:30 PM
Pretty neat looking. I notice that you have two different stylesheets associated with the default option, depending upon where it appears in your markup. Other than that, all you need is perhaps a cookie to remember the choice for the page and/or the site.

02-12-2007, 10:37 PM
Other than that, all you need is perhaps a cookie to remember the choice for the page and/or the site.
That's a good idea... I'll try to implement that.

02-12-2007, 11:06 PM
Okay, the cookies are working well now too. Should I add a feature if the user wants the cookies enabled or not?

02-12-2007, 11:20 PM
Nah. The user isn't all that smart about cookies generally.
I think that using the cookie is nice.... if they want it, they want it.
However, it's important to have an obvious 'reset'/'default' button if any of the layouts could potentially screw things up, such as white text on a white background or something, though that would be an unusual situation, probably.

02-13-2007, 12:36 AM
Yeah... I tried that, but when you specify no "href" attribute it causes a bunch of errors. Kind of hard to deal with, but I'll think of something.

02-13-2007, 02:09 AM

<a href="anything.htm" onclick="return dostuff();">

That's one way.

<a href="thispage.php?style=someserversidebackup" onClick="return dostuff();">

02-13-2007, 10:57 AM
I made an error catch now, so we don't need to worry about that :p Should be good to go.

02-13-2007, 10:35 PM
Just something that was bothering me earlier after looking at the markup, and I just checked with the validator:

Error Line 36 column 53: there is no attribute "SOURCE".
<br><input type="button" class="change-style" source="green.css" value="Green">

You could maybe use name rel or rev with links and value with checkboxes and radio buttons. For buttons, name - perhaps rel or rev might work.

02-14-2007, 12:51 AM
Wouldn't rel or rev also parse an error?

02-14-2007, 02:32 AM
Not for anchor links, they are valid attributes for those elements. Perhaps not for buttons either, I don't know. In any case it would break the real meaning of those attributes but, that is yet another (and some consider less relevant) matter. If Mike (mwinter) gets back and cares to comment on it, you will see what he thinks about co-opting the rel and rev attributes for scripting purposes. It still (if not ideal) is better than using a made up attribute that won't validate. Another approach would be to use a class and to assign via script the source as an object to those elements that have the corresponding class:


Or, use the class name more directly like so:

obj[i].onclick = function() {
var othsrc = this.className+'.css';

That way the class name would be the filename, the script would simply add the extension of .css during processing. Class names are valid for virtually all elements and their intended meaning can encompass this use.

Compound class names could even be used:

<span class="changestyle greencss">Green</span>

obj[i].onclick = function() {
var othsrc = this.className.split(' ')
for (var i_tem = 0; i_tem < othsrc.length; i_tem++)
othsrc=othsrc[i_tem].replace(/css/, '.css');

02-14-2007, 08:59 PM
Yeah, that's a good idea. But why have it jumbled up?
I think to just leave the filename would be better:

<span class="changestyle green.css">Green</span>
And to remove the RegExp code.

02-14-2007, 10:30 PM
I'm not certain if the . character is allowed in class names. Rather than check, I just sought to avoid it. But, I just checked, both the HTML and css validators don't seem to mind. FF, Opera and IE all see it as the element's className for scripting purposes but here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.green.css {
<span class="green.css" onclick="alert(this.className)">Hi</span>

The text isn't red as one would expect so, there is something wrong with it having a dot.

02-14-2007, 11:20 PM
Ah, ok. So your point is valid, but wouldn't something like:

<span class="green*css" onclick="alert(this.className)">Hi</span>
Be more appropriate? Leaving spaces would probably confuse the user.

02-15-2007, 04:58 AM
I was simply sketching out some ideas for possible inclusion/implementation. I in no way meant for my code to be a substitute for an overall, well thought out approach (which you already had the basics of). However, the bit with the space was to illustrate (as I think you know) that an element may have more than one class name assigned to it and that this might be useful if you are using one class name to determine which items to initialize and another to tell the script which style sheet to switch to when a given element is triggered.

02-15-2007, 11:03 AM
Sorry john if I gave that impression, I was just saying that it may be a little more user-friendly to add the *. Thanks for the suggestion though, much appreciated.