Thu, 20 Feb 2014

Fun With Javascript, Prototypes and Dynamic Colors in CSS

For a work project, we needed to build a UI that displays a few names, and each name needs to display a slightly different color. In the process it presented itself as a way to exercise using Javascript prototypes to override the default Bootstrap button colors.

In the event it comes in handy for someone looking to rotate through button colors, I thought I'd offer it here.

Also note that the buttons draw darker versions of their button colors for their borders. This utilizes a neat function I stumbled across on stack overflow by "Pimp Trizkit".

Name/Blog: Khan
Comment/Excerpt: If you have more buttons than I have colors, you could check this.colors.length and if it's 0, you could reset this.colors to the full list again, or rather than shifting the values, you could increment an index and reset it to 0 once you reach colors.length...

Khan Klatt

Khan Klatt's photo