[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 269
  • Last Modified:

Need help moving this javascript to external file

Hello,

I need help moving the following javascript code at the bottom of the post to an external file. I tried doing it myself, and once I do it, it ceases to function at all. I get no error in Firefox when it doesn't work. but in IE6 I get 'eighthword is null or not defined' and it doesn't work.

I took the script located here: https://www.dkpsystem.com/viewthread.php?threadid=3109&p=1#p10311 and modified it a bit. The script works when it's with the rest of the html layout file.

This is what I tried to do:
1) In the header, I put in the following:
<script type="text/javascript" language="JavaScript1.2" src="http://path/to/files/countdown.js"></script>
2) In the code at the bottom of this post, I put everything from the first 'document.write' thru the 't=settimeout line' including all brackets, etc. I properly left out the head, script tags.
3) I left this part:
[quote]<body onload="countdown()">
.................................
<div id="rtcontent" align="center">

</div>[/quote]
In the html file where it was previously.

So why won't this work when moved to an external file? The script is big, messy, and I want it in a seperate file to make editting the main html file easier. I can't use php, or anything else. Just plain old html and javascript.

Any help is appreciated, thank you!
<head>
<script type="text/javascript" language="javascript">
document.write("<div id='raidingtimer'><!--System:CountDown --></div>"); //give the countdown an Id for geting the child <A> tag
 
var maincontent = document.getElementById("raidingtimer"); //Get the parten Id for "thehref"
 
var innercontent = maincontent.innerHTML; //Get the actuall count down timer
 
var thehref = maincontent.getElementsByTagName('a'); //Get the href value for recreating the link
 
var linkstext = thehref[0].innerHTML; //getts the linked text
 
var linkall = "<a href='" + thehref[0] + "'>" + linkstext + "</a>"; //Rebuild the link with a class for changing the style of the link
 
var contentnum = innercontent.match(/(\d+)/g); //Gets all the digits from the countdown and puts them into an array
 
var eighthword = innercontent.split(" "); //splits each word in the countdown into an array
 
var hour = contentnum[0]; //gets the first digit in the "contentnum" array and sets it to hour
var minute = contentnum[1]; //gets the second digit in the "contentnum" array and sets it to minute
var sec = contentnum[2]; //gets the third digit in the "contentnum" array and sets it to sec
 
function countdown(){ //the new dynamic countdown function
alert("[" + divid + "]"); return false;
if (eighthword[7] == "until"){ //finds out if it the counter is going up or down
sec--; //reduce the seconds by 1
var lastwords = ""; //set if a word is needed after the raid title
 
if (sec < "0"){ //the if will reduce the "minute" by 1 if sec reaches less than 0
sec = 59; //resets sec to 59 to continue the countdown
minute--; //reduces minute by 1
}
if (minute < "0"){ //the if will reduce the "hour" by 1 if minute reaches less than 0
minute = 59; //resets minute to 59 to continue the countdown
hour--; //reduces hour by 1
}
if (hour == "0" && minute == "0" && sec == "0") {
document.location.reload() //if the timer reaches all 0's beacuse some left the page up
} //this will reload the page to get the new timer values
}
 
if (eighthword[7] == "since") { //finds out if it the counter is going up or down
sec++; //ups the seconds by 1
var lastwords = " started"; //set if a word is needed after the raid title
 
if (sec == "60"){ //the if will add 1 to the "minute" if sec reaches 60
sec = 0; //resets sec to 0 to continue the countdown
minute++; //adds 1 to the minute
}
if (minute == "60"){ //the if will add 1 to the "hour" if minute reaches 60
minute = 0; //resets minute to 0 to continue the countdown
hour++; //adds 1 to the hour
if (hour >= "2"){
document.location.reload() //as I was unsure when the timer switches to counting down to an event
} // I set this to relaod the page every hour after the first 2 have ellapsed
}
}
var timed = "<span>" + hour + " hours, " + minute + " minutes & " + sec + " seconds " + eighthword[7] + " " + linkall + lastwords + "!" + "</span>"; //writes the new countdown timer
document.getElementById('rtcontent').innerHTML = timed; //places the new countdown timer into the "body" of the page
 
t=setTimeout("countdown()", 1000); //the heart of the countdown timer.
} //if you build you own this is were you will want to start
</script>
</head>
.................................
<body onload="countdown()">
.................................
<div id="rtcontent" align="center">
 
</div>

Open in new window

0
Xerxes321
Asked:
Xerxes321
  • 13
  • 10
  • 6
1 Solution
 
Roger BaklundCommented:
Did you include line 62 with the ending } in your external file?
0
 
Xerxes321Author Commented:
Yes, that's straigh from the file itself.. I left the comments and everything in there until I could get it working.
0
 
Roger BaklundCommented:
I don't understand this script. In line 3 you write a div with id=raidingtimer, containing only a comment. In line 5 you assign that div to maincontent, and in line 9 you try to fetch all A tags within that element... but there are none! Line 11 will then fail, because there is no thehref[0].

Line 24 alerts "divid", which is not defined anywhere, and returns false...?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
BadotzCommented:
Put the code below into "ext1.js" in the same folder as your current page.

In your page, add:

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

That should do it.

Oh, and change <body onload=...

to:

<script type="text/javascript>

function page_load() {
    countdown();
}

window.onload = page_load;
</script>

and the body tag is then:

<body>
document.write("<div id='raidingtimer'><!--System:CountDown --></div>"); //give the countdown an Id for geting the child <A> tag
 
var maincontent = document.getElementById("raidingtimer"); //Get the parten Id for "thehref"
 
var innercontent = maincontent.innerHTML; //Get the actuall count down timer
 
var thehref = maincontent.getElementsByTagName('a'); //Get the href value for recreating the link
 
var linkstext = thehref[0].innerHTML; //getts the linked text
 
var linkall = "<a href='" + thehref[0] + "'>" + linkstext + "</a>"; //Rebuild the link with a class for changing the style of the link
 
var contentnum = innercontent.match(/(\d+)/g); //Gets all the digits from the countdown and puts them into an array
 
var eighthword = innercontent.split(" "); //splits each word in the countdown into an array
 
var hour = contentnum[0]; //gets the first digit in the "contentnum" array and sets it to hour
var minute = contentnum[1]; //gets the second digit in the "contentnum" array and sets it to minute
var sec = contentnum[2]; //gets the third digit in the "contentnum" array and sets it to sec
 
function countdown(){ //the new dynamic countdown function
alert("[" + divid + "]"); return false;
if (eighthword[7] == "until"){ //finds out if it the counter is going up or down
sec--; //reduce the seconds by 1
var lastwords = ""; //set if a word is needed after the raid title
 
if (sec < "0"){ //the if will reduce the "minute" by 1 if sec reaches less than 0
sec = 59; //resets sec to 59 to continue the countdown
minute--; //reduces minute by 1
}
if (minute < "0"){ //the if will reduce the "hour" by 1 if minute reaches less than 0
minute = 59; //resets minute to 59 to continue the countdown
hour--; //reduces hour by 1
}
if (hour == "0" && minute == "0" && sec == "0") {
document.location.reload() //if the timer reaches all 0's beacuse some left the page up
} //this will reload the page to get the new timer values
}
 
if (eighthword[7] == "since") { //finds out if it the counter is going up or down
sec++; //ups the seconds by 1
var lastwords = " started"; //set if a word is needed after the raid title
 
if (sec == "60"){ //the if will add 1 to the "minute" if sec reaches 60
sec = 0; //resets sec to 0 to continue the countdown
minute++; //adds 1 to the minute
}
if (minute == "60"){ //the if will add 1 to the "hour" if minute reaches 60
minute = 0; //resets minute to 0 to continue the countdown
hour++; //adds 1 to the hour
if (hour >= "2"){
document.location.reload() //as I was unsure when the timer switches to counting down to an event
} // I set this to relaod the page every hour after the first 2 have ellapsed
}
}
var timed = "<span>" + hour + " hours, " + minute + " minutes & " + sec + " seconds " + eighthword[7] + " " + linkall + lastwords + "!" + "</span>"; //writes the new countdown timer
document.getElementById('rtcontent').innerHTML = timed; //places the new countdown timer into the "body" of the page
 
t=setTimeout("countdown()", 1000); //the heart of the countdown timer.
}

Open in new window

0
 
BadotzCommented:
Sorry,

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

should of course be:

<script type="text/javascript" src="ext1.js"></script>
0
 
Xerxes321Author Commented:
I can't put them in the same folder, the way the shared hosting is setup. The layout files are in one and my uploaded files go into another folder.
0
 
BadotzCommented:
Then change the path. It isn't rocket science ;-)
0
 
Xerxes321Author Commented:
It didn't work. It messed up the rest of the page layout. Some divs were the wrong size and stuff was moved around. I thought maybe I made a mistake, but I did it again and got the same result.
I don't understand why it works fine if the script isn't in an external file, but fails to load when in an external file.
0
 
BadotzCommented:
Something else is wrong, perhaps?
0
 
Xerxes321Author Commented:
cxr:

It's taking text like this that is generated when the website loads:
10 hours, 50 minutes, and 4 seconds until [Event name with link to event]!

And transforming it so that it counts down in real time until the next event.

'thehref' is the link part of the text.

I can only use plan vanilla html and javascript to do this... Is it not working because it doesn't know what all of stuff like 'maincontent.innerhtml' since it's being placed in an external javascript file?

Like I said, it works fine as is, when placed directly on the page. It's just a big sloppy mess that I wanted to contain to an external file.
0
 
Roger BaklundCommented:
Ok, I see. The server side code replaces <!--System:CountDown --> with the actual countdown timer, including an A tag. But the server will not look into your external file, to do replacement there. You must have System:CountDown tag in the html file.

Try dropping the document.write() from your external file (line 1), and put this into the html file:

<div id='raidingtimer'><!--System:CountDown --></div>
0
 
BadotzCommented:
>>It didn't work. It messed up the rest of the page layout. Some divs were the wrong size and stuff was moved around. I thought maybe I made a mistake, but I did it again and got the same result.

This doesn't help us very much. "It didn't work" could mean anything.

Why would JavaScript "mess up" your page layout?
0
 
Xerxes321Author Commented:
cxr:
Ok, I did what you said, and the countdown text is showing up, but it's static and not counting down - just like the original text. I know the change was made because it's not quite lined up on the page, but I can fix that myself.

Any ideas?
0
 
Xerxes321Author Commented:
Badotz:
The countdown is missing completely from the page with your method. The other issues seem to have disappeared for the moment...
0
 
Xerxes321Author Commented:
cxr:
I have it set to use an & symbol in the javsscript, but when the page loads, it's using the default text, spelling out 'and'. It doesn't appear to be changing the text.
0
 
Roger BaklundCommented:
The below html works for me.

Note that I have hardcoded an initial time in the raidingtimer div, because I don't have the serverside code that replaces the <!--System:CountDown --> with the real timer. Also note that the script (called Xerxes321.js in my example) is in the html body, not in head. This is because when the head is rendered, the raidingtimer and rtcontent is not yet defined.

I also put in style="display:none" in the raidingtimer div, so that only the "live" countdown is visible.
<html>
<head><title>Counter test</title>
</head>
<body onload="countdown()">
<div id='raidingtimer' style="display:none">10 hours 30 minutes & 00 seconds until <a href="#">xyz</a></div>
<script type="text/javascript" language="JavaScript1.2" src="Xerxes321.js"></script>
<div id="rtcontent" align="center">
</div>
</body>

Open in new window

0
 
Roger BaklundCommented:
Oh, and obviously I removed the alert(); return false; from line 28.
0
 
Xerxes321Author Commented:
cxr:

We're almost there. It's working and counting down. But when I reload the page or switch to another page, the countdown disappears. It should be visible from any page, as it's in the page header with the logo.
0
 
Xerxes321Author Commented:
Interestingly, after more testing, the countdown disappearing is only happening with FF3. With IE6, the countdown loads on each page like it should.
0
 
