Detect stylesheet change and access alternate CSS

@A_WebdeveloperOct 11.2008

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.

to post a comment

JavaScript

13 Comments(s) _↴

@KorOct 11.2008 — #
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.[/QUOTE]

Bad choice. Your site should support [I]all[/I] the browsers. I don't love IE. I don't [I]love[/I] any browser particularly, even I do [I]appreciate[/I] 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: [B]A Webdeveloper[/B] is not proper at all. If you don't care about the users, you should have named [B]A Bad Webdeveloper[/B]:rolleyes:

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_WebdeveloperauthorOct 11.2008 — #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?

@KorOct 11.2008 — #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_WebdeveloperauthorOct 11.2008 — #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 [I]just[/I] Javascript.

@A_WebdeveloperauthorOct 12.2008 — #Anyone?

@ScriptageOct 12.2008 — #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_WebdeveloperauthorOct 12.2008 — #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.[/QUOTE]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.

@ScriptageOct 12.2008 — #There's an article on alternate stylesheets and Javascript here: http://www.alistapart.com/stories/alternate/

Regards

Carl

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

@A_WebdeveloperauthorOct 12.2008 — #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?

@NatdizzleOct 12.2008 — #I just use css conditional statements when I need to use different style sheets

@A_WebdeveloperauthorOct 13.2008 — #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.

@ScriptageOct 13.2008 — #This will do it from a link:

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

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

[code=php]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;
 }
 [/code]

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

[code=php]
 
 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;
 
 [/code]

Regards

Carl

Also in #JavaScript _↴

Timing Delay Between Two Actions Send Page By Email Lattitude and Longitude using GMaps

Success!

Help @A_Webdeveloper spread the word by sharing this article on Twitter...

Tweet This

Detect stylesheet change and access alternate CSS

13 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Detect stylesheet change and access alternate CSS

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