SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Class Red to be added before Class Green or Yellow

    I am trying to color code our work flow. Red is a customer that has not been serviced in 2 weeks. Yellow is a new ticket that has just been opened, but not assigned to an employee yet. Green is for a customer that has been assigned to an employee and is ready for work to begin. Yellow and Green are both defined in the database. Red class is set dynamically with javascript based on 2 weeks from last service date. The problem is that Red is over writing Yellow and Green. I need to make sure the red class is set before them rather than after. Any suggestions.


    Code:
    <h6 id="27" class="red yellow ui-accordion-header ></span>
    11111			
    $142.00</h6>
    as opposed to
    Code:
    <h6 id="27" class="yellow ui-accordion-header red></span>
    11111			
    $142.00</h6>

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The order of the class names in the class attribute is irrelevant - all orders are equivalent.

    It is the order that the classes are defined in the style sheet that is what determines which take precedence when they provide conflicting styles.

    So to get yellow to not be overridden by red you need to remove the red class when it comes after yellow in the class list.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TurtleWolf View Post
    Red class is set dynamically with javascript ...
    In that case, an alternative to adding in a class name would instead be to insert an inline style, which will override styles in the style sheet. E.g.

    Code:
    <h6 id="27" class="yellow ui-accordion-header style="color: red;">

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    As was said before, the order in the attribute will have NO EFFECT, however you did have a TYPO ( forgetting to close the quotes).

    As raplh suggested, adding the inline style attr (color will override any and all classes.

    ALTERNATIVELY, since you said you were using JS anyway, you could TOGGLE the color class with JS so that only RED|YELLOW|GREEN is ever present at any given point. That would probably be the cleanest way to do it .

    this is one of my scripts I use to toggle classes:
    Code:
    		function toggle(obj, c){
    			oc=' '+obj.togs.className+' ';
    			ocInd=oc.indexOf(' '+c+' ');
    			if (ocInd>-1){
    				oc=oc.replace(' '+c+' ','');
    				obj.togs.className=oc.replace(/^\s\s*/, '').replace(/\s\s*$/, '')
    			}
    			else{obj.togs.className=obj.togs.className+' '+c;}
    		}
    I think now we crossed in the JS forum territory.

    oh, incidentally as long as we are doing things properly your class names shouldnt really be named after color but semantic meanings; it will save a lot of headaches in the long run. consider using .urgent, .viewed, and .new as opposed to .red, .yellow, and .green


Bookmarks

Posting Permissions

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