BadotzCommented:
My method? I certainly can't take credit for creating the ability to use external JS files in an HTML page.
0
 
Roger BaklundCommented:
I think I know what the problem is. The code in the script before the definition of the function is executed before the loading of the page is ready. Try moving the <script src="...></script> to after the background div. Change this:

            <div id=background>

                  <a href="news.php"><br><img src="http://dkpfiles.com/followers/logo" border="0" height="269px" width="949px"></a>

                  <div id="raidingtimer" style="display:none">70 hours, 57 minutes, and 50 seconds until <a href='javascript:eventdetails(2,18,2009)'>Test Event</a>!</div>
                  <script type="text/javascript" language="JavaScript1.2" src="http://dkpfiles.com/followers/files/countdown.js"></script>
                  <div id="countdown"><div id="rtcontent" align="left"></div>
                  </div>

                  <div class=blackline style="position:absolute;width:100%;left:0px;bottom:0px;height:2px;padding:0;margin:0"></div>

                  <div class=greyline style="position:absolute;left:0;width:100%;bottom:2px;height:2px"></div>

            </div>

...into this:

            <div id=background>

                  <a href="news.php"><br><img src="http://dkpfiles.com/followers/logo" border="0" height="269px" width="949px"></a>

                  <div id="raidingtimer" style="display:none">70 hours, 57 minutes, and 50 seconds until <a href='javascript:eventdetails(2,18,2009)'>Test Event</a>!</div>
                  <div id="countdown"><div id="rtcontent" align="left"></div>
                  </div>

                  <div class=blackline style="position:absolute;width:100%;left:0px;bottom:0px;height:2px;padding:0;margin:0"></div>

                  <div class=greyline style="position:absolute;left:0;width:100%;bottom:2px;height:2px"></div>

            </div>
<script type="text/javascript" language="JavaScript1.2" src="http://dkpfiles.com/followers/files/countdown.js"></script>


If that does not work, we must make a "loader function" which sets up the counter after the page is loaded. That is not so difficult, but try the above first.
0
 
Xerxes321Author Commented:
cxr:
That didn't work. It shows on the initial load, when I use CTRL+F5 to force refresh, but when clicking on a link, it just poofs.
How do we do the loader function?
0
 
Roger BaklundCommented:
Just wrap the initial part of the script in a function, add a call to counter() at the end, and change the body onload to call the new function:

<body onload="counter_setup()">

This way the setup code is not executed before the page is done loading.
function counter_setup() {
var maincontent = document.getElementById("raidingtimer"); //Get the parten Id for "thehref"
 
var innercontent = maincontent.innerHTML; //Get the actuall count down timer
 
var thehref = maincontent.getElementsByTagName('a'); //Get the href value for recreating the link
 
var linkstext = thehref[0].innerHTML; //getts the linked text
 
var linkall = "<a href='" + thehref[0] + "'>" + linkstext + "</a>"; //Rebuild the link with a class for changing the style of the link
 
var contentnum = innercontent.match(/(\d+)/g); //Gets all the digits from the countdown and puts them into an array
 
var eighthword = innercontent.split(" "); //splits each word in the countdown into an array
 
var hour = contentnum[0]; //gets the first digit in the "contentnum" array and sets it to hour
var minute = contentnum[1]; //gets the second digit in the "contentnum" array and sets it to minute
var sec = contentnum[2]; //gets the third digit in the "contentnum" array and sets it to sec
countdown(); // start the counter
}

Open in new window

0
 
Roger BaklundCommented:
...I meant "add a call to countdown() at the end".
0
 
Xerxes321Author Commented:
I did that and the timer disappears and I get 'eighthword is null or not an object'.
0
 
Roger BaklundCommented:
ok, there are some global variables here, they must be defined first... try the code below. I have tested it locally, and it seems to work. This goes into your external file (which now can be included in the head part of the html, if you wish), body onload must be set to start the counter_setup() function: <body onload="counter_setup()">
// set global variables
var eighthword;
var hour;
var minute;
var sec;
var linkall;
 
