colorsocks.js

A tiny Javascript helper for alternating color strings on the web

Your attitude is like a box of crayons that color your world. Constantly color your picture gray, and your picture will always be bleak. Try adding some bright colors to the picture by including humor, and your picture begins to lighten up.
-- Allen Klein

See colorsocks.js in a DEMO. Try reloading a bit for fun :)

Get

If you have bower installed (if you don't, you probably want to but just haven't heard about it yet), run

$ bower install colorsocks.js

Otherwise you can download either colorsocks.js or the minfied colorsocks.min.js. Just click. Or look in the dist/ subfolder.

Use

colorsocks.js attaches itself to the window as window.colorsocks and exposes a single function:

colorsocks.paint(elementId, colorsArray, text)

elementId   : required, the id of the html element that should get colorized
colorsArray : required, an array of colors in HTML notation to apply to the string,
              eg. ['#f5dd1b', '#20d0e8', '#ea3487', '#96294d']
text        : optional, the text to fill the element with. If omitted, colorsocks 
              will use the element's existing innerText as the source string.

N.B. The DOM element that should have some more color applied to it should exist before colorsocks.paint() is called, so hook into either window.onload or $( document ).ready() for jQuery.

A full example can be found in the example/ subfolder in this repository.

Colophon & License

Custom webfonts are generated by the open source Fontello project, and are covered by the SIL Open Font License.

Other parts of colorsocks.js are covered by the MIT License. Enjoy!