www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript works in plain HTML but not in Joomla module

  1. #1
    Join Date
    Aug 2008
    Posts
    5

    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.

    I thought the problem might have been conflicting variables but I changed all of the variables and it still doesn't work when pasted into a custom HTML module using the Joomla CMS 1.5.

    Due to a restriction in forum posts of 10,000 characters, I will be posting the working single game script in a followup.

    This is the script that I am using an array to store all the remaining games for the season. It works in HTML but doesn't in a Joomla Custom HTML 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;"><span id="openVisitorTeam">Visiting Team</span> vs <span id="openHomeTeam">Home Team</span><br /></span></strong></td>
            </tr>
            <tr>
                <td colspan="6" align="center">&nbsp;<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&amp;gl=us">The Irish Hound</a></span> <br /></strong></td>
            </tr>
            <tr>
                <td colspan="3" align="right"><span id="openVisitorImg">Visitor image</span>&nbsp;</td>
                <td style="width: 50%;" colspan="3" align="left">&nbsp;<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.

    You can see this script in use at http://bamadenver.com.

    If anyone can give me some insight, I would appreciate it.

  2. #2
    Join Date
    Aug 2008
    Posts
    5
    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">&nbsp;<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&amp;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" />&nbsp;</td>
                <td style="width: 50%;" colspan="3" align="left">&nbsp;<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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles