[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 701
  • Last Modified:

How can I change a div tag background color based on a database entry?

I am using PHP to populate a MySQL database with either 'yes', 'maybe', or 'no'.  I want a CSS div tag to change color based on the database entry.  For example:

if 'yes' >> green
if 'maybe' >> yellow
if 'no' >> red

I'm not sure where to start.
0
tprofits
Asked:
tprofits
  • 3
1 Solution
 
kevp75Commented:
Do have existing code... please post it
0
 
tprofitsAuthor Commented:
I have my div tags:
<body>
<div id="weekend_avail">Jon</div>
<div id="weekend_avail">Mike</div>
<div id="weekend_avail">Scott</div>
<div id="weekend_avail">Todd</div>
</body>

I want my CSS background-color to change to #00FF00, #FFFF00, or #FF0000 based on whether the MySQL database is populated with 'yes', 'no', or 'maybe':
<head>
<style type="text/css">
<!--
#weekend_avail {
      width: 300px;
      height: 15px;
      font-size: 12px;
      background-color: #FFFFFF;
}
-->
</style>
</head>
0
 
shobinsunCommented:
Hi,

Use this idea:

<?php
//$row["color"]//from database
if($row["color"]=='yes')
{$color='weekend_avail';}
if($row["color"]=='no')
{$color='weekend_avail1';}
if($row["color"]=='maybe')
{$color='weekend_avail2';}
<body>
<div id="<?php echo $color;?>">Jon</div>
<div id="<?php echo $color;?>">Mike</div>
<div id="<?php echo $color;?>">Scott</div>
<div id="<?php echo $color;?>">Todd</div>
</body>

<head>
<style type="text/css">
<!--
#weekend_avail {
      width: 300px;
      height: 15px;
      font-size: 12px;
      background-color: #00FF00;
      color:#ffEEff
}
#weekend_avail1 {
      width: 300px;
      height: 15px;
      font-size: 12px;
      background-color: #FFFF00;
      color:#ffEEff
}
#weekend_avail2 {
      width: 300px;
      height: 15px;
      font-size: 12px;
      background-color: #FF0000;
      color:#ffEEff
}
-->
?>
0
 
tprofitsAuthor Commented:
Yes. Yes.  That makes sense!  I'll try that out in the morning.
0
 
tprofitsAuthor Commented:
Got me going in the right direction.  Worked nicely.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now