Changing text color with a Javascript snippet

  • 1
  • Question
  • Updated 3 years ago
I'm new to Skuid and can't seem to figure out what I'm doing wrong here.  I'd like to conditionally render the text color of a field based on the field's value.  This is what I have so far:

var field = arguments[0],     value = arguments[1];
    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
    if (value < 0) {
        field.element.css({
             'color': 'rgb(0,128,0)',
        });
    } else if (value > 0) {
        field.element.css({
             'color': 'rgb(255,0,0)'
    });
}

If I change 'color' to 'background-color' the background changes just fine, but I'm trying to change the text color.  Any help would be greatly appreciated.
Photo of Ellen Lichtenberger

Ellen Lichtenberger

  • 110 Points 100 badge 2x thumb

Posted 3 years ago

  • 1
Photo of David Giger

David Giger

  • 1,758 Points 1k badge 2x thumb
The snippet you posted works fine for me. Maybe try and add an important css statement:

  'color': 'rgb(255,0,0) !important

Hope this helps
Photo of Ellen Lichtenberger

Ellen Lichtenberger

  • 110 Points 100 badge 2x thumb
Nope - still not working.  Just to make sure I'm doing this correctly, I have the above code in an inline Javascript snippet and I'm referencing it in a field renderer.
Photo of David Giger

David Giger

  • 1,758 Points 1k badge 2x thumb
Nope,  your doing it right.
Do you append anything else to field.element (divs or spans)?
The only way why this doesn't work for you is that your value is not an integer (try parseInt(value) in the if statement) or there are some more child elements that don't apply the color.
Photo of Ellen Lichtenberger

Ellen Lichtenberger

  • 110 Points 100 badge 2x thumb
How would I reference child elements?
Photo of David Giger

David Giger

  • 1,758 Points 1k badge 2x thumb
field.element is a jquery node,  so nothing fancy from there on (maybe field.element.children().css('color': 'someColor') already works for you).
Its hard to tell though since I don't know the exact setup of your child elements.
Photo of Ellen Lichtenberger

Ellen Lichtenberger

  • 110 Points 100 badge 2x thumb
Thanks for the advice - I'll give it a try.
Photo of Thimo

Thimo

  • 1,280 Points 1k badge 2x thumb
Have you tried removing the object-brackets and seperating the parameters by a comma as it says on the jQuery API Documentation?

Like this:

if (value < 0) { 
        field.element.css(
             'color', 'rgb(0,128,0)'); 
    } else if (value > 0) { 
        field.element.css(
             'color', 'rgb(255,0,0)'); }

See reference here:
http://api.jquery.com/css/
Photo of Ellen Lichtenberger

Ellen Lichtenberger

  • 110 Points 100 badge 2x thumb
Tried it - the page won't load.
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
Good morning, Ellen. Your original snippet is working for me.  What version of Skuid are you running? (not sure if this will help ;)  When the page doesn't load, are there any errors in the browser's developer console?