chrisale
Joined: 09 Nov 2005
Posts: 187
|
 Posted: Wed Dec 28, 2005 6:39 pm Post subject: Adding "Alert" colours to webpage |
 |
|
We've had a wild and windy Christmas for weather around here.. so it made me think it would be cool to include color coded alerts on the webpage when values got over a certain point.
Part of the Environment Canada Severe Weather watcher package includes some levels for when to report severe weather... 85km/h wind being one... 50mm of rain in 12hours (or 100mm/24hrs) being another.
So with that in mind, I used javascript to change the background color of the div elements in my frontpage table.
I made three "levels"... yellow, orange and red... with one additional "blue" for when there is rain currently falling.
You can see the effect right now (Dec 28,2005) on my page for the High Wind value:
http://www.alberniweather.ca
Here's the javascript code in the index.htx file:
| Code: |
function changeColor() {
var windspeed = <!--windSpeed-->;
var hiwindspeed = <!--hiWindSpeed-->;
var rainvalue = <!--dailyRain-->;
var stormvalue = <!--stormRain-->;
var rainratevalue = <!--rainRate-->;
var hirainratevalue = <!--hiRainRate-->;
var windvar = document.getElementById('wind');
var hiwindvar = document.getElementById('hiwind');
var rainvar = document.getElementById('rain');
var stormvar = document.getElementById('storm');
var rainratevar = document.getElementById('rainrate');
var hirainratevar = document.getElementById('hirainrate');
//////////////WindSpeed Warning Check/////////////////////////
if (windspeed >= 35 && windspeed < 50) {
windvar.style.backgroundColor = '#F2EEBE';
}
if (windspeed >= 50 && windspeed < 85) {
windvar.style.backgroundColor = '#FFBB48';
}
if (windspeed >= 85) {
windvar.style.backgroundColor = '#FF3B44';
}
//////////////High WindSpeed Warning Check/////////////////////////
if (hiwindspeed >= 35 && hiwindspeed < 50) {
hiwindvar.style.backgroundColor = '#F2EEBE';
}
if (hiwindspeed >= 50 && hiwindspeed < 85) {
hiwindvar.style.backgroundColor = '#FFBB48';
}
if (hiwindspeed >= 85) {
hiwindvar.style.backgroundColor = '#FF3B44';
}
//////////////Rain Warning Check/////////////////////////
if (rainvalue >= 45 && rainvalue < 75) {
rainvar.style.backgroundColor = '#F2EEBE';
}
if (rainvalue >= 75 && rainvalue < 100) {
rainvar.style.backgroundColor = '#FFBB48';
}
if (rainvalue >= 100) {
rainvar.style.backgroundColor = '#FF3B44';
}
//////////////Storm Rain Warning Check/////////////////////////
if (stormvalue >= 100 && stormvalue < 150) {
stormvar.style.backgroundColor = '#F2EEBE';
}
if (stormvalue >= 150 && stormvalue < 200) {
stormvar.style.backgroundColor = '#FFBB48';
}
if (stormvalue >= 200) {
stormvar.style.backgroundColor = '#FF3B44';
}
//////////////Current Rain Rate Warning Check/////////////////////////
if (rainratevalue > 0 && rainratevalue < 10) {
rainratevar.style.backgroundColor = '#5EBBFF';
}
if (rainratevalue >= 10 && rainratevalue < 25) {
rainratevar.style.backgroundColor = '#F2EEBE';
}
if (rainratevalue >= 25 && rainratevalue < 50) {
rainratevar.style.backgroundColor = '#FFBB48';
}
if (rainratevalue >= 50) {
rainratevar.style.backgroundColor = '#FF3B44';
}
//////////////High Rain Rate Warning Check/////////////////////////
if (hirainratevalue >= 25 && hirainratevalue < 50) {
hirainratevar.style.backgroundColor = '#F2EEBE';
}
if (hirainratevalue >= 50 && hirainratevalue < 75) {
hirainratevar.style.backgroundColor = '#FFBB48';
}
if (hirainratevalue >= 75) {
hirainratevar.style.backgroundColor = '#FF3B44';
}
}
|
make sure you add an "onload" on the body tag so that the function runs *after* the page is loaded... otherwise none of this will work
| Code: |
<body onload="changeColor();">
|
And all that is needed for the divs is to add an id tage with the corresponding name as appears in the "getElementsByID"
for example:
| Code: |
<div class="even" id="wind">
Wind<br><!--windDirection--> at
<!--windSpeed--> <!--windUnit--> </span>
</div>
|
This should be able to be applied to the original tables in the stock wview installation as well... if you add an "id" tag to the TD or TH elements that contain the values you want to highlight, it should work exactly the same way.  |
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
