External javascript not working in Firefox

theMAD2 · 30 Jan 2006 at 13:00

Hi,

I've added this javascript to my webpage, however it won't display in Firefox. Is there anyway of getting it to work?

This is in the head of the html

Code:

<script src="countdown-clock.js" type="text/javascript"></script>

This is in the external javascript

Code:

function countdown_clock(year, month, day, hour, minute, format)
         {
         html_code = '<span id="countdown"> </span>';
         
         document.write(html_code);
         
         countdown(year, month, day, hour, minute, format);                
         }
         
function countdown(year, month, day, hour, minute, format)
         {
         Today = new Date();
         Todays_Year = Today.getFullYear() - 2000;
         Todays_Month = Today.getMonth() + 1;                  
         
         //Convert both today's date and the target date into miliseconds.                           
         Todays_Date = (new Date(Todays_Year, Todays_Month, Today.getDate(), 
                                 Today.getHours(), Today.getMinutes(), Today.getSeconds())).getTime();                                 
         Target_Date = (new Date(year, month, day, hour, minute, 00)).getTime();                  
         
         //Find their difference, and convert that into seconds.                  
         Time_Left = Math.round((Target_Date - Todays_Date) / 1000);
         
         if(Time_Left < 0)
            Time_Left = 0;
         
         switch(format)
               {
               case 0:
                    //The simplest way to display the time left.
                    document.all.countdown.innerHTML = Time_Left + ' seconds';
                    break;
               case 1:
                    //More datailed.
                    days = Math.floor(Time_Left / (60 * 60 * 24));
                    Time_Left %= (60 * 60 * 24);
                    hours = Math.floor(Time_Left / (60 * 60));
                    Time_Left %= (60 * 60);
                    minutes = Math.floor(Time_Left / 60);
                    Time_Left %= 60;
                    seconds = Time_Left;
                    
                    dps = 's'; hps = 's'; mps = 's'; sps = 's';
                    //ps is short for plural suffix.
                    if(days == 1) dps ='';
                    if(hours == 1) hps ='';
                    if(minutes == 1) mps ='';
                    if(seconds == 1) sps ='';
                    
                    document.all.countdown.innerHTML = days + ' day' + dps + ' ';
                    document.all.countdown.innerHTML += hours + ' hour' + hps + ' ';
                    document.all.countdown.innerHTML += minutes + ' minute' + mps + ' and ';
                    document.all.countdown.innerHTML += seconds + ' second' + sps;
                    break;
               default: 
                    document.all.countdown.innerHTML = Time_Left + ' seconds';
               }
               
         //Recursive call, keeps the clock ticking.
         setTimeout('countdown(' + year + ',' + month + ',' + day + ',' + hour + ',' + minute + ',' + format + ');', 1000);
         }

This is in the body of the html where I want the script to display

Code:

<script type="text/javascript">countdown_clock(07, 07, 1, 00, 00, 1);</script>

Any help would be appreciated

roboffer · 30 Jan 2006 at 13:08

Works for me in both IE and FF. You got the javascript file name and location correct?

theMAD2 · 30 Jan 2006 at 13:15

Yeah it's in the root so it should be ok. It works in my IE, but I have tried it on two machines here using Firefox and no joy. Any ideas?

iCraig · 30 Jan 2006 at 13:16

Are you using the latest version of Firefox?

theMAD2 · 30 Jan 2006 at 13:18

Think so, version 1.5

theMAD2 · 30 Jan 2006 at 13:22

At the top do I link the external javascript file using <link> rather than <script>? Similar to an external style sheet?

roboffer · 30 Jan 2006 at 13:40

No. Post your HTML here so we can have a gander. Have you used the Javascript Console in FF to check for errors?

theMAD2 · 30 Jan 2006 at 13:44

I found this error in the console:

Error: uncaught exception: Permission denied to call method Location.toString

roboffer · 30 Jan 2006 at 14:06

I cant see that line in that javascript, do you have other javascript on the page?

theMAD2 · 30 Jan 2006 at 14:24

I guess so, that's the only error in there anyway.

The script link in in the head in between a meta tag and the style sheet link:

Code:

<meta name="description" content="Website details" />

<script src="countdown-clock.js" type="text/javascript"></script>

<link href="../screen.css" media="screen" rel="stylesheet" type="text/css" />

and the script is in a div on the page in the body

Code:

<div id="infobar"><script type="text/javascript">countdown_clock(07, 07, 1, 00, 00, 1);</script>&nbsp;remaining</div>

roboffer · 30 Jan 2006 at 14:29

Create a new page using the following, does it work?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="countdown-clock.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">countdown_clock(07, 07, 1, 00, 00, 1);</script>
</body>
</html>

theMAD2 · 30 Jan 2006 at 14:32

Yes mate, that one works. Any ideas what it is?

roboffer · 30 Jan 2006 at 14:36

I think it might be the div and extra bits and bobs surrounding the js on your page, try adding them then retrying.

If it fails and you need that div, try changing all occurences of document.all.countdown.innerHTML to document.getElementById('infobar').innerHTML

theMAD2 · 30 Jan 2006 at 15:37

Thanks for your help, I'll have a play around with it. I know the site will mainly be used by IE users (it's an internal website) so it's not a problem. I just like to get these things right

roboffer · 30 Jan 2006 at 16:11

Theres no reason for it not to be working in FF, the actual code works it whatever you are doing to it that doesnt! If you get into a scenario like this, revert back to a working copy and add things in piece by piece until it breaks. Then debug (Lots of alerts in JS does the trick plus the FF JS console) to find out what is wrong, then continue.

theMAD2 · 30 Jan 2006 at 16:35

I think I have found the error:
Error: document.all has no properties
Source File: countdown-clock.js
Line: 50

and line 50 reads:
document.all.countdown.innerHTML = days + ' day' + dps + ' ';

Strange though because the code you gave me to paste works. Does this shed any light?

roboffer · 31 Jan 2006 at 08:44

Is this after youve dropped in the div? As I explained in post #13?

theMAD2 · 31 Jan 2006 at 08:58

Just changed the bits in the .js file and it's working now, but all other text in the div has gone. The other text is there for the first second, but it then vanishes. The script is also inside another div but that isn't working (only the bit in the id="infobar" is). Is there anyway I can get it working in everything in firefox?

Thanks for your help mate, unfortunately I have no experience of Javascript so I find these problems hard to solve.

theMAD2 · 31 Jan 2006 at 09:06

I guess it's some sort of bug in Firefox. What I have I have done now is put the script inside a <span id="countdown"></span> and changed the reference in the Javascript from "infobar" to "countdown" and this seems to work. Either it's a bug in Firefox or IE lets you get away with sloppy code

Thanks a lot for all your help, really appreciate it!