jQuery Plugins Home

HeatColor, a jQuery plugin

What is it?

HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element.  The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a "heat" color based on its derived value's position within the range.

You bind a collection of elements such as table rows, divs or list members to heatcolor and let it do the work.

It can find the min and max values of the desired elements, or you can pass them in manually.

Examples

Each example is followed by the code used in the example.

Example 1: Passing in table rows, used in conjunction with the tablesorter plugin.
Click on a column heading to resort. Loads up sorted on HR column.
Note: tablesorter doesn't appear to work in IE6, so IE6 will give some funky results.

$("#ex1").tablesorter();
function sortwithcolor( column ) {
$("#ex1 > tbody > tr").heatcolor(
function() { return $("td:nth-child(" + column + ")", this).text(); }
);
};
$("th").click(function() {
$(this).siblings().css("background-color","#cccccc").end().css("background-color","#dd0000");
sortwithcolor( $(this).parent().children().index( this ) + 1 );
});
sortwithcolor(8);

Example 2: 10-point rating system

$("div.row").each(function() {
$("div", this).heatcolor(
function() {
return $(this).parent().children().index( this[0] ) + 1;
},
{ maxval: 10,
minval: 1,
colorStyle: 'greentored',
lightness: 0.3 }
);
});

Example 3: Using list elements - using value attribute of list elements, green to red color style

How much do you love cotton candy?

• Not at all: 60%
• A little: 30%
• Some: 8%
• A lot: 2%

$("#ex2 li").heatcolor(
function() {
// 'this' will refer to current li element
return $(this).attr("value"); },
{
lightness: 0.3,
colorStyle: 'greentored'
}
);

Example 4: Divs, using reverse order (normally highest would be green, lowest red when using greentored colorstyle)
Also uses maxval and minval passed in rather than calculated

$("#ex3 div").heatcolor(
function() { return $(this).text(); },
{	lightness: 0,
colorStyle: 'greentored',
maxval: 15,
minval: 1,
reverseOrder: true
}
);

Download

Download jquery.heatcolor.0.0.1.js (6K)
Download jquery.heatcolor.0.0.1.pack.js (2K)

Usage

$("selector").heatcolor( valueFunction[function], options[map] );

History

Version 0.0.1 released November 29, 2007

Contact

Questions, comments? joshnathanson at gmail dot com