Javascript XML Reader
Experimenting with what you can do with "just" javascript, I have the stats page for the HHS girls soccer team
use javascript to read an XML file with the stats in it.
HHS Girls Soccer Stats Page
<script language="JavaScript1.2" type="text/javascript">
function setDiv() {
var goal_total = 0;
var assist_total = 0;
var div_text = '';
div_text = div_text + '<table bgcolor="#FFFFFF" cellpadding=2 cellspacing=0 class="stats" frame="border" rules="all">';
div_text = div_text + ' <tr class="row_two">';
div_text = div_text + ' <th style="padding-left: 5px; padding-right: 5px;" align="center">Player Name</th>';
div_text = div_text + ' <th style="padding-left: 5px; padding-right: 5px;" align="center">Graduation Year</th>';
div_text = div_text + ' <th style="padding-left: 5px; padding-right: 5px;" align="center">Goals</th>';
div_text = div_text + ' <th style="padding-left: 5px; padding-right: 5px;" align="center">Assists</th>';
div_text = div_text + ' </tr>';
for(var i=0; i < player_list.length; i++) {
if(i%2)
div_text = div_text + '<tr class="row_two">';
else
div_text = div_text + '<tr class="row_one">';
div_text = div_text + '<td>' + player_list[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + '</td>';
if (player_list[i].getElementsByTagName("grad_year"))
div_text = div_text + '<td>' + player_list[i].getElementsByTagName("grad_year")[0].childNodes[0].nodeValue + '</td>';
else
div_text = div_text + '<td> </td>';
if (player_list[i].getElementsByTagName("goals")[0].childNodes[0]) {
div_text = div_text + '<td>' + player_list[i].getElementsByTagName("goals")[0].childNodes[0].nodeValue + '</td>';
goal_total = goal_total + parseInt(player_list[i].getElementsByTagName("goals")[0].childNodes[0].nodeValue);
}
else
div_text = div_text + '<td> </td>';
if (player_list[i].getElementsByTagName("assists")[0].childNodes[0]) {
div_text = div_text + '<td>' + player_list[i].getElementsByTagName("assists")[0].childNodes[0].nodeValue + '</td>';
assist_total = assist_total + parseInt(player_list[i].getElementsByTagName("assists")[0].childNodes[0].nodeValue);
}
else
div_text = div_text + '<td> </td>';
div_text = div_text + '</tr>';
}
div_text = div_text + '<tr class="row_one">';
div_text = div_text + '<td align="left">TOTALS</td>';
div_text = div_text + '<td align="center"> </td>';
div_text = div_text + '<td align="center">' + goal_total + ' </td>';
div_text = div_text + '<td align="center">' + assist_total + ' </td>';
div_text = div_text + '</tr></table>';
document.getElementById("stats_div").innerHTML = div_text;
}
</script>
PHP Image Reader
My first PHP, a script to get the newest images named canes_pic* to display in HHS girls soccer home page left hand
column.
HHS Girls Soccer Home Page
<?php
$images = array();
function getImages($dir) {
# array to hold return value
$Files = array();
# add trailing slash if missing
if(substr($dir, -1) != "/")
$dir .= "/";
# full server path to directory
$fulldir = $dir;
$thisdir = opendir($fulldir);
if (! $thisdir)
die("getImages: Failed opening directory $dir for reading");
while ($Filename = readdir($thisdir))
{
if ($Filename == '.' || $Filename == '..')
continue;
if(substr($Filename,-3) == 'jpg' && substr($Filename,0,9) == 'canes_pic') {
$LastModified = filemtime($dir . $Filename);
$Files[] = array($dir .$Filename, $LastModified);
}
}
return $Files;
}
function DateCmp($a, $b) {
return strnatcasecmp($a[1] , $b[1]);
}
function SortByDate(&$Files) {
usort($Files, 'DateCmp');
return $Files;
}
#The function is called, and the result output to HTML, as follows:
# fetch image details
$images = getImages("images");
$images = SortByDate($images);
# display on page
$start = sizeof($images)-1;
$end = $start - 12;
if($end < 0)
$end = 0;
for ($i = $start; $i >= $end; $i--) {
$img = $images[$i];
echo "<img class=\"photo\" src=\"{$img[0]}\" vspace=\"3\" alt=\"\"><br>\n";
}
?>
CSS Sprites
To try and reduce the http call overhead on the RB consumer page, changed the rotation of images from separate
files controled by javascript to a CSS sprite file.
Excerpt
<script language="JavaScript1.1" type="text/javascript">
current = 0;
curr_step = 0;
var img_ary = Array();
var link_ary = Array();
link_ary[0] = "specials.listener_rewards";
link_ary[1] = "rbfilm.home";
link_ary[2] = "rb.show_imprint&show_by=imprint&imprint=audiolibros";
link_ary[3] = "scholar.home";
link_ary[4] = "specials.editors_pick&pick=Identical_Strangers";
link_ary[5] = "<cfoutput>#app_url#</cfoutput>/pdf_brochures/consumer/Oct08_Tabloid.pdf";
var sprite_cellwidth = 145;
var sprite_cellheight = 281;
var sprite_cellnum = 6; // there are 14 cells in the sprite sheet
var animId;
function showcell(x, y, id)
{
var el = document.getElementById(id);
// the cx and cy are negative because we are shifting the left top corner
var cx = -(x * sprite_cellwidth);
var cy = -(y * sprite_cellheight);
el.style.backgroundImage = "url(images/rotating_square.png)";
el.style.backgroundPosition = cx + "px " + cy + "px";
}
// this isn't exactly generic -
function doRotateAnim(step)
{
// Stop the last animation
clearTimeout(animId);
showcell((step % sprite_cellnum), 0, 'rotating_sqr');
cur_step = step;
animId = setTimeout('doRotateAnim(' + (step + 1) + ');', 4500);
}
function goAnimURL(id) {
var el = document.getElementById(id);
x = cur_step % sprite_cellnum;
if (link_ary[x].indexOf('http:') > -1) {
document.location.href = link_ary[x];
}
else {
document.location.href ="index.cfm?fuseaction=" + link_ary[x];
}
}
</script>
RSS Import
Use ColdFusion to import the school division WordPress blog to display on RB School Homepage. Designed to keep a version locally
until it is updated to reduce cfhttp calls to WordPress.
RB School Home Page
Flash
A flash image carousel to display featured books, reading from an XML file generated by a scheduled ColdFusion script.
Based heavily on tutorials from goandlearn.com.
Excerpt
Flex
Flex vertical accorion menu for the RB consumer site.
Excerpt