/* * ROWTOG.JS - javascript to toggle tables on/off (seen/hidden) * * REQUIREMENTS: * ============= * * #1 - * * #2 - : * * The javascript needs to run the 'findAll( );' function in order to * initialize the array of tables to be shown/hidden. Easiest method of doing * this is to include 'onLoad' within the BODY tag; simply add the following * string somewhere within the tag: * * onLoad="findAll( );" * * * #3 - * * Tables to be toggled are required to have an ID, NAME, ONCLICK & * STYLE within their HTML tags, e.g., * * * * ID & NAME are both the same & comform to the format "t:{tblSet}:{0|1}", * where tblSet is the same number for both tables corresponding to the * same user and '0' refers to the smaller table & '1' to the larger. * There should always be two tables per table set; one table containing * the minimal amount of info & the second table with all the info. Table * set can start with any number, but should start at '0' (starting at * 1,000 will cause javascript to create a 1,001 array in order to index * at 1,000. NOTE: Technically, it's an error to use the same ID value * within a document, but neither IE nor Firefox will complain; however, * when javascript finds the second identical ID, it will overwrite the * first and both will respond to being shown or hidden when either is * clicked. * * STYLE="display : inline" is set for all tables that should initially * be shown * * * STYLE="display : none" is set for all tables that should initially * be hidden * * onClick="toggle( this );" indicates that whenever "this" object is * clicked, it should execute the javascript function 'toggle' & pass * 'this' (the object clicked) as its only argument. * * NOTE: By passing the object clicked rather than the "events", it * is not necessary to determine the browser's identity (IE vs * Firefox vs Safari, etc). All browsers respond to the same * set of events; however, they do not all store them the same * way requiring additional code to handle these differences. * Since all the info needed to show/hide the table is stored * within the table object 'this', we can use the same code * for all browsers. * * How It Works: * ============= * * INITIALIZATION: * * The 'findAll' function locates all tables within the document & * then iterates thru looking only for tables with an ID that begins * with "t:". Perform some minor error-checking by breaking the ID apart * using the ':' as a separator; the second & third parts both need to * be numbers & the third part can only be '0' or '1'. If it passes and * the 3rd part is '0', it's a table with minimal information in it so it's * saved in the 'myMin[]' array using the same number in part 2 for the * index. Ex: if ID="t:7:0", the '0' indicates the table has minimal * info so it goes into 'myMin' at index '7' or myMin[7] = Table; * The global variable 'showing' is set to the index of the currently * visible table containing full details or -1 if none are showing. * It's initially set to '-1' * * TOGGLING: * * Minor error-checking -- if the ID can't be split into 3 parts, * just return. Extract the table number & table type from the second * and third parts (p[1] & p[2], respectively). If a max info table * is showing ('showing' is NOT equal to -1), hide it & restore the * minimal table again. If the table clicked was the one being shown, * set 'showing=-1' and return; otherwise, hide the min table, show * the max table & set 'showing=p[1]'. * * NOTES: * ====== * * This was done using two tables per person; however, it can easily * be used toggle on/off rows in a table or DIV sections. The only real * change needed would be the first executable line in 'findAll( )'. * Currently, it retrieves all tables within the current webpage; if you * want to toggle on/off rows instead, simply change the argument to * getElementsByTagName( ) from "table" to "tr"; to toggle on/off DIVs, * change the argument to "div". Within the HTML page itself, you would * need to still have ID, NAME, onClick & STYLE within the tag type you * want to toggle on/off & the ID still needs to be "t:#:#", unless you * also change the javascript to look for something else. * * Javascript files are usually stored in the same place as the webpages * and need to be readable by the apache-defined 'user'. They do not need * to be set as executables. */ var N; // Number of table row IDs var myMin = new Array( ); // Minimal table var myMax = new Array( ); // Maximum table var ON=1, OFF=0; // Miscellaneous variables var FALSE=0, TRUE=1; var MIN=0, MAX=1; var showing = -1; // Index of Max Table currently showing: // -1 ==> none; 0..nMaxTables ==> which ID var nmn, nmx; var show = "inline"; // Shows the table var hide = "none"; // Hides the table function toggle( myObj ) { var i, j, k, v; var p; p = myObj.id.split( ":" ); // If it's valid, it'll split into 3 if( p.length < 3 ) return; v = ( p[0] == 't' ) ? true : false; v = ( p[0] == 'd' ) ? true : v; if( v == false ) return; j = Number( p[1] ); // 'Table Set' number k = Number( p[2] ); // Index into array of tracked tables if( showing != -1 ) // Max info table is showing; switch to min { myMax[ showing ].style.display = hide; myMin[ showing ].style.display = show; } if( showing == j ) // We're effectively done { showing = -1; // No max info tables are showing } else // Show Max info for clicked table { // Remember which table is visible showing = j; // Then hide small & show big myMin[ showing ].style.display = hide; myMax[ showing ].style.display = show; } } function findAll( ) { var i, j, k; var p; var myTables = new Array( ); // Temporary // Find all the tables in the current webpage myTables = document.getElementsByTagName( "table" ); // Filter out only those who's ID begins with "t:" for( i=0; i < myTables.length; i++ ) { if(( myTables[i].id.indexOf( "t:" )) == 0 ) { p = myTables[i].id.split( ":" ); if( p.length < 3 ) // Not enough parts continue; j = Number( p[1] ); // 'j' = index of table k = Number( p[2] ); // 'k' = type of table (min/max) // 'j' can go from '0' up; 'k' must be '0' or '1' if(( j < 0 ) || ( k < 0 ) || ( k > 1 )) continue; if( k == MIN ) // Short table { myMin[j] = myTables[i]; // Tracks min tables } else // Full table { myMax[j] = myTables[i]; // Tracks max tables } } // ID string began with 't:' } // Loop over document tables } function myMouse( myObj ) { myObj.style.background='#CCCCCC'; // document.body.style.cursor='hand'; }