function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
atallatall 

Automatic Color Change based on a condition

Hi Everyone,

 

I'm using actionpoller in my visual force page to display the time.

ex: You will be logout in another  5:60 minutes

 

Here I'm able to display the text in blue colour using font tag, but I want to display the time in red colour when the above time reaches 0:20 minutes, as my intention is to tell user that he is reaching the time out when he reaches last 20 seconds

 

below is the code, you can copy and paste it directly in ur new page

 

Please help me in this regard

Visual Force Page:

<apex:page controller="Counter">
<apex:form >
<apex:outputText value="You will be logout in another"/>
&nbsp;<font size="5" color="blue"><apex:outputText value="{!Count}:{!Count1}" id="mycounter"/>
</font>&nbsp;minutes
<apex:actionPoller action="{!incrementcounter}" interval="60" reRender="mycounter"/>
<apex:actionPoller action="{!incrementcounter1}" interval="5" reRender="mycounter"/>
</apex:form>
</apex:page>

 

Apex Code:

public class Counter {
Integer Count=5;
Integer Count1=60;
public Pagereference incrementcounter()
{
Count--;
return null;
}
public Pagereference incrementcounter1()
{
Count1=Count1-5;
if(Count1==0)
{
Count1=60;
}
return null;
}
public Integer getCount()
{
return Count;
}
public Integer getCount1()
{
return Count1;
}
}

 

Best Answer chosen by Admin (Salesforce Developers) 
Navatar_DbSupNavatar_DbSup

Hi,

Try the below code snippet as reference:

 

<apex:page controller="Counter">

<apex:form >

<apex:outputText value="You will be logout in another"/>

&nbsp;<font size="5"><apex:outputText style="{!IF((Count==0 && Count1<=20),'color:red','color:blue')}" value="{!Count}:{!Count1}" id="mycounter"/>

</font>&nbsp;minutes

<apex:actionPoller action="{!incrementcounter}" interval="5" reRender="mycounter"/>

<apex:actionPoller action="{!incrementcounter1}" interval="5" reRender="mycounter"/>

</apex:form>

</apex:page>

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.