photo credit: robokow

This post is part of a “Be nice to your users” web UI design series I plan to write.
With the whole Web2.0 fluid/milky design that many sites are using now, it became very popular to use shades of gray for the main text color on websites.
Sometimes, this gray can be really difficult to read, especially for people with less-than-perfect eye sight.
Additionally, your users may not have the same excellent screen that you use to design, and different screens show colors differently.

It would be nice if you could offer your users the option to automatically change the text color your website, and is very easy to do with Jquery.

To start, make sure to download jQuery and have it accessible. As an alternative, you can link to it from a CDN (e.g. http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js).

I’m going to use just an index.html file for the simple demo. Ensure the jquery .js file is accessible by your page, and you are good to go:

Color change
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div style="width: 70%; margin: 40px auto; overflow: auto;">
  <div style="width: auto; float: right;">
    <div style="float: left; padding-right: 20px; line-height: 30px;">
       Click on a square to change text color:
    </div>
  </div>
</div>

This is not the full thing. It is just the header. What you create here is a strip of small boxes in different shades of gray to black – like in the demopage. Our goal is that when a user clicks on a colored div – the text changes color to the shade that was clicked. This can be really neat! To add the magic, we’ll add a simple jQuery to capture a click:

<script type="text/javascript">
  $("div.color-box").click(function() {
    var $color = $(this).css('background-color');
    $("#main").css('color',$color);
  });
</script>

Changing the color is easy. When a color <div> is clicked, the browser executes the code found in the click() callback we just added.

All the function does is find the background color of the clicked div and set it as the text color on the main div.

You can test this for yourself on the demo page.

I refresh and it’s gone..

After your user changes the color, he may refresh the page, or go to another link on your website. When this happens – the color is reset to normal. This is not so good.

Luckily, we have cookies. Using a cookie we can save the user’s color preference:
(thanks to dynamicdrive for the cookie scripts)

function getCookie(c_name) {
  if (document.cookie.length>0) {
    c_start=document.cookie.indexOf(c_name + "=");
    if (c_start!=-1) {
      c_start=c_start + c_name.length+1;
      c_end=document.cookie.indexOf(";",c_start);
      if (c_end==-1) {
        c_end=document.cookie.length;
      }
      return unescape(document.cookie.substring(c_start,c_end));
    }
  }
  return "";
}

