wviewweather.com Forum Index wviewweather.com
wview and Weather Topics
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

Adding "Alert" colours to webpage

 
Post new topic   Reply to topic    wviewweather.com Forum Index -> Web Sites and HTML Templates
View previous topic :: View next topic  
Author Message
chrisale



Joined: 09 Nov 2005
Posts: 187

PostPosted: Wed Dec 28, 2005 6:39 pm    Post subject: Adding "Alert" colours to webpage Reply with quote

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-->&nbsp;&nbsp;at&nbsp;&nbsp;
<!--windSpeed-->&nbsp;<!--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. Smile
Back to top
View user's profile Send private message MSN Messenger
Display posts from previous:   
Post new topic   Reply to topic    wviewweather.com Forum Index -> Web Sites and HTML Templates All times are GMT - 6 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group