Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.

Various javascript utilities that don't (yet) warrant packaging on their own.

Copyright (c) Andrew J. Peterson, NDP Software

jQuery Plugins


jQuery plugin to collect multiple data attributes into an object, using the data attribute names as keys. Looks up the DOM and collects all data attributes, but the deepest ones win.


   $('<div data-product-id="1"></div>').dataContext(); // => {'product-id': '1'}
   $('<div data-a="1"><span data-b="2"></span></div>').find('span').dataContext()); // => {a: '1', b: '2'}


Simple jQuery plugin to forward events from one element to a new target. Optionally provide a new event name.


$('#id').bindAndDelegate('click',$('#other'),'id-clicked'); // new event


Column level event triggering on a table. Handlers receive jQuery objects with all the cells of a single table row, so that hover and click behavior can be implemented on tables. Usage:

 $('table').columnize().bind('columnmouseenter',function(e, $cells) {
 }).bind('columnmouseleave',function(e, $cells) {

This is a primitive version of various other plugins, but generally all that is needed for most jobs.


Moved into its own repo,

Jasmine Helpers

Simple Fixture

This is a lighter-weight alternative to jQuery-jasmine's fixture scheme. Provides a jQuery object $fixture that is in the DOM and cleaned out before each test.

This tool does not facilitate loading of file-based fixtures. I advise against this, but if you must, use jQuery-jasmine.

Usage: Include simple_fixture.js. Usually placing this in a spec_helper folder and restarting jasmine will do the trick.

Color Matchers

toBeDistinguishable and toBeVisuallyClose


Utilities to perform color math and manipulation (extracted from Csster).

  • "#ab342c".darken(%) -- make color darker by given percent
  • "#ab342c".lighten(%) -- make color lighter by given percent
  • "#ab342c".saturate(%) -- make color more saturated by given percent. To desaturate, use negative values for the percent. Note that "#ab342c".saturate(-100) renders in grayscale.

There are also color conversion routines if you want to build your own manipulation.

  • "blue".toHexColor()
  • "#9cf".toHexColor()
  • "#ab342c".toHexColor() (no-op)
  • "#ab342c".toRGB() converts to array of three values, 0 - 255
  • "#ab342c".toHSL() returns an array of hue, saturation and lightness. Hue is a range from 0-360, while the others are from 0 to 100.
  • Csster.hslToHexColor(h,s,l) converts a triplet to a hex color

Opacity is currently not supported by the color model.


Generate color schemes appropriate to prototypes, visualizations and maps.

Standard colors

  • ColorFactory.primaryColors() is yellow, red and blue.
  • ColorFactory.primaryAndSecondaryColors() yellow, orange, red, violet, blue and green.

Random colors

  • ColorFactory.random() a random color, somewhat evenly distributed.
  • ColorFactory.randomGray() a random gray scale value.
  • ColorFactory.randomHue() given a saturation and lightness returns a random color.
  • ColorFactory.complementary(src)
  • ColorFactory.interpolate(color1, colorN, steps) fills in any number of colors "between" the two colors.
  • ColorFactory.analogous(src) returns colors near the given color on the color wheel, at an angle of 30°
  • ColorFactory.analogous(src, angle) returns colors near the given color on the color wheel, at the specified angle

Color Schemes

Color scheme generation inspired by

  • ColorFactory.qualitative([refColor], count) returns a qualitative scheme. This scheme does not imply magnitude differences between colors, and hues are used to create the primary visual differences between classes. Qualitative schemes are best suited to representing nominal or categorical data.
  • ColorFactory.sequential(startColor, [endColor], count) returns a sequential scheme. This is suited to ordered data that progress from low to high. Lightness steps dominate the look of these schemes, with light colors for low data values to dark colors for high data values.
  • ColorFactory.binary(trueColor) returns an array or two colors. Element 0 is the true (darker) color, and element 1 is the false (lighter) color.


"Functional" helpers that contemplate different programming paradigms.


Javascript Utilities-- assorted utilities useful on their own







No releases published


No packages published