ansaurus

Question

Changing DIV color in CSS depending on database results?

Answer 1

A:

You can use many classes for html elements so just the "color" class need to be changed. To do this inline class is the best solution.

<element class="thing red" />

element.thing { general rules }

.red { color:red; }

MatTheCat 2010-10-07 09:22:26

Right, but in this case there will only be one boolean active (TRUE). There will never be more than one boolean marked as TRUE and my database structure has reflected that. The "else" is there just in case but won't be needed since all the variables are accounted for but I put it there just in case. I know I can use many classes but I thought there might be a better way since using a lot of classes with the same CSS rules seemed way too redundant. I was hoping there'd be a better solution than semi-redundant CSS classes.

Tek 2010-10-07 09:25:47

I've edited sorry. But you can stock many booleans in an integer =P I often use many classes for my elements but I try to avoid redondant rules.

MatTheCat 2010-10-07 09:27:34

After reading your example what you said made more sense. Hmm. I will try this. Thanks for your suggestion, I'll come back and let you know the results.

Tek 2010-10-07 09:27:43

Answer 2

+1 A:

Why not do

div.content {
    border-style:solid;
    border-width:2px;
    border-color: #000;
    margin: 10px 0px;
}

and then add an additional class to the div depending on the db result, e.g.

<div class="content <?php echo getContentClass($row) ?>"> ... </div>

where getContentClass() is a helper function that translates these boolean values into meaningful CSS classes instead of the concrete color values.

function getContentClass(array $row)
{
    return implode(' ', array_intersect_key(
        array(
            'db_boolean_var1' => 'state1',
            'db_boolean_var2' => 'state2',
            'db_boolean_var3' => 'state3',
            'db_boolean_var4' => 'state4'
        ),
        array_filter($row)
    ));
}

Then just add those CSS classes to your regular stylesheet, e.g.

div.state1 { background-color: red; color: inherit }

This way, everything is cleanly separated and you dont have to resort to inline styles.

Edit: please note that class names like shown above are not meaningful. Nor are classnames like red or black meaningful because they are presentation related. Try to make them content related, e.g. something like invalid, error, paid, free, active and so on.

Gordon 2010-10-07 09:24:18

Thanks for your suggestion! I'll try to see which one of these suggestions works for me best. I'll come back whenever I'm done testing!

Tek 2010-10-07 09:37:44

Tek 2010-10-07 10:14:45

ansaurus

tags:

views:

answers:

Changing DIV color in CSS depending on database results?

related questions