www.webdeveloper.com
Results 1 to 14 of 14

Thread: Detect stylesheet change and access alternate CSS

  1. #1
    Join Date
    Oct 2008
    Posts
    14

    Question Detect stylesheet change and access alternate CSS

    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.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by A Webdeveloper View Post
    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.

  3. #3
    Join Date
    Oct 2008
    Posts
    14
    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?

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.

  5. #5
    Join Date
    Oct 2008
    Posts
    14
    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.

  6. #6
    Join Date
    Oct 2008
    Posts
    14
    Anyone?

  7. #7
    Join Date
    Nov 2002
    Location
    England
    Posts
    693
    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.

  8. #8
    Join Date
    Oct 2008
    Posts
    14

    Lightbulb

    Quote Originally Posted by Scriptage View Post
    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.

  9. #9
    Join Date
    Nov 2002
    Location
    England
    Posts
    693
    There's an article on alternate stylesheets and Javascript here: http://www.alistapart.com/stories/alternate/

    Regards

    Carl

  10. #10
    Join Date
    Oct 2008
    Posts
    14
    I know, but how to access an alternate stylesheet itself (not switching between different alternate stylesheets) is not in it.

  11. #11
    Join Date
    Oct 2008
    Posts
    14
    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?

  12. #12
    Join Date
    Sep 2008
    Location
    Old North Sacramento
    Posts
    80

    Thumbs up

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

  13. #13
    Join Date
    Oct 2008
    Posts
    14
    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.

  14. #14
    Join Date
    Nov 2002
    Location
    England
    Posts
    693
    This will do it from a link:

    PHP Code:
    <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:

    PHP Code:
    function getActiveStyleSheet() {
    var 
    ia;
     for(
    i=0; (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):

    PHP Code:

    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
    Last edited by Scriptage; 10-13-2008 at 09:21 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles