.JS File not loading in Firefox

[robroy]

I tried to post on Mozilla's forum but I ran out of space, so I'll give this a try and thanks in advance... :) Also, I've googled til I cannot google anymore, so please be kind. :D

I'm trying to call a .js file in my header where javascript would be defined, the .js file is a countdown timer that I found on the Internet a few months back and it seemed to work at the time in both Firefox and IE (still works in IE), but not in Firefox (now) and to be fair, it isn't working in Safari either. I've tested in both Win7 and XP sp3. The .js file (tzcount.js) is the following:

// start of script

// ****  Time Zone Count Down Javascript  **** //
/*
Visit [url]http://rainbow.arch.scriptmania.com/scripts/[/url]
 for this script and many more
*/

////////// CONFIGURE THE COUNTDOWN SCRIPT HERE //////////////////

var month = '9';     //  '*' for next month, '0' for this month or 1 through 12 for the month 
var day = '4';        //  Offset for day of month day or + day  
var hour = 19;        //  0 through 23 for the hours of the day
var tz = -6;          //  Offset for your timezone in hours from UTC
var lab = 'tzcd';      //  The id of the page entry where the timezone countdown is to show

function start() {displayTZCountDown(setTZCountDown(month,day,hour,tz),lab);}

    // **    The start function can be changed if required   **
window.onload = start;

////////// DO NOT EDIT PAST THIS LINE //////////////////

function setTZCountDown(month,day,hour,tz) 
{
var toDate = new Date();
if (month == '*')toDate.setMonth(toDate.getMonth() + 1);
else if (month > 0) 
{ 
if (month <= toDate.getMonth())toDate.setYear(toDate.getYear() + 1);
toDate.setMonth(month-1);
}
if (day.substr(0,1) == '+') 
{var day1 = parseInt(day.substr(1));
toDate.setDate(toDate.getDate()+day1);
} 
else{toDate.setDate(day);
}
toDate.setHours(hour);
toDate.setMinutes(0-(tz*60));
toDate.setSeconds(0);
var fromDate = new Date();
fromDate.setMinutes(fromDate.getMinutes() + fromDate.getTimezoneOffset());
var diffDate = new Date(0);
diffDate.setMilliseconds(toDate - fromDate);
return Math.floor(diffDate.valueOf()/1000);
}
function displayTZCountDown(countdown,tzcd) 
{
if (countdown < 0) document.getElementById(tzcd).innerHTML = "<marquee>THE TIME HAS COME!!!</marquee>"; 
else {var secs = countdown % 60; 
if (secs < 10) secs = '0'+secs;
var countdown1 = (countdown - secs) / 60;
var mins = countdown1 % 60; 
if (mins < 10) mins = '0'+mins;
countdown1 = (countdown1 - mins) / 60;
var hours = countdown1 % 24;
var days = (countdown1 - hours) / 24;
document.getElementById(tzcd).innerHTML = days + " day" + (days == 1 ? '' : 's') + ' + ' +hours+ 'h : ' +mins+ 'm : '+secs+'s';
setTimeout('displayTZCountDown('+(countdown-1)+',\''+tzcd+'\');',999);
}
}
//end of script

I have this in the header of the webpage:

<SCRIPT src="tzcount.js" type="text/javascript"></SCRIPT>

This is in the body to call the script inside of a table:

<tr>
    <td></td>
    <td bgcolor="#dc143c">
      <center><font color="#ffffff"><SPAN id="tzcd"></SPAN></font></center></td>	
	<td></td>
    </tr>

All that shows is a thin red line (the bgcolor for the cell).... it's suppose to display a countdown timer... this works in IE and I implore someone to try this out. If anyone has suggestions on how I can correct this, I'd appreciate it. For the record, it will work if I include the whole javascript in the header without calling the .js file, but I want it to work the .js call for portability.

Thanks,
Rob

[Graphix]

On the end of the script you need to put the following line:

window.onload=start();

And you can include the script the following:

<script type="text/javascript" src="tzcount.js"></script>

~G

[robroy]

Concerning the PM's I got, how many times do you guys have to post automated PM's from 2 different people, 3 being from the same person about my tagging? I appreciate the corrections and sorry I did not have time to read the long list of policies but I felt what I posted was within reason, but now I know.

Thanks,
Rob

[robroy]

On the end of the script you need to put the following line:

window.onload=start();

I have this in the beginning of the .js file, are you saying it needs to be at the end of it? Like I said in my original post, this works fine in IE but not Firefox. Now I tried to include the () but it was to no avail since it was left out of the 'window.onload' I had.

And you can include the script the following:

<script type="text/javascript" src="tzcount.js"></script>

~G

I have this in the header of my html page, I posted this. I'd appreciate some clarification and thanks for the reply. :)

-Rob

[Graphix]

It works perfectly in my own firefox browser. Perhaps you should update your firefox browser? Anyway, just to make sure, use the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript" src="tzcount.js"></script>
</head>
<body style="background-color:white;">
<span id="tzcd" style="color:navy;"></span>
</body>
</html>

And make sure the tzcount.js is the following:

// start of script

// ****  Time Zone Count Down Javascript  **** //
/*
Visit <a rel="nofollow" class="t" href="http://rainbow.arch.scriptmania.com/scripts/" target="_blank">http://rainbow.arch.scriptmania.com/scripts/</a>
 for this script and many more
*/

////////// CONFIGURE THE COUNTDOWN SCRIPT HERE //////////////////

var month = '9';     //  '*' for next month, '0' for this month or 1 through 12 for the month 
var day = '4';        //  Offset for day of month day or + day  
var hour = 19;        //  0 through 23 for the hours of the day
var tz = -6;          //  Offset for your timezone in hours from UTC
var lab = 'tzcd';      //  The id of the page entry where the timezone countdown is to show

function start() {displayTZCountDown(setTZCountDown(month,day,hour,tz),lab);}

    // **    The start function can be changed if required   **
window.onload = start;

////////// DO NOT EDIT PAST THIS LINE //////////////////

function setTZCountDown(month,day,hour,tz) 
{
var toDate = new Date();
if (month == '*')toDate.setMonth(toDate.getMonth() + 1);
else if (month > 0) 
{ 
if (month <= toDate.getMonth())toDate.setYear(toDate.getYear() + 1);
toDate.setMonth(month-1);
}
if (day.substr(0,1) == '+') 
{var day1 = parseInt(day.substr(1));
toDate.setDate(toDate.getDate()+day1);
} 
else{toDate.setDate(day);
}
toDate.setHours(hour);
toDate.setMinutes(0-(tz*60));
toDate.setSeconds(0);
var fromDate = new Date();
fromDate.setMinutes(fromDate.getMinutes() + fromDate.getTimezoneOffset());
var diffDate = new Date(0);
diffDate.setMilliseconds(toDate - fromDate);
return Math.floor(diffDate.valueOf()/1000);
}
function displayTZCountDown(countdown,tzcd) 
{
if (countdown < 0) document.getElementById(tzcd).innerHTML = "<marquee>THE TIME HAS COME!!!</marquee>"; 
else {var secs = countdown % 60; 
if (secs < 10) secs = '0'+secs;
var countdown1 = (countdown - secs) / 60;
var mins = countdown1 % 60; 
if (mins < 10) mins = '0'+mins;
countdown1 = (countdown1 - mins) / 60;
var hours = countdown1 % 24;
var days = (countdown1 - hours) / 24;
document.getElementById(tzcd).innerHTML = days + " day" + (days == 1 ? '' : 's') + ' + ' +hours+ 'h : ' +mins+ 'm : '+secs+'s';
setTimeout('displayTZCountDown('+(countdown-1)+',\''+tzcd+'\');',999);
}
}
//end of script

And make sure that they are in the same folder.

Try it out and see what happens

~G

[robroy]

It appears I have some playing around to do, I extracted out the basics from the code I use and this works in IE and Firefox:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=unicode">
<meta http-equiv="Imagetoolbar" content="no">
<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
<meta content="MSHTML 6.00.6000.16945" name="GENERATOR">
<SCRIPT src="tzcount.js" type="text/javascript"></SCRIPT>
</head>
<body>
<div id="bg"><img height="100%" alt="" src="Images/marble.gif" width="100%"></div>
<div id="content">
<table style="WIDTH: 914px; HEIGHT: 322px" cellspacing="0" cellpadding="3" width="914" 
align=center border=0>
<tbody>
<tr>
    <td></td>
    <td style="background-color:red;">
      <center><SPAN id="tzcd" style="color:white;"></SPAN></center></td>	
	<td></td>
</tr>
</tbody>
</div><br></body></html>

This was extracted from what I was willing to share and for it to work so I obviously have a few walls in what my orginal code contains thats preventing Firefox from displaying it correctly. If I figure it out, I'll post what I find.

Thanks for the help,
Rob

[kokoro90]

One question: why are you using uppercase letters (<SCRIPT...>) instead of lowercase, which is required by your doctype of choice, XHTML. I don't know if that causes Firefox not to load it, but it should be changed anyway in order to be compliant with the standard. Several posters above put that in their examples correctly, they just did not call out the capitalization issue with your code.

[robroy]

One question: why are you using uppercase letters (<SCRIPT...>) instead of lowercase, which is required by your doctype of choice, XHTML. I don't know if that causes Firefox not to load it, but it should be changed anyway in order to be compliant with the standard. Several posters above put that in their examples correctly, they just did not call out the capitalization issue with your code.

I've tested the above in Firefox and it does work. I posted that I have other code on the webpage that could be causing the problem and that I'll have to T and E it (trial and error).

I really don't think that makes a difference, but everyone is entitled to their opinion.

Thanks,
Rob

[Troy III]

I tried to post on Mozilla's forum but I ran out of space, so I'll give this a try and thanks in advance... :) Also, I've googled til I cannot google anymore, so please be kind. :D

I'm trying to call a .js file in my header where javascript would be defined, the .js file is a countdown timer that I found on the Internet a few months back and it seemed to work at the time in both Firefox and IE (still works in IE), but not in Firefox (now) and to be fair, it isn't working in Safari either. I've tested in both Win7 and XP sp3. The .js file (tzcount.js) is the following:

// start of script

// ****  Time Zone Count Down Javascript  **** //
/*
Visit [url]http://rainbow.arch.scriptmania.com/scripts/[/url]
 for this script and many more
*/

////////// CONFIGURE THE COUNTDOWN SCRIPT HERE //////////////////

var month = '9';     //  '*' for next month, '0' for this month or 1 through 12 for the month 
var day = '4';        //  Offset for day of month day or + day  
var hour = 19;        //  0 through 23 for the hours of the day
var tz = -6;          //  Offset for your timezone in hours from UTC
var lab = 'tzcd';      //  The id of the page entry where the timezone countdown is to show

function start() {displayTZCountDown(setTZCountDown(month,day,hour,tz),lab);}

    // **    The start function can be changed if required   **
window.onload = start;

////////// DO NOT EDIT PAST THIS LINE //////////////////

function setTZCountDown(month,day,hour,tz) 
{
var toDate = new Date();
if (month == '*')toDate.setMonth(toDate.getMonth() + 1);
else if (month > 0) 
{ 
if (month <= toDate.getMonth())toDate.setYear(toDate.getYear() + 1);
toDate.setMonth(month-1);
}
if (day.substr(0,1) == '+') 
{var day1 = parseInt(day.substr(1));
toDate.setDate(toDate.getDate()+day1);
} 
else{toDate.setDate(day);
}
toDate.setHours(hour);
toDate.setMinutes(0-(tz*60));
toDate.setSeconds(0);
var fromDate = new Date();
fromDate.setMinutes(fromDate.getMinutes() + fromDate.getTimezoneOffset());
var diffDate = new Date(0);
diffDate.setMilliseconds(toDate - fromDate);
return Math.floor(diffDate.valueOf()/1000);
}
function displayTZCountDown(countdown,tzcd) 
{
if (countdown < 0) document.getElementById(tzcd).innerHTML = "<marquee>THE TIME HAS COME!!!</marquee>"; 
else {var secs = countdown % 60; 
if (secs < 10) secs = '0'+secs;
var countdown1 = (countdown - secs) / 60;
var mins = countdown1 % 60; 
if (mins < 10) mins = '0'+mins;
countdown1 = (countdown1 - mins) / 60;
var hours = countdown1 % 24;
var days = (countdown1 - hours) / 24;
document.getElementById(tzcd).innerHTML = days + " day" + (days == 1 ? '' : 's') + ' + ' +hours+ 'h : ' +mins+ 'm : '+secs+'s';
setTimeout('displayTZCountDown('+(countdown-1)+',\''+tzcd+'\');',999);
}
}
//end of script

I have this in the header of the webpage:

<SCRIPT src="tzcount.js" type="text/javascript"></SCRIPT>

This is in the body to call the script inside of a table:

<tr>
    <td></td>
    <td bgcolor="#dc143c">
      <center><font color="#ffffff"><SPAN id="tzcd"></SPAN></font></center></td>	
	<td></td>
    </tr>

All that shows is a thin red line (the bgcolor for the cell).... it's suppose to display a countdown timer... this works in IE and I implore someone to try this out. If anyone has suggestions on how I can correct this, I'd appreciate it. For the record, it will work if I include the whole javascript in the header without calling the .js file, but I want it to work the .js call for portability.

Thanks,
Rob

you are using the <marquee> tag.
ff has disabled it.
but anyway it never worked correctly.

here is the way to enable it - but this will not solve your problem...

[robroy]

you are using the <marquee> tag.
ff has disabled it.
but anyway it never worked correctly.

here is the way to enable it - but this will not solve your problem...

I appreciate your feedback concerning that, but I have no problems in FF with the marquee tag, it works just fine. I finally broke down and copy and pasted into a new HTML doc using Sharepoint Designer and now the problem has been corrected (complete with the <marquee>). I'm assuming there was some jargon left in the code from a previous WYSIWYG that prevented the .js from operating but all seems fine now.

I saw your link and it must have been corrected in the latest versions, I'm on 3.5.8 and have never had to "enable" the marquee functionality, even going back to earlier v3 releases.

Thanks,
Rob

[Troy III]

I appreciate your feedback concerning that, but I have no problems in FF with the marquee tag, it works just fine. I finally broke down and copy and pasted into a new HTML doc using Sharepoint Designer and now the problem has been corrected (complete with the <marquee>). I'm assuming there was some jargon left in the code from a previous WYSIWYG that prevented the .js from operating but all seems fine now.

I saw your link and it must have been corrected in the latest versions, I'm on 3.5.8 and have never had to "enable" the marquee functionality, even going back to earlier v3 releases.

Thanks,
Rob

Glad to hear that :') take care