I was just running through my examples yesterday evening, checking they work in IE7 when to my horror my stylesheet switcher failed miserably. I ran to IE6 to see if I had overlooked the problem for IE in general and it turned out that I had. I guess that since the majority of visitors to this site use Firefox (in which the function works perfectly) no-one else had noticed either. The strange thing was that it was only the final version that didn't work, the first version, using just links rather than the dropdown box, did work. This means that the stylesheet switching function was working fine and there was a problem with the dropdown box.

What Was Wrong?

Frustratingly enough, the onChange event didn't seem to be firing when I used the dropdown box. So I headed back to the code to find the problem. Turns out that IE, in all it's wisdom, doesn't consider onChange an attribute that you can set with the standard setAttribute function (unlike all other browsers).

drop.setAttribute("onChange", »
"setStyleSheet(this.options[this.selectedIndex].value)")

Instead, you need to set the onChange like so:

drop.onchange = function() »
{ setStyleSheet(this.options[this.selectedIndex].value) };

(Non line breaks signified by »)

Fixed!

Simple, but it worked. So the really finished article is available to view and download.

I did add a couple of other changes to the final product for accessibility reasons. I gave the dropdown box a label to signify what it did and provided the form with a title to explain it's use when moused over. If you want to style your label and dropdown box, the form has been given an id of "linkBox". So styling the dropdown box is as easy as setting up your CSS as so:

#linkBox select {
  dropdown box styles...
  }
#linkBox label {
  label styles...
  }

I hope you find a use for this piece of code, I will be as soon as I get round to creating a second design for this site!