/* Sliding Vertical Menus This script implements two-level sliding, expanding vertical menus. The requirements are as follows: 1. The script uses the script AnimateCSS.js from O'Reilly and Associates. This script can be obtained from http://examples.oreilly.com/jscript4/jscript4_examples.tar.gz There are a couple of minor changes to this script required to make to make it work with this script. These can easily be made by hand, using the unified diff below as a guide. --- /home/fmouse/src/js4examples/AnimateCSS.js +++ AnimateCSS.js @@ -40,7 +40,7 @@ // animateCSS(), it has access to the arguments and local variables of // animateCSS() even though it is invoked after that function has returned! function displayNextFrame() { - if (frame >= numFrames) { // First, see if we're done + if (frame > numFrames) { // First, see if we're done clearInterval(intervalId); // If so, stop calling ourselves if (whendone) whendone(element); // Invoke whendone function return; // And we're finished @@ -54,7 +54,7 @@ // of the specified element. Use try/catch to ignore any // exceptions caused by bad return values. try { - element.style[cssprop] = animation[cssprop](frame, time); + element.style[cssprop] = animation[cssprop](frame, time, numFrames); } catch(e) {} } 2. Elements in the menu to be animated must be block elements (

or ) identified by id attributes which are referenced as the arguments to calls to getElementById. 3. Elements in the menu to be animated must have a CSS style of "position: absolute". Define each menu element, both top level (initially visible) and sub level (initially invisible) in the menu_init() function below, and call this function from the onLoad() event handler in the tag. */ // Set the following for each menu defined in menu_init() var mhan = new Array(); // Handles var mpos = new Array(); // default positions of elements (not changed) var mhgt = new Array(); // Height of elements var mdir = new Array(); // "up" or "down" - direction of menu expansion var tpos = new Array(); // Global temporary position register array var ttog = new Array(); // Display state var expanding = new Array(); var shrinking = new Array(); var imax = 2; // set to the number of menu items, including submenus var short_time = 0; // Time to delay (ms) before first menu change action var long_time = 400; // Time to delay (ms) before second menu change action var browserName = navigator.appName; var ppos = new Array(); // Initialized by menu_init function menu_init() { // Define menu and submenu elements here. Values shown are // examples only. Change them!! mhan[0] = document.getElementById("ppress"); mpos[0] = 22; // pixels from top mhgt[0] = "auto"; // height in pixels when displayed mdir[0] = "down"; // direction of menu expansion mhan[1] = document.getElementById("fpress"); mpos[1] = -25; // pixels from top mhgt[1] = "auto"; // height in pixels when displayed mdir[1] = "up"; // direction of menu expansion /*********************************************************** *** NOTHING BELOW THIS POINT SHOULD NEED TO BE CHANGED *** ***********************************************************/ for (var i = 0; i < imax; i++) { if (mhgt[i] == "auto") { mhgt[i] = mhan[i].offsetHeight; } tpos[i] = mpos[i] - mhgt[i]; mhan[i].style.clip = "rect(" + mhgt[i] + "px auto auto auto)"; ppos[i] = tpos[i]; mhan[i].style.top = mpos[i] + "px"; ttog[i] = false; expanding[i] = false; shrinking[i] = false; } } // These are program registers var last_i = -1; var cl, gli, glo; function do_expand(i) { var down; if (mdir[i] == "down") down = true; if (mdir[i] == "up") down = false; tpos[i] = ppos[i]; var hhan = mhan[i]; if (!ttog[i]) { animateCSS(hhan, 10, 20, { // Set top and clip style properties for each frame as follows: top: function(f,t,n) { if (down) { var offset = tpos[i] + Math.ceil(mhgt[i] * f/n); return offset + "px"; } else { return mpos + "px"; } }, clip: function(f,t,n) { return "rect(" + Math.ceil(mhgt[i] * (1 - f/n)) + "px auto auto auto)"; }, display: function(f,t,n) { ttog[i] = true; return "block";} }, function(x) { ttog[i] = true; }); } return true; } function do_shrink(i) { var down; if (mdir[i] == "down") down = true; if (mdir[i] == "up") down = false; if (ttog[i]) { animateCSS(mhan[i], 10, 20, { // Set top and clip style properties for each frame as follows: top: function(f,t,n) { if (down) { var offset = tpos[i] - Math.ceil(mhgt[i] * f/n); } else { var offset = tpos[i]; } return offset + "px"; }, clip: function(f,t,n) { return "rect(" + Math.ceil(mhgt[i] * f/n) + "px auto auto auto)"; } }, function(x) { ttog[i] = false; }); } tpos[i] = mpos[i]; return false; } function transit(li, lo, is_before) { gli = li; glo = lo; if (is_before) { setTimeout("do_shrink(glo)", long_time); setTimeout("do_expand(gli)", short_time); } else { setTimeout("do_shrink(glo)", short_time); setTimeout("do_expand(gli)", long_time); } } function do_show(i) { if (i == last_i) { if (ttog[i]) { do_shrink(i); last_i = -1; return; } } if ((i < last_i) || (last_i == -1)) { transit(i, last_i, true); } else { transit(i, last_i, false); } last_i = i; }