Last week, I learned how to write jQuery plugins. So this week, I wrote one for y’all to enjoy! Remember that article about Playground & selecting/using a random color from a given list of options? Well I’ve now made it easier for you to use and input options. YAY.
The plugin defaults to using the colors on my website and changing the “color” property of the element you’re calling it on, but you can insert your own color choices and change any element that takes a color value in its argument (i.e. fill, background, border-color, etc.)
Basically, its just a fun, simple plugin for indecisive people who want to have a little bit of control. All you have to do is:
- Download this plugin
- Link to jQuery
- Link to the plugin location in your code
- Choose which element you want to color and attach it with.colourify()!
Here’s an example of its use:
$('h1').colourify({
colors: ['#4eb19d','#f32047','#02f7c6', '#bab8ef'],
property: 'background'
});
For a better understanding of the core function happening in there, and more control over the variable changing, see this blog post (I apologize for that code being a bit of a mess — I’ve improved significantly since I started interning at Viget a few weeks ago)
A Note on Colourify
The plugin takes two arguments: an element and options. The element we pass in when we instantiate the plugin is “this”, aka the thing on which we are calling this plugin. For example, if we called $(‘.groovy’).colourify(), anything with a class of ‘groovy’ would be ‘this’ (odd word choice, I know).
Anyway, the plugin then looks at the provided (or default) list of colors, chooses one at random, and changes the provided property (or color by default) based on a random choice from the list.
I just really made this for practice and for fun :)
TL;DR: COLOURIFY ALL THE THINGS!