Membership Lists
All District member lists are based on the same pattern; an html file presents the page layout and calls a Javascript file that contains the list of member names and performs computations to format the member list in alphabetical order and to talley the number of members in each membership grade. If there are no members in a particular grade, the program omits that grade from the member list.
The html code for District 1 is typical of the code for all district membership pages. The following line of code in the middle of the page calls the Javascript code that renders the list:
<script type="text/javascript" src="member1-List.js"></script>
HTML Code
Here is the html code that displays the page, which will be followed by the Javascript code that is called by the above script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Caltrans Quarter Century Club District 1 Members</title>
<link rel="stylesheet" href="../../stylesheets/default.css" />
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body onload "my>
<header>
<div id="logoTxt">
<h1> Caltrans Quarter Century Club</h1>
<h3> District 1 Members</h3>
</div>
</header>
<section id="mainRight" class="clear">
<nav>
<ul>
<li><a href="../index.html">District 1 Home</a></li>
<li><a href="../../index.html">CTQCC Home</a></li>
<li><a href="../../Archives/index.html">Newsletter</a></li>
<li><a href="../places1/places1.html">Places to See</a></li>
<li><a href="../stories1/stories1.html">Stories</a></li>
<li><a href="../../Feedback/feedback-form.html">Feedback</a></li>
</ul>
</nav>
<iframe src="Russian-Gulch-Bridge-Hwy-1-Mendocino-CA.jpg" height="480" width="956"></iframe>
<!--<img src="../../images/Russian-Gulch-Bridge-Hwy-1-Mendocino-CA.jpg" width="956" height="299" alt="" border="0">-->
<section class="columns clear">
<center><h4>District 1 Members</h4>
<p>
<center><font size=2 color=blue>(H) Honorary (AH) Associate Honorary (SS) Surviving Spouse (L) Lifetime</font></center></p>
<hr>
<script type="text/javascript" src="member1-List.js"></script>
<hr>
</section>
<!-- end columns -->
<h5 id="signature">Caltrans Quarter Century Club | District 1 Members</h5>
<footer>
<br>
<p><a href="../index.html">District 1</a></p>
<p><a href="../../District2/index.html">District 2</a></p>
<p><a href="../../District3/index.html">District 3</a></p>
<p><a href="../../District4/index.html">District 4</a></p>
<p><a href="../../District5/index.html">District 5</a></p>
<p><a href="../../District6/index.html">District 6</a></p>
<p><a href="../../District7/index.html">District 7</a></p>
<p><a href="../../District8/index.html">District 8</a></p>
<p><a href="../../District9/index.html">District 9</a></p>
<p><a href="../../District10/index.html">District 10</a></p>
<p><a href="../../District11/index.html">District 11</a></p>
<p><a href="../../CentralDistrict/index.html">Central District</a></p>
</footer>
</section>
<!-- end mainRight -->
</body>
</html>
Javascript code:
district1Members();
function district1Members() {
members1 = [];
members1.push("Bernard Arney", "Leonard Blomquist", "James E Boyd", "Rita C Coleman (H)", "Donald L Comstock (H)", "Dale G Cooley", "Charles Fielder", "Tom Georgeson (H)", "Harold E Hallstenn (H)", "Arlene A Hartin", "Jerry Haynes (H)", "Rick Knapp", "James F Long", "Bruce Miner (H)", "Robert L Myers (H)", "Alan Radford", "Arlon Sauls", "John G Sherman", "Fritz Daniel Silberstein", "Slater H Smith",
"Susan Tappan", "Robert W Trice (H)", "Viola Truby", "Benjamin D Van Zandt (H)", "Marty Van Zandt","Robert L West", "David Wilson");
displayMemberList();
}
//------------------------------------------------------------------------------------
function displayMemberList() {
honorary1 = [];
associatehonorary1 = [];
survivingspouse1 = [];
lifemember1 = [];
regularmember1= [];
document.write("<table width=100% border=0 align=center>");
document.write("<tr>");
var len = members1.length;
var j=4;
for(i=0; i<len; i++) {
members1[i].toString;
if (members1[i].includes("(H)")) {
str = members1[i].substring(0,(members1[i].length)-3);
document.write("<td><font color='red'>" + str + "</font><font color='blue'>" + "(H)" + "</font></td>");
}
else if (members1[i].includes("(AH)")) {
str = members1[i].substring(0,(members1[i].length)-4);
document.write("<td><font color='red'>" + str + "</font><font color='blue'>" + "(AH)" + "</font></td>");
}
else if (members1[i].includes("(SS)")) {
str = members1[i].substring(0,(members1[i].length)-4);
document.write("<td><font color='red'>" + str + "</font><font color='blue'>" + "(SS)" + "</font></td>");
}
else if (members1[i].includes("(L)")) {
str = members1[i].substring(0,(members1[i].length)-4);
document.write("<td><font color='red'>" + str + "</font><font color='blue'>" + "(L)" + "</font></td>");
}
else { document.write("<td><font color='red'>" + members1[i] + "</font></td>"); }
if ((!(members1[i].includes("(H)")))&(!(members1[i].includes("(AH)")))&(!(members1[i].includes("(SS)")))&(!(members1[i].includes("(L)")))) {
regularmember1.push(members1[i]);
}
if (members1[i].includes("(H)")) {
honorary1.push(members1[i]);
}
if (members1[i].includes("(AH)")) {
associatehonorary1.push(members1[i]);
}
if (members1[i].includes("(SS)")) {
survivingspouse1.push(members1[i]);
}
if (members1[i].includes("(L)")) {
lifemember1.push(members1[i]);
}
if (i == j) {
document.write("</tr><tr>");
j=i+5;
}
}
document.write("</tr><tr>");
document.write("<td>Total Members = " + "<b>" + i + "</b>" + "</td>");
document.write("<td>Regular Members = " + "<b>" + regularmember1.length + "</b>" + "</td>");
document.write("<td>Honorary Members = " + "<b>" + honorary1.length + "</b>" + "</td>");
if (associatehonorary1.length) {
document.write("<td><b>Associate Honorary = " + associatehonorary1.length + "</b></td>");
}
if (survivingspouse1.length) {
document.write("<td><b>Surviving Spouse = " + survivingspouse1.length + "</b></td>");
}
if (lifemember1.length) {
document.write("<td><b>Lifetime Members = " + lifemember1.length + "</b></td>");
}
document.write("</tr></table>");
}
Code Explanation
The first line in the Javascript file calls the function "district1Members()", which pushes the alphabetically-formatted member list into an array named "members1". That function then calls the function "displayMemberList()", which performs the computations to format the member list for display in the html file from which it's called. Separate arrays to contain the names of members are declared at the beginning of this function, then computations are performed in a loop through the entire membership list to push the names into the arrays corresponding to their grade.
To talley the number of members in each grade, the length of each non-empty array is computed and displayed at the end of the member list displayed by the html file, as shown by the following line of code that displays the number of Honorary members:
document.write("<td>Honorary Members = " + "<b>" + honorary1.length + "</b>" + "</td>");
All districts have Regular and Honorary members, but not all have Associate Honorary, Surviving Spouse, and Lifetime members. In these cases, the corresponding array is filtered to omit any membership grade that is not present. For example, the filter for the Associate Honorary grade is as follows:
if (associatehonorary1.length) {
document.write("<td><b>Associate Honorary = " + associatehonorary1.length + "</b></td>");
}
The arrays, associatehonorary1, survingspouse1, and lifetime1 are checked to see if they exist, and if so, the length of the array; i.e., the number of names in the array, is printed.
Adding or Deleting Member Names
To add a name to the list, insert the name into the Javascript list in the appropriate alphabetical location in first-last-membership grade (H, AH, SS, or L) order enclosed in quotes, being sure to include only one space after the name and before the grade designation. The program reads the last three or four characters of the name, depending on the grade abbreviation. Names without a grade designation are interpreted as Regular members.
To remove a name, delete it and its trailing comma, if any, from the Javascript list.