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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.13947 seconds
  • Memory Usage 2,891KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (2)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (2)postbit
  • (2)postbit_onlinestatus
  • (2)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (73):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates