Stylesheet Switcher - Part 3: Revenge Of IE

Posted on Wednesday, August 30th, 2006

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!

If you enjoyed this post, why not subscribe to Unintentionally Blank

Posted in Accessibility, Browsers, CSS, Javascript, The DOM | Trackback | Leave a comment


Comments

  1. Pingback by Stylesheet Switcher - Part 2 :: Unintentionally Blank
    August 30th, 2006 at 1:23 pm

  2. 1August 30th, 2006 at 1:51 pm

    Yvonne Says:

    Let’s hold hands and burn down Microsoft together :)


  3. 2August 30th, 2006 at 2:37 pm

    Phil Says:

    Will do Yvonne, right after I finish banging my head against my desk for not testing a piece of code in the most popular, least useful browser in the world.


  4. Pingback by High Contrast Design :: Unintentionally Blank
    September 1st, 2006 at 4:46 pm

  5. 3January 16th, 2007 at 10:09 pm

    mike Says:

    Awesome! I was tackling this very same problem recently, wondering what the heck was wrong with IE. I sure am glad you found a solution, keep up the good work.


  6. 4January 17th, 2007 at 2:18 pm

    Phil Says:

    Hi Mike, thanks for dropping by!

    Glad I could be of service, I hope to have other fascinating examples of Internet Explorer’s inability to understand basic commands soon! (Or at least more things that work in IE anyway)


  7. 5March 25th, 2007 at 8:04 pm

    James Says:

    Beware, you can’t put the < script > tag inside a div or a span tag, or IE chokes. Don’t we all just love that big blue “E”?


  8. 6March 25th, 2007 at 8:21 pm

    Phil Says:

    Hi James, thanks for your comment. What do you mean though? Is that with this script only or a wider problem? For instance, the adsense ads on this site are script elements and reside firmly within several divs and display fine.

    Hope you can help me out.


  9. Pingback by Ways to build Style Sheet Switcher for your own web site at Witty Sparks
    July 8th, 2007 at 3:40 pm

  10. 7July 24th, 2007 at 2:44 pm

    FLe Says:

    Good work, IE flaws are so numerous… they seem to be endlessly!


  11. 8December 19th, 2007 at 9:43 pm

    صور Says:

    thank you for this article


  12. 9January 29th, 2008 at 6:56 pm

    Hanm Says:

    Hi!

    I think this script is awesome!
    On my Site, I’d like to use it in a Frameset.
    Now I’m wondering at which Part I should enter a “parent.frames[1].document.reload”.
    Could You explain at which part of the script the site is being reloaded?

    Many Thanks


  13. 10January 30th, 2008 at 11:12 pm

    Phil Says:

    Hanm,

    Thanks for your comments! I don’t quite understand though, there is no need to reload the page. Have a look at the example and you should see that the page doesn’t reload.

    I haven’t tried this with frames either, but I will email you to help out and make sure this works for you.


  14. 11February 18th, 2008 at 10:16 pm

    Mark Says:

    Hi, great work!! I was trying to accomplish this and found your script. You’ve made a much better go of it than my poor attempt. Is it possible to have a global.css that gets ignored by the drop down, but contains styles common to all pages?


  15. 12February 19th, 2008 at 9:51 pm

    Phil Says:

    Hi Mark,

    Thanks very much! I’m glad you found it could help!

    I’m afraid with the script in it’s current stage, there is no option for a global CSS. It could be done though. You could title your global style sheet with “global” for example and then modify getStyleSheets() to ignore any with the title “global”. Or, perhaps better, you could modify the same function to ignore any <link> element without a title, then any style sheets you want to be global should be left without a title.

    Drop me an email if you want to discuss this further.


  16. 13February 20th, 2008 at 12:43 am

    SneakyWho_am_i Says:

    50% of what I want to do fails in Virus Explorer and I will wipe it from the face of the Earth with great vengeance and furious anger.


  17. Pingback by bdITjobs.com : : Blog » Blog Archive » Ways to build Style Sheet Switcher for your own web site
    May 27th, 2008 at 7:04 pm

  18. 14July 12th, 2008 at 5:27 pm

    chiraL Says:

    Enjoy the code, and it has found a very usefull home with a project I was working on. The only issue I have is with the lack of formatting and embedding that can be done on the following code:

    ”

    ”

    It is not possible to center, align, or embed in a table, layer or other wise, in order to change the location on the page. I would be very interested in being able to manipulate the location of the drop down.


  19. 15July 13th, 2008 at 9:50 am

    Phil Says:

    Hi chiraL,

    I’m afraid your comment got eaten by the WordPress comment system (I wonder if there is a plugin to stop that happening).

    Could you try to post again, or email me the details at phil at this domain.

    Thanks


  20. 16July 16th, 2008 at 7:27 pm

    chiraL Says:

    The bit of code that was snipped was the body insertion code for the actualy drop down box. The issue I am having is I would like to change its location on the page via embedding it in something like a table or div to give it a precise location. So far the only thing I have been able to figure out on alignment are to give it a text alignment attribute in the controlling CSS i have written so that I can align it left, center, or right.

    I’m a novice HTML coder, so maybe I’m just missing something?


  21. 17July 22nd, 2008 at 10:25 pm

    Phil Says:

    ChiraL, where ever you place the JavaScript on the page is where the dropdown box should appear. (This is actually not a good solution and one I plan to rewrite in the future, but it’s what we’ve got for now!).

    The rest of the styling of the box should be done with CSS, as you say.

    If you are having problems, please drop me an email or another comment, preferably with a link to an example and I will do my best to help you out.


Leave a Comment