/* 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 msee = new Array(); // Boolean for whether array is displayed (modified by program) var imax = 3; // 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; function menu_init() { // Define menu and submenu elements here. Values shown are // examples only. Change them!! mhan[0] = document.getElementById("kerrville_fest_list"); mpos[0] = slider_top; // pixels from top mhgt[0] = "auto"; // height in pixels when displayed msee[0] = false; // initially displayed? mhan[1] = document.getElementById("other_fest_list"); mpos[1] = slider_top; // pixels from top mhgt[1] = "auto"; // height in pixels when displayed msee[1] = false; // initially displayed? mhan[2] = document.getElementById("other_photos_list"); mpos[2] = slider_top; // pixels from top mhgt[2] = "auto"; // height in pixels when displayed msee[2] = false; // initially displayed? /*********************************************************** *** 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; } if (msee[i]) { tpos[i] = mpos[i]; mhan[i].style.display = "block"; } else { tpos[i] = mpos[i] - mhgt[i]; mhan[i].style.clip = "rect(" + mhgt[i] + "px auto auto auto)"; } mhan[i].style.top = tpos[i] + "px"; mtog[i] = msee[i]; } } // These are program registers var mtog = new Array(); // Display state var tpos = new Array(); // Current shifted positions of elements var last_i = -1; var cl, gli, glo; function do_expand(i) { var hhan = mhan[i]; if (!mtog[i]) { animateCSS(hhan, 10, 20, { // Set top and clip style properties for each frame as follows: top: function(f,t,n) { var offset = tpos[i] + Math.ceil(mhgt[i] * f/n); for (var j = i+1; j < imax; j++) { mhan[j].style.top = tpos[j] + Math.ceil(mhgt[i] * f/n) + "px"; } return offset + "px"; }, clip: function(f,t,n) { return "rect(" + Math.ceil(mhgt[i] * (1 - f/n)) + "px auto auto auto)";}, display: function(f,t,n) { mtog[i] = true; return "block";} }, function(x) { for (var j = i; j < imax; j++) { tpos[j] += mhgt[i]; mtog[i] = true; } }); } return true; } function do_shrink(i) { var hhan = mhan[i]; if (mtog[i] && !msee[i]) { animateCSS(hhan, 10, 10, { // Set top and clip style properties for each frame as follows: top: function(f,t,n) { var offset = tpos[i] - Math.ceil(mhgt[i] * f/n); for (var j = i+1; j < imax; j++) { mhan[j].style.top = tpos[j] - Math.ceil(mhgt[i] * f/n) + "px"; } return offset + "px"; }, clip: function(f,t,n) { return "rect(" + Math.ceil(mhgt[i] * f/n) + "px auto auto auto)";} }, function(x) { for (var j = i; j < imax; j++) { tpos[j] -= mhgt[i]; mtog[i] = false; } }); } 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 (mtog[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; }