Autocolor labels for bootstrap

by GĂĽnther Hutter

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<p>
   Set of labels: 
   <span class="label label-default">One</span> 
   <span class="label label-autocolor">Two</span>
   <span class="label label-autocolor">Three</span>
   <span class="label label-autocolor">Four</span>
   <span class="label label-autocolor">Five</span> 
   <span class="label label-autocolor">Six</span>
   <span class="label label-autocolor">Seven</span>
</p>

<p>
  Set of other lables (same content leads to same bg-color):
  <span class="label label-autocolor">one</span>
  <span class="label label-autocolor">Three</span>
  <span class="label label-autocolor"></span>
  <span class="label label-autocolor">Message one</span>
  <span class="label label-autocolor">Message three</span>
</p>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */

// Converts a String to a color. The more similar strings are,
// the more similar will be the color.
function stringToColour(str) 
{
    var hash = 0;
    for (var i = 0; i < str.length; i++) 
    {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    var colour = '#';
    for (var i = 0; i < 3; i++) 
    {
        var value = (hash >> (i * 8)) & 0xFF;
        colour += ('00' + value.toString(16)).substr(-2);
    }
    return colour;
}

// colorize the labels after tha page has laoded
$( window ).load(function() 
{
  $('.label-autocolor').each(function (index, value) 
  { 
  	var color = stringToColour($(value).text());
   $(value).css('background-color', color);
	});
  
});