neuemusic.com, all things tom

What is It?

This is an attempt to make it easier for the user to determine what is happening on a web page when they click a button and some action is performed. Now before you get all excited, this is really a raw proof-of-concept script. Nothing fancy, but it could be added to to make it more flexible and more abstracted for use across multiple places.

Demonstration

Click on one of the buttons to see what happens

Source


/*
recursive function for highlighting something by running through a set of colors.
really, really simple-minded function, requires that you declare an array of colors (6 to be exact)
named colors, and it only will do from the first color to the last color and back again, finally
ending on the final_color value you pass in. No calculations are currently done to interpolate
'tween colors, it is all dependent on the array.
*/
function change_shading(element_id, cur_val, direction, final_color) {
document.getElementById(element_id).style.backgroundColor = colors[cur_val];
if (direction == 'forward' && cur_val < 6) {
cur_val++;
setTimeout("change_shading('" + element_id + "'," + cur_val + ",'forward','" + final_color + "')",50);
} else if (direction == 'forward' && cur_val == 6) { cur_val--; setTimeout("change_shading('" + element_id + "'," + cur_val + ",'backward','" + final_color + "')",50);
} else if (direction == 'backward' && cur_val > 0) {
cur_val–; setTimeout(”change_shading(’” + element_id + “‘,” + cur_val + “,’backward’,'” + final_color + “‘)”,50);
} else if (direction == ‘backward’ && cur_val == 0) {
document.getElementById(element_id).style.backgroundColor = final_color;
}
}
// currently this is hard-coded to use an array of this name, but it could be changed without too much effort
var colors = new Array();
colors[0] = ‘#FFF’;
colors[1] = ‘#EEE’;
colors[2] = ‘#DDD’;
colors[3] = ‘#CCC’;
colors[4] = ‘#BBB’;
colors[5] = ‘#AAA’;
colors[6] = ‘#999′;


This entry was posted on Tuesday, March 22nd, 2005 at 9:02 am and is filed under composition, programming. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.