Gradient Classes

© 2012, Martin Rinehart

Prerequisite: ability to program with pre-written JavaScript objects.

Above: HGradient, VGradient, HGradOpposed, VGradOpposed.

The code that creates these gradients is:

var samples_ref = document.getElementById( 'samples' );
var hsamp = new MRlib323.HGradient( samples_ref, 20, 20, 100, 100,
		'#00ffff', '#ffffff' );
var vsamp = new MRlib323.VGradient( samples_ref, 140, 20, 100, 100,
		'#ff00ff', '#ffffff' );
var hosamp = new MRlib323.HGradOpposed( samples_ref, 260, 20, 100, 100,
		'#ffff00', '#ffffff' );
var vosamp = new MRlib323.VGradOpposed( samples_ref, 380, 20, 100, 100,
		'#e0e0ef', '#ffffa0' );

Terminology: a gradient's direction (horizontal or vertical) is the direction in which the colors change. It is common to use a gradient across the narrow dimension of an element. For example, menu items are commonly painted with vertical gradients, as are the menu bars of windows.

There are four visible gradient classes, the HGradient and the VGradient (horizontal and vertical), and the HGradOpposed and VGradOpposed. The "opposed" types feature symmetric gradients shading from color A at the edge to color B in the center, and back to color A at the opposite edge. These are all supported internally by a Gradient class, that should not be instantiated directly.

For samples of these gradients, start at the Artists track, Gradients page.

The Gradient Class

The Gradient is the base class for each of the following. It throws an eror if its constructor is called.

The Gradient has paint() and toString() methods that are inherited by the visible gradient classes.

The HGradient Class

hgrad = new HGradient( parent, left, top, width, height, start_color, end_color, is_span );

The constructor arguments are:

• parent: the DOM element to which the gradient will be appended. The gradient's position is relative to this element's left and top.
• left, top, width, height: the position and size of the gradient. Use numbers (no suffix). 'px' will be added at the appropriate time.
• start_color, end_color: the left or top color, for simple gradients, and the outside edge for "opposed" gradients.
• is_span: an optional argument. If true the gradient is enclosed in a span element. If false or undefined the gradient is enclosed in a div element.

The constructor calls the inherited paint() instance method.

The HGradOpposed Class

The same as the HGradient class.

The VGradient Class

The same as the HGradient class.

The VGradOpposed Class

The same as the HGradient class.

The Gradient Mistake

A gradient is a set of spans, each one pixel wide (horizontal gradient) or tall (vertical gradient). Each is a child of the gradient background div (or span). To delete them all, simply assign to my_grad.background.innerHTML. To write over them, place your text in another div or span that has no background of its own. Append this text-holding div to my_grad.background.

Repainting

To repaint, assign new values to my_grad.start_color and/or my_grad.end_color; then call my_grad.paint().

The Gradient Memory Leak?

One browser family leaks memory if you do not properly detach elements from the DOM when you replace them. These gradients detach their component spans from the background (if they are already attached) before beginning the paint() process. That should prevent the leak. This has not been tested. If you paint and forget (a single background gradient, as for menu prompts) this is not an issue. If you repaint continuously (choose a new color with every mouse movement) this should be thoroughly tested.

Feedback: MartinRinehart at gmail dot com

# # #