Javascript works in plain HTML but not in Joomla module
I finally got this Javascript countdown script to work and it displays fine in IE, FireFox and Chrome. However, once I put it in a Joomla module, it doesn't replace the default values with the calculated values at all.
Code:
<table id="openingDay" style="width: 100%; border-collapse: collapse; padding-top: 0pt; padding-bottom: 0pt; border: 1px solid #333333; background-color: #990000; color: #ffffff;" align="center" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td colspan="6" align="center"><strong><span style="font-size: 13px;"><span id="openVisitorTeam">Visiting Team</span> vs <span id="openHomeTeam">Home Team</span><br /></span></strong></td>
</tr>
<tr>
<td colspan="6" align="center"> <strong><span style="font-size: 13px;"><span id="openGameTime">Game Time</span><br />BamaDenver at <a class="countdown" target="_blank" title="Join Us! Click for directions to The Irish Hound" href="http://maps.google.com/places/us/co/denver/st-paul-st/575/-irish-hound-the?hl=en&gl=us">The Irish Hound</a></span> <br /></strong></td>
</tr>
<tr>
<td colspan="3" align="right"><span id="openVisitorImg">Visitor image</span> </td>
<td style="width: 50%;" colspan="3" align="left"> <span id="openHomeImg">Home image</span></td>
</tr>
<tr>
<td width="5%"></td>
<td style="font-size: 18px;" id="countdownDays" align="center" nowrap="nowrap">00</td>
<td style="font-size: 18px;" id="countdownHours" align="center" nowrap="nowrap">00</td>
<td style="font-size: 18px;" id="countdownMinutes" align="center" nowrap="nowrap">00</td>
<td style="font-size: 18px;" id="countdownSeconds" align="center" nowrap="nowrap">00</td>
<td width="5%"></td>
</tr>
<tr>
<td></td>
<td align="center"><span class="countdown_time">Days</span></td>
<td align="center"><span class="countdown_time">Hrs</span></td>
<td align="center"><span class="countdown_time">Min</span></td>
<td align="center"><span class="countdown_time">Sec</span></td>
<td></td>
</tr>
</tbody>
</table>
<script language="JavaScript" type="text/javascript">
<!--
GameRec();
GameSchedule = new Array();
GameSchedule = [
['10/16/2010 7:10:00 PM','Mississippi','http://bamadenver.com/images/stories/logos/opponents/mississippi_rebels.png','Alabama','http://bamadenver.com/images/stories/logos/bama_2008.png','ESPN2'],
['10/23/2010 5:00:00 PM','Alabama','http://bamadenver.com/images/stories/logos/bama_2008.png','Tennessee','http://bamadenver.com/images/stories/logos/opponents/tennessee_volunteers.png','ESPN'],
['11/06/2010 6:00:00 PM','Alabama','http://bamadenver.com/images/stories/logos/bama_2008.png','LSU','http://bamadenver.com/images/stories/logos/opponents/lsu_tigers.png','TBA'],
['11/13/2010 1:00:00 PM','Mississippi State','http://bamadenver.com/images/stories/logos/opponents/mississippi_state_bulldogs.png','Alabama','http://bamadenver.com/images/stories/logos/bama_2008.png','TBA'],
['11/18/2010 5:30:00 PM','Georgia State','http://bamadenver.com/images/stories/logos/opponents/georgia_state_panthers.png','Alabama','http://bamadenver.com/images/stories/logos/bama_2008.png','ESPNU'],
['11/26/2010 12:30:00 PM','Auburn','http://bamadenver.com/images/stories/logos/opponents/auburn_tigers.png','Alabama','http://bamadenver.com/images/stories/logos/bama_2008.png','CBS']
];
function GameRec() {
this.GameTime==' '; // the "this." part is required
this.GameVisitor=' ';
this.GameVisitorImg=' ';
this.GameHome=' ';
this.GameHomeImg=' ';
this.GameBroadcast=' ';
}
function GameRec(cdp1,cdp2,cdp3,cdp4,cdp5,cdp6) {
this.GameTime= (cdp1 != undefined) ? cdp1 : '';
this.GameVisitor= (cdp1 != undefined) ? cdp2 : '';
this.GameVisitorImg= (cdp1 != undefined) ? cdp3 : '';
this.GameHome= (cdp1 != undefined) ? cdp4 : '';
this.GameHomeImg= (cdp1 != undefined) ? cdp5 : '';
this.GameBroadcast= (cdp1 != undefined) ? cdp6 : '';
}
function nextGameDate(RightNow) {
var cdx = GameSchedule.length;
for (var cdz = 0; cdz < cdx; cdz++) {
chkGameDate = new Date(GameSchedule[cdz][0]);
if (chkGameDate > RightNow)
return cdz;
}
return null;
}
//start previous code
RightNow = new Date();
openGameRec = nextGameDate(RightNow);
thisGameDate = new Date(GameSchedule[openGameRec][0]);
thisGameTime = GameSchedule[openGameRec][0];
thisGameVisitor = GameSchedule[openGameRec][1];
thisGameVisitorImg = GameSchedule[openGameRec][2];
thisGameHome = GameSchedule[openGameRec][3];
thisGameHomeImg = GameSchedule[openGameRec][4];
thisGameBroadcast = GameSchedule[openGameRec][5];
var o = document.getElementById("openGameTime")
o.innerHTML = thisGameTime
var o = document.getElementById("openVisitorTeam")
o.innerHTML = thisGameVisitor
var o = document.getElementById("openVisitorImg")
o.innerHTML = "<img style=\"margin-top: 5px; float: right;\" alt=\"visitor image\" src=\"" + thisGameVisitorImg + "\" height=\"61\" />"
var o = document.getElementById("openHomeTeam")
o.innerHTML = thisGameHome
var o = document.getElementById("openHomeImg")
o.innerHTML = "<img style=\"margin-top: 5px; float: left;\" alt=\"visitor image\" src=\"" + thisGameHomeImg + "\" height=\"61\" />"
cdcount();
function cdcount(){
var cdi, cdday, cdhour, cdmin, cdsec;
var cdd1, cdd2, cdd3, cdh1, cdh2, cdm1, cdm2, cds1, cds2;
if (thisGameDate - RightNow > 0) {
cdleft = thisGameDate - RightNow;
} else {
cdleft = RightNow - thisGameDate;
}
cdday = Math.floor(cdleft / 86400000);
cdhour = Math.floor((cdleft % 86400000) / 3600000);
cdmin = Math.floor((cdleft % 86400000) / 60000) % 60;
cdsec = Math.floor((cdleft % 86400000) / 1000) % 60 % 60;
cdd1 = Math.floor(cdday / 100);
cdd2 = Math.floor((cdday % 100) / 10);
cdd3 = cdday % 10;
cdh1 = Math.floor(cdhour / 10);
cdh2 = cdhour % 10;
cdm1 = Math.floor(cdmin / 10);
cdm2 = cdmin % 10;
cds1 = Math.floor(cdsec/10);
cds2 = cdsec % 10;
var cdGameCode = document.getElementById("countdownDays")
cdGameCode.innerHTML = (cdd2*10) + cdd3
cdGameCode = document.getElementById("countdownHours")
cdGameCode.innerHTML = (cdh1*10) + cdh2
cdGameCode = document.getElementById("countdownMinutes")
cdGameCode.innerHTML = (cdm1*10) + cdm2
cdGameCode = document.getElementById("countdownSeconds")
cdGameCode.innerHTML = (cds1*10) + cds2
cdtimer = 1;
clearTimeout(cdtimer);
cdtimer = setTimeout("cdcount()", 1000);
}
</script>
Notice that the working single game script in the followup post display has different variables. These were the initial variables which I changed for the multiple game script which is listed first.http://bamadenver.com .
Single script code that works fine in the Joomla module.
Code:
<table id="openingDay" style="width: 100%; border-collapse: collapse; padding-top: 0pt; padding-bottom: 0pt; border: 1px solid #333333; background-color: #990000; color: #ffffff;" align="center" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td colspan="6" align="center"><strong><span style="font-size: 13px;">Alabama Crimson Tide vs<br /> LSU Tigers<br /></span></strong></td>
</tr>
<tr>
<td colspan="6" align="center"> <strong><span style="font-size: 13px;">Sat, Nov. 6, 2010 - 6:00pm MT Baton Rouge, LA<br />BamaDenver at <a class="countdown" target="_blank" title="Join Us! Click for directions to The Irish Hound" href="http://maps.google.com/places/us/co/denver/st-paul-st/575/-irish-hound-the?hl=en&gl=us">The Irish Hound</a></span> <br /></strong></td>
</tr>
<tr>
<td colspan="3" align="right"><img style="float: right;" alt="Alabama Crimson Tide" src="images/stories/logos/bama_2008.png" width="100" height="78" /> </td>
<td style="width: 50%;" colspan="3" align="left"> <img style="margin-top: 5px; float: left;" alt="lsu_tigers" src="images/stories/logos/opponents/lsu_tigers.png" width="61" height="61" /></td>
</tr>
<tr>
<td width="5%"></td>
<td style="font-size: 18px;" id="Days" align="center" nowrap="nowrap">00</td>
<td style="font-size: 18px;" id="Hours" align="center" nowrap="nowrap">00</td>
<td style="font-size: 18px;" id="Minutes" align="center" nowrap="nowrap">00</td>
<td style="font-size: 18px;" id="Seconds" align="center" nowrap="nowrap">00</td>
<td width="5%"></td>
</tr>
<tr>
<td></td>
<td align="center"><span class="countdown_time">Days</span></td>
<td align="center"><span class="countdown_time">Hrs</span></td>
<td align="center"><span class="countdown_time">Min</span></td>
<td align="center"><span class="countdown_time">Sec</span></td>
<td></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
count();
function count(){
var i, day, hour, min, sec;
var d1, d2, d3, h1, h2, m1, m2, s1, s2;
openDate = new Date("11/06/2010 6:00:00 PM");
now = new Date();
if (openDate - now > 0) {
left = openDate - now;
} else {
left = now - openDate;
}
day = Math.floor(left / 86400000);
hour = Math.floor((left % 86400000) / 3600000);
min = Math.floor((left % 86400000) / 60000) % 60;
sec = Math.floor((left % 86400000) / 1000) % 60 % 60;
d1 = Math.floor(day / 100);
d2 = Math.floor((day % 100) / 10);
d3 = day % 10;
h1 = Math.floor(hour / 10);
h2 = hour % 10;
m1 = Math.floor(min / 10);
m2 = min % 10;
s1 = Math.floor(sec/10);
s2 = sec % 10;
// s3 = Math.floor((left % 86400000) / 100) % 10;
var o = document.getElementById("Days")
o.innerHTML = (d2*10) + d3
o = document.getElementById("Hours")
o.innerHTML = (h1*10) + h2
o = document.getElementById("Minutes")
o.innerHTML = (m1*10) + m2
o = document.getElementById("Seconds")
o.innerHTML = (s1*10) + s2
timer = 1;
clearTimeout(timer);
timer = setTimeout("count()", 1000);
}
</script>
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
Bookmarks