EDITED: added one line to set_ajax_obs to avoid JavaScript errors trying to update when a <span id="ajax..." class="ajax"> is missing in the HTML.
EDITED: reflects V1.04 code with error checking
---------------------------------------------------------------------------
Whew! Verstion 1.03 with XHTML 1.0-Strict compliant code is now available and tested with IE6-SP2, IE7, Firefox 2.0, Navigator 7, and Opera 8. It also passes the validator at
http://validator.w3.org/check?uri=http%3A%2F%2Fsaratoga-weather.org%2Fajax-testpage.phpDownload from
http://saratoga-weather.org/scripts-WD-AJAX.php (look near the middle of the long page for the download link.
I've updated the sample instructions and sample file set for AJAX 'green-flash' for changed conditions only and added a section there on how to update your current AJAX template set to use the new green-flash code.
The bulk of the mod is to use a small function to update the page (instead of changing innerHTML directly). The function (set_ajax_obs) will retrieve the prior value, set the new value and change the color if prior != current. The prior value is stored as an attribute in the span tag as 'lastobs="value"' by the JavaScript setAttribute function. Then a timer-driven reset_ajax_color('') routine locates all the <span class="ajax"> tags and removes the green color after 2 seconds (adjustable).
Note: if you'd been an early adopter, and already changed your <span id="ajax..."> tags to have 'name="ajax", you'll have to change them again (sorry) to "class="ajax" and remove the 'name='. And.. copy in the new main flash-green code below. This makes it XHTML 1.0-Strict compliant.
Here's the
revised instructions V1.03 for how to fit 'green-flash-on-change' into your WD AJAX page:
First, change
all of the <span id="..."> tags used for AJAX substitution in your page (that you want to 'green-flash') to also have a
class="ajax" tag so something like
<span id="ajaxtemp"> becomes
<span class="ajax" id="ajaxtemp">Second, copy this
// --- added flash-green on data update functions - saratoga-weather.org 24-Nov-2006
// -- begin settings
var flashcolor = '#00CC00'; // color to flash for changed observations
var flashtime = '2000'; // miliseconds to keep flash color on (2000 = 2 seconds);
// -- end of settings
var ie4=document.all;
var browser = navigator.appName;
function get_ajax_tags ( ) {
// search all the span tags and return the list with class="ajax" in it
//
if (ie4 && browser != "Opera") {
var elem = document.body.getElementsByTagName('span');
var lookfor = 'className';
} else {
var elem = document.getElementsByTagName('span');
var lookfor = 'class';
}
var arr = new Array();
for(i = 0,iarr = 0; i < elem.length; i++) {
att = elem[i].getAttribute(lookfor);
if(att == 'ajax') {
arr[iarr] = elem[i];
iarr++;
}
}
return arr;
}
function reset_ajax_color( usecolor ) {
// reset all the <span class="ajax"...> styles to have no color override
var elements = get_ajax_tags();
var numelements = elements.length;
for (var index=0;index!=numelements;index++) {
var element = elements[index];
element.style.color=usecolor;
}
}
function set_ajax_obs( name, value ) {
// store away the current value in both the doc and the span as lastobs="value"
// change color if value != lastobs
var element = document.getElementById(name);
if (! element ) { return; } // V1.04 -- don't set if missing the <span id=name> tag
var lastobs = element.getAttribute("lastobs");
element.setAttribute("lastobs",value);
if (value != lastobs) {
element.style.color=flashcolor;
}
element.innerHTML = value;
}
// --- end of flash-green functions before the
// main AJAX routine .. load and format clientraw.txt
function ajaxLoader(url) {
if (document.getElementById) {
var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(url);
} lines.
Then add this line
setTimeout("reset_ajax_color('')",flashtime); // change text back to default color after 2 secs
just above the
setTimeout("ajaxLoader('clientraw.txt?'+new Date())", 5000); // get new data after 5 secs
}
} // end ajaxLoader functionNow the hard part.. you have to replace
all of your lines in the JavaScript with assignment of .innerHTML with a call to the set_ajax_obs function to enable the green-flash to work. So a line like this in the JavaScript
document.getElementById("ajaxgust").innerHTML = gust.toFixed(1); would be changed to
set_ajax_obs("ajaxgust",gust.toFixed(1)); Then your existing template should work with 'green flash' for changed conditions.
I did add a little feature - an '@' in front of the date/time stamp that ALWAYS turns green when the AJAX script has retrieved data. It's nice to see the script is working even when WD clientraw update is pausing for main ftp update
You can add this feature to your template too by adding
<span class="ajax" id="ajaxindicator"><strong>@</strong></span> in the HTML of the page where you'd like the indicator to appear, then add
element = document.getElementById("ajaxindicator");
if (element) { // V1.04 set indicator if <span id="ajaxindicator" class="ajax"> exists
element.style.color = flashcolor;
} just before the
}
}
x.open("GET", url, true);
x.send(null);
//get all of them every minute = 5000 milliseconds
//edit the location of your clienraw.txt twice!! (here and in the body onload)
setTimeout("reset_ajax_color()",flashtime); // change text back to default color
setTimeout("ajaxLoader('clientraw.txt?'+new Date())", 5000); // get new data after 5 secs
}
} // end ajaxLoader functionMy homepage and conditions sidebar have been updated with green-flash-on-change.
Thanks again to krevinaz for the nudge to get it XHTML 1.0-Strict compliant.
Best regards,
Ken
