Detect stylesheet change and access alternate CSS

[A Webdeveloper]

I have a website with one main stylesheet (which is always loaded) and six alternate stylesheets of which one of them could be loaded on top of the main stylesheet.


How can I run Javascript when the stylesheet is changed using the menu of the browser? (So for instance after clicking on View, Page style, etc. in Mozilla Firefox)


And how can I access alternate stylesheets in Javascript?
I can use
document.styleSheets[0]
to access the main stylesheet, but I can't access the alternate stylesheets that way. I want to dynamically change and add (insertRule) some CSS into one of my alternate stylesheets, so that's why I need access to it.


My site doesn't support Internet Explorer, so I don't care if it works in IE or not: it's fine as long as it works in the latest versions of Mozilla Firefox, Google Chrome, Apple Safari and Opera.

[Kor]

My site doesn't support Internet Explorer, so I don't care if it works in IE or not: it's fine as long as it works in the latest versions of Mozilla Firefox, Google Chrome, Apple Safari and Opera.

Bad choice. Your site should support all the browsers. I don't love IE. I don't love any browser particularly, even I do appreciate some of them. A browser should be just a tool. But so far IE has abut 60% of the browsers' users market, so you can not afford to ignore IE. If so, your name: A Webdeveloper is not proper at all. If you don't care about the users, you should have named A Bad Webdeveloper

Now, your problem: Changing stylesheet according to the user choice is usually made via a server-side language include, based on the user/password controlled session +- a cookie remainder set.

[A Webdeveloper]

I do use a cookie, but I do everything client-side with Javascript and the build-in stylesheet switcher.

How can I do what I want (see startpost) client-side?

[Kor]

Use the cookie to keep only user/password (if the user allows that, same with this forum does.)

The simpler way could be:
Create several different css files, say for red/blue/green/magenta variation of aspect/desig of the document. After the user log in first time (or whenever afterward), he may chose a variant. When doing that, he submits his preferences to the DB which via a server-side application (php, asp...), will reload the page(s) (and keep it so the whole global session) using the includes with the chosen css file.

[A Webdeveloper]

I don't have nor need user/password/database or a server-side at all.

I want to know how I can do it in just Javascript.

[A Webdeveloper]

Anyone?

[Scriptage]

Switching the stylesheet doesn't fire an event so you will have to manually check for it by setting a timeout(perhaps every second) and checking against the source of the stylesheet.

[A Webdeveloper]

Switching the stylesheet doesn't fire an event so you will have to manually check for it by setting a timeout(perhaps every second) and checking against the source of the stylesheet.

Thank you for your reply. Since it doesn't fire an event I won't do it that way.

And do you know how can I access alternate stylesheets in Javascript?
I can use
document.styleSheets[0]
to access the main stylesheet, but as far as I know I can't access the alternate stylesheets that way. I want to dynamically change and add (insertRule) some CSS into one of my alternate stylesheets and not the main stylesheet, so that's why I need access to it.

[Scriptage]

There's an article on alternate stylesheets and Javascript here: http://www.alistapart.com/stories/alternate/

Regards

Carl

[A Webdeveloper]

I know, but how to access an alternate stylesheet itself (not switching between different alternate stylesheets) is not in it.

[A Webdeveloper]

I have an element of which "position: fixed" is defined in an alternate stylesheet. OnClick (with Javascript) I want this to change to "position: absolute". How can I do that?

[Natdizzle]

I just use css conditional statements when I need to use different style sheets

[A Webdeveloper]

I want my visitors to remove the fixed positioned element (to "position: absolute") by clicking on something, I don't think you can do that with css conditional statements.

[Scriptage]

This will do it from a link:

<a href="#" onclick="javascript:document.getElementById('myDiv').style.position = 'absolute';">Position absolute</a> 

If you read the article on A List Apart it shows you how to get the active stylesheet:

function getActiveStyleSheet() {
var i, a;
 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
  if(a.getAttribute("rel").indexOf("style") != -1
  && a.getAttribute("title")
  && !a.disabled) return a.getAttribute("title");
  }
  return null;
} 

You could set a timeout to check this function every second to see if the stylesheet has been changed (as I originally stated):

var activeStyleSheet;

function checkStyleSheet(){

var styleSheet = getActiveStyleSheet();

   if(styleSheet != activeStyleSheet){

      switch(styleSheet){

      case "Style3":

      document.getElementById("someElement").style.position = "absolute";

      break;

      case "Style2":

      document.getElementById("someElement").style.position = "relative";

      break;

      default:


      // Do something else

     }

  activeStyleSheet = styleSheet;

  }

setTimeout("checkStyleSheet()", 1000);

}

onload = checkStyleSheet; 

Regards

Carl