Forgot your password?

Home > About Us > Modern Signal Blog >Colorify: A Simple jQuery Plugin

Colorify: A Simple jQuery Plugin

I recently created a fun little weekend project (well, an MLK Day project to be more specific).  It's a simple survey to query users about what colors come to mind when they think about abstract ideas.  It's called What Color Is...?  The original motivation behind the site was to come up with an idea for my daughter's science fair project.  She sees letters and numbers as colors (something called grapheme-color synesthesia).  I came up with the idea to devise a simple test to see what colors, if any, most people see when they think about an abstract idea.  From there I naturally began thinking about how it could be turned into a slick online survey.  It was an interesting little project that had a number of minor technical challenges along the way.

A Touch of Eye-candy: Colorify jQuery Plugin

For the design of the site, I chose a basic gray jQuery UI theme (Smoothness).  I did this so as to not distract from the main point of the survey by putting too much color into the surrounding UI.  I did feel like adding a little bit of fun color into the UI though.  I decided that when I would put in some multicolored text in the page titles.  To achieve this, I ended up creating a simple jQuery plugin that takes any element and assigns a string of random colors to the letters in the text.  I called it "colorify":

(function($){
    $.fn.colorify = function(){
        var cify = function(s){
            var rgb = function(){
                var i = Math.floor(Math.random() * 3);
                var r = function(n){
                    return n == i ? 0 : Math.floor(Math.random() * 256);
                }
                return "rgb(" + r(0) + "," + r(1) + "," + r(2) + ")";
            }
            var s2 = "";
            for (var i = 0; i < s.length; i++) {
                s2 += "<span style=\"color:" + rgb() + ";\">" + s.substr(i, 1) + "</span>";
            }
            return s2;
        }
        this.html(cify(this.html()));
    };
})(jQuery);

This goes through each letter in the text, gets a random RGB value and assigns it to the letter by wrapping a span tag with a style parameter around the letter.  It's used like any simple jQuery plugin:

$("#wcititle").colorify();

Which creates colored text like this:

What Color Is...?

One interesting thing about this is that my first attempt at the function resulted in some colors that were just too light to show up well on a white background.  That's an obvious problem when getting completely random colors.  The solution I found was to randomly choose one of the 3 color components (R, G, or B) and set that to 0 (full saturation).  This preserves the generation of bright colors without making them too light.

I wouldn't call this a very useful plugin -- I'll probably never use it for another project.  But it was kind of fun to write.  Check it out in action at What Color Is...?

Testimonials

  • Modern Signal has been a great partner for us for over the past 10 years.  As our business grew and our needs changed, Modern Signal was able to work with us to adjust our website platform in the ever-changing online world.  Their service and response level has been second to none, and we've been never been happier with our relationship with them.

    - Charm City Run

  • Modern Signal understands our business - from future needs to current limitations - so their solutions are always scalable, solid, and service-oriented.

    - National Association of Home Builders

  • I love working with Modern Signal! Their CMS is very easy to use and they are incredibly responsive to questions or challenges I bring them.

    - NALP

  • We wouldn’t have gotten where we are today without your support over the years.  Modern Signal has always been a great partner to us.

    - Kirk Gillis, Managing Director at Zoom Tanzania

  • This was by far the smoothest website redevelopment I have ever experienced. Modern Signal was a wonderful company to work with and we greatly value our working relationship. 

    - National Association of Student Financial Aid Administrators

  • I felt as if my company was their only client. They responded to my needs quickly and efficiently despite short turn around time and intense demands.

    - Teaching Strategies, Inc.

  • Modern Signal has a professional staff that was very responsive to our needs during all phases - scoping, developing, implementing and maintaining - of our project.  We have been pleased with their ability to deliver quality work on time and on budget. If given the opportunity, I would work with them again.

    - The National Center for Safe Routes to School

  • Modern Signal significantly enhanced our site to be more efficient and user-friendly. They provide excellent customer service with timely and cost-effective solutions.

    - Center for Medicare Education

  • Modern Signal worked with us to understand our needs and figure out what solution would work best for us. Our Lighthouse CMS is perfectly suited to our website goals. When we later needed to modify the CMS, they again took the time to understand exactly what was  needed and then built that functionality rather than delivering a cookie cutter solution.   

    - Ecosystem Investment Partners