Hi. I want the users to be able to change design of the site by the click of a button. This code works perfect in chrome, but not in firefox or IE.

                        <li><a href="javascript:refresh()" rel="css/master.css">Black and Grey</a></li>
                        <li><a href="javascript:refresh()" rel="css/master2.css">Blue and White</a></li>
                        <li><a href="javascript:refresh()" rel="css/master3.css">All blue</a></li>
  • Can you list the refresh() function also? danwellman over 6 years ago

2 answers

0
points

Check this guide on alternate stylesheets using Javascript. Basically, you need to declare a number of alternative stylesheets on the document head.

<link rel="stylesheet" type="text/css" title="Default"  href="css/master.css">
<link rel="alternate stylesheet" type="text/css" title="White"  href="css/master2.css">
<link rel="alternate stylesheet" type="text/css" title="Blue"  href="css/master3.css">

Then, when you are ready to change stylesheets, disable the stylesheet in use by setting the <link>'s DOM property disabled to true, and set it false for the stylesheet you want. The example code is in the link above.

However, this approach will preload all stylesheets, even those that will never be used. If you rather have them loaded on demand, you can create <link> elements on the fly. Something like:

var requestedStylesheetExist = false;
var ltag = document.getElementsByTagName("link");
for (var i = 0; i < ll.length; ll++) {
  if ((link_tag[i].rel.indexOf("stylesheet") != -1) && link_tag[i].title) {
    link_tag[i].disabled = true;
    if (link_tag[i].title == requestedSheet) {
      link_tag[i].disabled = false;
      requestedStylesheetExist = true;
    }
  }
}
if (!requestedStylesheetExist) {
  var ss = document.createElement("link");
  ss.rel = "alternate stylesheet";
  ss.type = "text/css";
  ss.title = "blue";
  ss.href = "css/master3.css";
  document.head.appendChild(ss);
  ss.disabled = false;
}
Answered over 6 years ago by Ahmad Syukri
ganjan 0
0
points
<script language="JavaScript">
<!--

var sURL = unescape(window.location.pathname);

function doLoad()
{
    // the timeout value should be the same as in the "refresh" meta-tag
    setTimeout( "refresh()", 2*1000 );
}

function refresh()
{
    //  This version of the refresh function will cause a new
    //  entry in the visitor's history.  It is provided for
    //  those browsers that only support JavaScript 1.0.
    //
    window.location.href = sURL;
}
//-->
</script>
Answered over 6 years ago by ganjan