Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Style switcher with conflicting javaScripts

    Hello,
    I use javaScript to make a pull-down menu CSS style switcher. It works fine. On a few pages I use a separate script to highlight odd rows of tables. This works fine with default CSS, but conflicts with my "title='large'" style sheet. It also overrides this style sheet. How can I block the one script if the "large"style sheet is active? Or at least have the alternate style sheet override the one javaScript?
    Greetings,
    romkebomke

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    725
    Thanks
    35
    Thanked 132 Times in 123 Posts
    change the className for highlighted rows instead of
    directly changing inline style properties

  • #3
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mrhoo View Post
    change the className for highlighted rows instead of
    directly changing inline style properties
    Thanks,
    But the rows are highlighted by a script that does not use a className (so there's nothhing to change, only to add):

    Code:
    function stripeTables() {
      if(!document.getElementsByTagName) return false;
      var tables = document.getElementsByTagName("table");
      for (var i=0; i<tables.length; i++) {
        var odd = false;
        var rows = tables[i].getElementsByTagName("tr");
        for (var j=0; j<rows.length; j++) {
          if (odd == true) {
            rows[j].style.backgroundColor = "#eef";
            odd = false;
          } else {
            odd = true;
          }
        }
      }
    }
    addLoadEvent(stripeTables);
    Would adding a className to this or another script override this script then?
    -romkebomke

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    He meant to use a CSS class instead of the style attribute to alter the document style, since inline CSS (style attribute) will override CSS that is embedded in (style element) or external to (link element or @import at-rule) the document. The line of code element.style.backgroundColor&#160;=&#160;"#eef" is identical to <element&#160;style="background-color:&#160;#eef;">.

    To use a CSS class, you would create a class in your style sheet and assign or remove that class to or from an element with className, setAttribute, or removeAttribute. If you place that class above the rules that you donít want to override, then it will not override them. Alternatively, you can simply use the !important rule to set the priority of certain declarations so that they arenít overridden by declarations that appear later in the style sheet.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks,
    You nudged me in the right direction. It works.


  •  

    Posting Permissions

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