Tsk Mark - Most unlike you ...
You constructed the id the datacell.hover instead but forgot to remove the 'redundant' dataday construct in the part2+=
I tried fitting in Wed Dec 18, but Wed is just that little bit large and makes the cell wrap.
Anyways - here it is, don't forget this is a mod of the original DAJ JavaScript version and will NOT contain any later tweaks or personalisations.
I've commented out 'old' and commented 'new', so there shouldn't be any problems - should there
Edit: Small correction as per marks errata post below.
Code: Select all
// Annual Weather data summary
//
// javascript to process dayfile.txt and produce the table layout
//
// Author: David A Jamieson (daj@findmyinbox.co.uk)
// Version: 1.1
// Updated: 7 March 2011
// Dec 30th 2013 - beteljuice bodge to display Day Of Week
//
// You may use and modify this code freely, however you should continue to
// acknowledge the original author
//
var dayfile='/data/dayfile.txt';
var mn = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var dy = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; // NEW - beteljuice
var label_items = [
['maxtemp', 'Max Temp','Maximum Temperature (°C)',true],
['mintemp', 'Min Temp','Minimum Temperature (°C)',true],
['avgtemp', 'Avg Temp','Average Temperature (°C)',true],
['minmaxt', 'Min/Max Temp','Min / Max Temperature (°C)',true],
['rainfall','Rainfall','Rainfall (mm)',true],
['windgust','Wind Gust','Highest Wind Gust (mph)',true] ];
var tableDiv='#tableData';
var field_delimiter = ",";
var date_delimiter = "/";
// ----------------------------------------------------
// Nothing to edit below here
function drawCalendar(tableYear,whatdata){
var tablelayout='<div id="table_container"><div id="table_menu">';tablelayout+='<ul>'
for(var i=0;i<label_items.length;i++){
if(label_items[i][3]==true){
tablelayout+='<li><a href="javascript:" onclick="drawCalendar('+String(tableYear)+',\''+label_items[i][0]+'\');">'+label_items[i][1]+'</a></li>';
}
}
tablelayout+='</ul>'
tablelayout+='<div id="table_name"><p>';dayfilecol2=0;
switch(whatdata){
case'maxtemp':
tablelayout+=label_items[0][2];
dayfilecol=6;
break;
case'mintemp':
tablelayout+=label_items[1][2];
dayfilecol=4;
break;
case'avgtemp':
tablelayout+=label_items[2][2];
dayfilecol=15;
break;
case'minmaxt':
tablelayout+=label_items[3][2];
dayfilecol=4;
dayfilecol2=6;
break;
case'rainfall':
tablelayout+=label_items[4][2];
dayfilecol=14;
break;
case'windgust':
tablelayout+=label_items[5][2];
dayfilecol=1;
break;
default:tablelayout+='?';
}
tablelayout+='</p></div></div>';
tablelayout+="<table>";
tablelayout+="<tr>";
tablelayout+='<th id="table_year">'+String(tableYear)+'</th>';
for(m=1;m<=12;m++){
tablelayout+='<th ';
if(dayfilecol2>0){tablelayout+='colspan="2" ';}
tablelayout+='id="tc'+(m)+'">'+mn[m-1]+'</th>';
}
tablelayout+="</tr>";
for(d=1;d<=31;d++){
tablelayout+='<tr>';
// OLD tablelayout+='<th id="tr'+d+'">'+d+'</th>';
part1 = '<td id="tr'+d+'">'; // NEW - beteljuice
part2 = ''; // NEW - beteljuice
for(m=1;m<=12;m++){
if(d<=daysInMonth(m,tableYear)){
theDate = new Date(tableYear, m-1, d); // NEW - beteljuice
theDay = dy[theDate.getDay()]; // NEW - beteljuice
part1 += '<span style="display: none;" id="dd'+d+'_'+mn[m-1]+'">'+theDay+'</span>'; // NEW - beteljuice
// OLD tablelayout+='<td class="datacell" datarow="#tr'+d+'" datacol="#tc'+m+'" id="'+d+'-'+mn[m-1]+'">';
part2+='<td class="datacell" dataday="#dd'+d+'_'+mn[m-1]+'" datarow="#tr'+d+'" datacol="#tc'+m+'" id="'+d+'-'+mn[m-1]+'">'; // NEW - beteljuice
if(dayfilecol2>0){
// OLD tablelayout+='<td class="datacell" datarow="#tr'+d+'" datacol="#tc'+m+'" id="'+d+'-'+mn[m-1]+'-2">';
part2+='<td class="datacell" dataday="#dd'+d+'_'+mn[m-1]+'" datarow="#tr'+d+'" datacol="#tc'+m+'" id="'+d+'-'+mn[m-1]+'-2">'; // NEW - beteljuice
}
}
else
{
// OLD tablelayout+='<td class="nondate"';
part2 +='<td class="nondate"'; // NEW - beteljuice
// OLD if(dayfilecol2>0){tablelayout+='colspan="2" ';}
if(dayfilecol2>0){part2+='colspan="2" ';}
// OLD tablelayout+='>';
part2+='>'; // NEW - beteljuice
}
// OLD tablelayout+='</td>';
part2+='</td>'; // NEW - beteljuice
}
// new - stitch the 'row' together
tablelayout+= part1+' '+d+'</th>'+part2; // NEW - beteljuice
tablelayout+='</tr>';
}
tablelayout+='</table></div>';
$(tableDiv).html(tablelayout);
if(dayfilecol2>0){
$(".datacell").addClass('smallfont');
}
$(".datacell").hover(function(){
var trow=$(this).attr("datarow");
var tcol=$(this).attr("datacol");
var tday=$(this).attr("dataday"); // NEW - beteljuice
$(trow).addClass("highlight");
$(tcol).addClass("highlight");
$(this).addClass("highlight");
$(tday).show(); // NEW - beteljuice
},
function(){
var trow=$(this).attr("datarow");
var tcol=$(this).attr("datacol");
var tday=$(this).attr("dataday"); // NEW - beteljuice
$(trow).removeClass("highlight");
$(tcol).removeClass("highlight");
$(this).removeClass("highlight");
$(tday).hide(); // NEW - beteljuice
});
var current_year=-1;
var year_list='<select onchange="drawCalendar(this.value,\''+whatdata+'\');">';
$.get(dayfile,function(data){
var lines=data.split("\n");
$.each(lines,function(n,elem){
wd_data=elem.split(field_delimiter);
the_date=wd_data[0].split(date_delimiter);
if('20'+the_date[2]==String(tableYear)){
data_cell='#'+String(parseInt(the_date[0],10))+'-'+mn[parseInt(the_date[1],10)-1];
$(data_cell).html(wd_data[dayfilecol]);
if(dayfilecol2>0){
$(data_cell+'-2').html(wd_data[dayfilecol2]);
}
if((parseFloat(wd_data[dayfilecol].split(',').join('.'))==0)&&(dayfilecol==14||dayfilecol==1)){
$(data_cell).addClass('zerovalue');
}
}
if(the_date[2]>current_year){
current_year=the_date[2];
year_list+='<option value="';
year_list+='20'+the_date[2]+'"';
if('20'+the_date[2]==String(tableYear)){
year_list+=' selected="selected"';
}
year_list+='>20'+String(the_date[2])+'</option>';
}
});
year_list+='</select>';
$('#table_year').html(year_list);
});
}
function daysInMonth(month,year){
return new Date(year,month,0).getDate();
}
$(document).ready(function(){
var urlParams={};
(function(){
var e,a=/\+/g,r=/([^&=]+)=?([^&]*)/g,d=function(s){
return decodeURIComponent(s.replace(a," "));
},q=window.location.search.substring(1);
while(e=r.exec(q))urlParams[d(e[1])]=d(e[2]);
})();
if(urlParams['year']){
drawYear=urlParams['year'];
}else{
var d=new Date();
var curr_date=d.getDate();
drawYear=d.getFullYear();
}
if(urlParams['data']){
dataSet=urlParams['data'];
}else{
dataSet='maxtemp';
}
drawCalendar(drawYear,dataSet);
});
Enjoy ....
