CSS Style Switcher Disabled In Safari 5.1

I have this jQuery based CSS style switcher in my webpage. When I updated the browser to Safari 5.1 this script stopped working. I looked around and saw this apple discussion page

Solution 1:

Found a link to a jQuery script that works with Safari 5.

http://electrokami.com/coding/jquery-style-sheet-switcher-with-preview/

Solution 2:

I just ran into the same problem. My guess was Safari didn't like disabling the <link> tags to the stylesheets, so I modified the code a little.

Now it will only use one <link> tag and replace the href attribute based on the rel attribute of whatever you click on:

(function($)
{
  $(document).ready(function() {
    $('.styleswitch').click(function() {
      switchStylestyle(this.getAttribute("rel"));
      return false;
    });
    var c = readCookie('style');
    if (c) switchStylestyle(c);
  });

  function switchStylestyle(styleName)
  {
    linktag = $('link[rel*=style][title=theme]');
    linktag.attr('href', styleName);
    createCookie('style', styleName, 365);
  }
})(jQuery);

To use it now, you need to put a <link> tag in with the title "theme" that points to your default theme:

<link rel="stylesheet" type="text/css" title="theme" href="light.css"/>

When you click a link that has the "styleswitch" class, it will set the "theme" <link>'s href attribute to be whatever the "rel" attribute of the <a> tag that was clicked:

<a href="#" rel="dark.css" class="styleswitch">Switch to dark stylesheet</a>

Solution 3:

After searching SO and the web, I was not happy with any of the solutions. So I came up with a new solution which is working in chrome, ff, ie and safari and safari on an old ipad:

First set styles:

<link rel="stylesheet"              href="./codebase/touchui.css"       data-title="default"        type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/ios.css"           data-title="ios"                type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/jq.css"            data-title="jq"                 type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/sky.css"           data-title="sky"                type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/green.css"         data-title="green"          type="text/css" media="screen" charset="utf-8">

Notice the attribute "data-title" this is a user-defined attribute.

Then use this function to change the style sheet, (note that I have it set in the app scope, you can make it a standard function:

app = {}

app.styleSet=function(title) {
  var i, a
  var o;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) 
    if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute('data-title') ) {
      if (a.getAttribute('data-title') == title) 
        o = a

      a.setAttribute("rel", "alternate stylesheet");          // the order here is important
      a.disabled = true
      a.setAttribute("title", a.getAttribute('data-title'));
  }

  o.setAttribute("title", undefined);                         // the order here is important
  o.disabled = false
  o.setAttribute("rel", "stylesheet"); 
  //app.cookieCreate("style", title, 365);
}