function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Durai SaravananDurai Saravanan 

background color of a div, based on if statement

Hi,

Good day!

I have a integer variable 'c_status ' in my controller. And in my visualforce page, the backrgound color of a particular div must be based on the value of 'c_status '., like,
if 'c_status ' == 1 , my background color must be green
else if  'c_status ' == 2, my background color must be yellow
else if  'c_status ' == 3, my background color must be red

How should i do that?

My visualforce page :  
<apex:page controller="Monthly_review_VFC" action="{!execute}" sidebar="false" >
 <head>
  <style type="text/css" media="screen">
    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }   
  </style>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body style="overflow:auto">
  <h1>Monthly Review:</h1>
  <br/>
  Click on the particular account to get their performance in last month
  <br/><br/>
  <apex:form>
      <div class="container">
      <div class="well" style = "background-color:black; color: white; margin-right: 100px;" >Arthur J. Gallagher &amp; Co.<br/>
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div> 
      <div class="well" >RPX Corporation<br/> <!-- The condition should be for this tag -->
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div>
      <div class="well">CredHub<br/>
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div>
      <div class="well">Valet Living<br/>
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div>
      <div class="well">Healthy Paws Pet Insurance<br/>
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div>
     </div>
  </apex:form> 
 </body>
</apex:page>
My Controller:
  
public class Monthly_review_VFC { 

    Integer c_status {get; set;}
            public void execute() {
            Integer c_status = 1;
          }
}

Please suggest me some ideas on this. 

Thanks in advance,
Durairaj
Raj VakatiRaj Vakati
Try like this
  
<apex:page controller="Monthly_review_VFC" action="{!execute}" sidebar="false" >
 <head>
  <style type="text/css" media="screen">
    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }   
	.red{
	}
	.green{
	}
	.blue{
		
	}
  </style>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body style="overflow:auto">
  <h1>Monthly Review:</h1>
  <br/>
  Click on the particular account to get their performance in last month
  <br/><br/>
  <apex:form>
      <div class="container">
      <div class="well"  style="{!IF(c_status   == 1,'red', IF(c_status == '2',green, blue))}" >Arthur J. Gallagher &amp; Co.<br/>
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div> 
      <div class="well" >RPX Corporation<br/><b> <!-- The condition should be for this tag --></b>
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div>
      <div class="well">CredHub<br/>
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div>
      <div class="well">Valet Living<br/>
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div>
      <div class="well">Healthy Paws Pet Insurance<br/>
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div>
     </div>
  </apex:form> 
 </body>
</apex:page>

 
Durai SaravananDurai Saravanan
Hi Raj,

I tried your solution, but am getting this error


User-added image

Thanks,
Durairaj
Raj VakatiRaj Vakati
Try this
  
<apex:page controller="Monthly_review_VFC" action="{!execute}" sidebar="false" >
 <head>
  <style type="text/css" media="screen">
    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }   
	.red{
	}
	.green{
	}
	.blue{
		
	}
  </style>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body style="overflow:auto">
  <h1>Monthly Review:</h1>
  <br/>
  Click on the particular account to get their performance in last month
  <br/><br/>
  <apex:form>
      <div class="container">
      <div class="well"  style="{!IF(c_status   = 1,'red', IF(c_status = 2,green, blue))}" >Arthur J. Gallagher &amp; Co.<br/>
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div> 
      <div class="well" >RPX Corporation<br/><b> <!-- The condition should be for this tag --></b>
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div>
      <div class="well">CredHub<br/>
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div>
      <div class="well">Valet Living<br/>
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div>
      <div class="well">Healthy Paws Pet Insurance<br/>
      <apex:commandButton Value="Gantt Chart" action="/apex/Gantt_Chart"/>
      </div>
     </div>
  </apex:form> 
 </body>
</apex:page>