function setCookie(c_name,value,expiredays) {
  var exdate=new Date();
  exdate.setDate(exdate.getDate()+expiredays);
  document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

The functions above just set and get a value on a cookie.
To use them, change the previous code a little bit:

<script type="text/javascript">
  //Change 1: try and load color from cookie on load. This makes color change survive
  //               page refresh or following links.
  //on ready - find if we have a color set in the cookie.
  $(document).ready(function() {
    var $color = getCookie('text-color');
    if ($color.length > 0) {
      $("#main").css('color',$color);
    }
  });

  $("div.color-box").click(function() {
    var $color = $(this).css('background-color');
    $("#main").css('color',$color);
    //change 2: store the new color in the cookie
    setCookie('text-color',$color);
  });
</script>

All that’s left is add some text in the main div and test:
(Below is the full file I use)

<!-- this is index.html that you change below to get the ultimate color picker -->
Color change
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div style="width: 70%; margin: 40px auto; overflow: auto;">
  <div style="width: auto; float: right;">
    <div style="float: left; padding-right: 20px; line-height: 30px;">
      Click on a square to change text color:
    </div>
  </div>
  <div id="main">
    <h1>Be nice to your users</h1>
    <h3>Let them set their own text color...</h3>
    <p> The Wiggles are a children's musical group formed in Sydney, Australia in 1991. Their original members were Anthony Field, Murray Cook, Greg Page, Jeff Fatt and Phillip Wilcher. Wilcher left the group after its first album. In 2006, Page was forced to retire from the group due to illness and was replaced by understudy Sam Moran.

Field and Fatt were members of the Australian pop band The Cockroaches in the 1980s, and Cook was a member of several bands before meeting Field and Page at Macquarie University, where they were studying to become pre-school teachers.
A school project led to the recording of their first album and tour in 1991. As a result of their background, the group combines music and theories of child development in their videos, television programs, and live shows.

Since their inception, other regular characters (Captain Feathersword, Dorothy the Dinosaur, Henry the Octopus, and Wags the Dog) and a troupe called "The Wiggly dancers" have toured with them and appeared in their CDs, DVDs, and television programs.

The group has franchised their concepts to other countries, developed Wiggles sections in amusement parks in Australia and the US, and won several recording industry awards. The Wiggles have been called "the world's biggest preschool band" and "your child's first rock band". 

The group has achieved worldwide success with their children's albums, videos, television series, and concert appearances. The Wiggles were named Business Review Weekly's top-earning Australian entertainers for four years in a row and earned AU$45 million in 2009.
They have earned seventeen gold, twelve platinum, three double-platinum, and ten multi-platinum awards for sales of over 17 million DVDs and four million CDs.

By 2002, The Wiggles had become the Australian Broadcasting Corporation's (ABC) most successful pre-school television program.
     </p>
  </div>
  <div style="float: right; width: 120px; margin-top: 20px; font-size: 10px; text-align: right;">
    <a href="http://en.wikipedia.org/wiki/Henry_the_Octopus#Wags_the_Dog_and_Henry_the_Octopus">Source: Wikipedia</a>
  </div>
</div>
<script type="text/javascript">

  //Change 1: try and load color from cookie on load. This makes color change survive
  //               page refresh or following links.
  //on ready - find if we have a color set in the cookie.
  $(document).ready(function() {
    var $color = getCookie('text-color');
    if ($color.length > 0) {
      $("#main").css('color',$color);
    }
  });

  $("div.color-box").click(function() {
    var $color = $(this).css('background-color');
    $("#main").css('color',$color);
    //change 2: store the new color in the cookie
    setCookie('text-color',$color);
  });

  function getCookie(c_name) {
    if (document.cookie.length>0) {
      c_start=document.cookie.indexOf(c_name + "=");
      if (c_start!=-1) {
        c_start=c_start + c_name.length+1;
        c_end=document.cookie.indexOf(";",c_start);
        if (c_end==-1) {
          c_end=document.cookie.length;
        }
        return unescape(document.cookie.substring(c_start,c_end));
      }
    }
    return "";
  }

  function setCookie(c_name,value,expiredays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
  }

</script>

But wait, there’s another option:

And now – with any color!

This second demo tells it all.
I am using the excellent colorPicker plugin to do it.

To implement:
1. Download the plugin’s js files, css and images. The only js file you really need is colorpicker.js – so you can disregard the rest of them. (Naturally, you need jquery.js – but we took care of it already in the previous example)
2. Put the css files nicely somewhere (have a look at the source code in the demo to see. I basically put css files under /css/ and images under /images/)
3. Copy these two styles to your style element, and remove the style for div.color-box.

Add the colorpicker plugin and its main css to your element:

<script type="text/javascript" src="./js/colorpicker.js"></script>

Change the top part of your index.html page to only show the color picker div and not the series of gray div elements:

...
<div style="width: 70%; margin: 40px auto; overflow: auto;">
  <div style="width: auto; float: right;">
    <div style="float: left; padding-right: 20px; line-height: 30px;">Click on the square to change text color:</div>
  </div>
  <div id="main">...
  </div>
</div>

Now add the following javascript down the bottom (replace the $(document).ready() function with this one) :

$(document).ready(function() {
  var $color = getCookie('text-color');
  if ($color.length > 0) {
    $("#main").css('color',$color);
  } else {
    $color = $("#main").css('color');
  }

  $('#colorSelector').ColorPicker({
    color: '#0000ff',
    onShow: function (colpkr) {
      $(colpkr).fadeIn(500);
      return false;
    },
    onHide: function (colpkr) {
      $(colpkr).fadeOut(500);
      return false;
    },
    onChange: function (hsb, hex, rgb) {
      $('#main').css('color', '#' + hex);
      setCookie('text-color','#' + hex);
      $("#bgdiv").css('background-color','#' + hex);
    }
  });
});

That’s it really. enjoy!

Popularity: 21% [?]