function counter_setup() {
  maincontent = document.getElementById("raidingtimer"); //Get the parten Id for "thehref"
  innercontent = maincontent.innerHTML; //Get the actuall count down timer
  thehref = maincontent.getElementsByTagName('a'); //Get the href value for recreating the link
  linkstext = thehref[0].innerHTML; //getts the linked text
  linkall = "<a href='" + thehref[0] + "'>" + linkstext + "</a>"; //Rebuild the link with a class for changing the style of the link
  contentnum = innercontent.match(/(\d+)/g); //Gets all the digits from the countdown and puts them into an array
  eighthword = innercontent.split(" "); //splits each word in the countdown into an array
  hour = contentnum[0]; //gets the first digit in the "contentnum" array and sets it to hour
  minute = contentnum[1]; //gets the second digit in the "contentnum" array and sets it to minute
  sec = contentnum[2]; //gets the third digit in the "contentnum" array and sets it to sec
  countdown(); // start the counter
}
 
function countdown(){ //the new dynamic countdown function
  if (eighthword[7] == "until"){ //finds out if it the counter is going up or down
    sec--; //reduce the seconds by 1
    var lastwords = ""; //set if a word is needed after the raid title
 
    if (sec < "0"){ //the if will reduce the "minute" by 1 if sec reaches less than 0
      sec = 59; //resets sec to 59 to continue the countdown
      minute--; //reduces minute by 1
    }
    if (minute < "0"){ //the if will reduce the "hour" by 1 if minute reaches less than 0
      minute = 59; //resets minute to 59 to continue the countdown
      hour--; //reduces hour by 1
    }
    if (hour == "0" && minute == "0" && sec == "0") {
      document.location.reload() //if the timer reaches all 0's beacuse some left the page up
    } //this will reload the page to get the new timer values
  }
 
  if (eighthword[7] == "since") { //finds out if it the counter is going up or down
    sec++; //ups the seconds by 1
    var lastwords = " started"; //set if a word is needed after the raid title
 
    if (sec == "60"){ //the if will add 1 to the "minute" if sec reaches 60
      sec = 0; //resets sec to 0 to continue the countdown
      minute++; //adds 1 to the minute
    }
    if (minute == "60"){ //the if will add 1 to the "hour" if minute reaches 60
      minute = 0; //resets minute to 0 to continue the countdown
      hour++; //adds 1 to the hour
      if (hour >= "2"){
        document.location.reload() //as I was unsure when the timer switches to counting down to an event
      } // I set this to relaod the page every hour after the first 2 have ellapsed
    }
  }
  var timed = "<span>" + hour + " hours, " + minute + " minutes & " + sec + " seconds " + eighthword[7] + " " + linkall + lastwords + "!" + "</span>"; //writes the new countdown timer
  document.getElementById('rtcontent').innerHTML = timed; //places the new countdown timer into the "body" of the page 
  t=setTimeout("countdown()", 1000); //the heart of the countdown timer.
}

Open in new window

0
 
Xerxes321Author Commented:
It's working on Firefox3, however, it's now broken on IE6 :( I don't have IE7 available to test at work, so am unsure about it.

When not logged into the site with IE6 I get these errors:
IE6:
Line: 10
Char: 3
Error: Object doesn't support this property or method
Code: 0

Line: 14
Char: 3
Error: 'this.container' is null or not an object
Code: 0

Interestingly, when I login with IE6, the 2nd error goes away, but the first error remains. Either way, logged in or not, the timer doesn't show at all.

I moved the script tag into the header, changed the body tag to load the counter_setup, and replaced countdown.js with your code above. This is all that I did.
0
 
Roger BaklundCommented:
I have tested it on IE7 on Vista & IE6 on Win XP, and it works for both.

There is no "this.container" in our script, that error must refer to something else...?
0
 
Xerxes321Author Commented:
Not sure what's causing those errors. If it's working in IE6 and IE7, then sounds good to me!

Thanks, awarding points for your help. You've definitely earned it! Appreciate your help!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 13
  • 10
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now