I am trying to use a piece of JavaScript inside a Text/HTML module.
Its a countdown clock and it fails to display all the countdown numbers in IE 6,7,8 and 9).
It does work ok in all Non-IE Browsers and IE 10, but not in older versions of IE.
However it does work when used outside DNN environment (on all browsers and all version of IE).
This is the Header bit and the JavaScript code (I've placed it inside Settings >> Advanced Settings):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/countdown.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var current=" LGPS 2014 is here!"
var year=2014;
var month=04;
var day=01;
var hour=00;
var minute=00;
var tz=0;
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
function countdown(yr,m,d,hr,min){
theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
var today=new Date();
var todayy=today.getYear();
if (todayy < 1000) {todayy+=1900;}
var todaym=today.getMonth();
var todayd=today.getDate();
var todayh=today.getHours();
var todaymin=today.getMinutes();
var todaysec=today.getSeconds();
var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);
var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
var dd=futurestring-todaystring;
var dday=Math.floor(dd/(60*60*1000*24)*1);
var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
document.getElementById('count2').innerHTML=current;
document.getElementById('count2').style.display="inline";
document.getElementById('count2').style.width="390px";
document.getElementById('dday').style.display="none";
document.getElementById('dhour').style.display="none";
document.getElementById('dmin').style.display="none";
document.getElementById('dsec').style.display="none";
document.getElementById('days').style.display="none";
document.getElementById('hours').style.display="none";
document.getElementById('minutes').style.display="none";
document.getElementById('seconds').style.display="none";
document.getElementById('spacer1').style.display="none";
document.getElementById('spacer2').style.display="none";
return;
}
else {
document.getElementById('count2').style.display="none";
document.getElementById('dday').innerHTML=dday;
document.getElementById('dhour').innerHTML=dhour;
document.getElementById('dmin').innerHTML=dmin;
document.getElementById('dsec').innerHTML=dsec;
setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
}
}
</script>
</head>
<body onload="countdown(year,month,day,hour,minute);">
</body>
This is the HTML inside the Text/HTML module editor:
<table background="alldials.png" width="710px" height="105px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="355" cellpadding="0" cellspacing="0" border="0">
<span class="strapline">
<a href="http://www.sypensions.org.uk/FutureLGPSNews/tabid/629/language/en-GB/Default.aspx"><img src="clickHere.png" width="185px" border="0"></a>
</span>
</td>
<td width="355">
<table id="table" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id="count2"></div></td>
</tr>
<tr id="spacer1">
<td align="center"> <div class="numbersD" id="dday"> </div> </td>
<td align="center"> <div class="numbersH" id="dhour"> </div> </td>
<td align="center"> <div class="numbersM" id="dmin"> </div> </td>
<td align="center"> <div class="numbersS" id="dsec"> </div> </td>
</tr>
</table>
</td>
</tr>
</table>
I'm wondering if its to do with the actual doctype on my DotNetNuke page?
Because it does work outside DNN and does work in IE10 and other non-IE browsers in this way above.
thanks,
Mark.