© 2012, Martin Rinehart
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
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.
Gradient is the base class for each of the following. It throws an eror if its constructor is called.
toString() methods that are inherited by the visible gradient classes.
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
truethe gradient is enclosed in a span element. If
undefinedthe gradient is enclosed in a div element.
The constructor calls the inherited
paint() instance method.
The same as the
The same as the
The same as the
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
To repaint, assign new values to
my_grad.end_color; then call
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
# # #