Page 1 of 1
Button color based on query value
Posted: 2022-07-22 03:10
by sacgtdev
How to code the button color so that the button color based on certain conditional value?
eg. if query_value >0, then color = green, otherwise, red.
Button is currently generated using jquery.
Re: Button color based on query value
Posted: 2022-07-22 05:48
by jsetzer
Assuming you have created a button using jQuery and already set the Bootstrap classes
btn btn-default (and perhaps
btn-md |
btn-lg), stored in variable
YOURBUTTON:
Code: Select all
YOURBUTTON.removeClass('.btn-default').addClass('btn-success');
Or
Code: Select all
YOURBUTTON.removeClass('.btn-default').addClass('btn-danger');
Depending on the selected Bootstrap theme, *-success will give the theme-wide-defined color for success messages and *-danger for error messages. Using those Bootstrap theme defined, side-wide classes is recommended for best user-recognition.
---
If you want different colors (not recommended), instead of replacing
btn-default class by
btn-danger/btn-success use something like ...
Code: Select all
YOURBUTTON.css('background-color', 'green !important');
---
Tip
Always remember that 8% of male users are color blind (and only very few females), most of them red-green. Those guys will barely see differences between red and green buttons, but just gray or gray. I recommend putting a different icon and caption, additionally, for best possible user guidance.