Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: newb question :-)

1. ## newb question :-)

Hello,
I have been working with http://www.maxxblade.co.uk/clock/

It is a gui that generates a javascript clock.

It is not working for me :-) I have this script in the header:

<script language="javascript">
// Clock Script Generated By Maxx Blade's Clock v2.0d
// http://www.maxxblade.co.uk/clock
function timeSource(){
x=new Date();
x.setTime(x.getTime()+daylightSaving());
return x;
}
function timeNow(){
return new Date();
}
function daylightSaving(){
return ((timeNow().getTime()>findDay(0,3,1,1).getTime())&&(timeNow().getTime()<findDay(0,9,1,-1).getTime()))?3600000:0;
}
function findDay(d,m,h,p){
var week=(p<0)?7*(p+1):7*(p-1),nm=(p<0)?m+1:m,x=new Date(timeNow().getUTCFullYear(),nm,1,h,0,0),dOff=0;
if(p<0){
x.setTime(x.getTime()-86400000);
}
if(x.getDay()!=d){
dOff=(x.getDay()<d)?(d-x.getDay()):0-(x.getDay()-d);
if(p<0&&dOff>0){
week-=7;
}
if(p>0&&dOff<0){
week+=7;
}
x.setTime(x.getTime()+((dOff+week)*86400000));
}
return x;
}
function leadingZero(x){
return (x>9)?x:'0'+x;
}
function twelveHour(x){
if(x==0){
x=12;
}
return (x>12)?x-=12:x;
}
function displayTime(){
document.getElementById('tP').innerHTML=eval(outputTime);
setTimeout('displayTime()',1000);
}
function amPMsymbol(x){
return (x>11)?'pm':'am';
}
function fixYear4(x){
return (x<500)?x+1900:x;
}
var dayNames=new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var monthNames=new Array('January','February','March','April','May','June','July','August','September','October','Novem ber','December');
var outputTime="dayNames[timeSource().getDay()]+','+' '+monthNames[timeSource().getMonth()]+' '+timeSource().getDate()+','+' '+fixYear4(timeSource().getYear())+' '+':'+':'+' '+twelveHour(timeSource().getHours())+':'+leadingZero(timeSource().getMinutes())+':'+leadingZero(tim eSource().getSeconds())+' '+amPMsymbol(timeSource().getHours())";
if(!document.all){ window.onload=displayTime; }else{ displayTime(); }
</script>

I have this in the body as is :

<script language="JavaScript" src="path/clock.js"></script>
<span id="tP">&nbsp;</span>

I figure you need to call the script with the top line and then display it with the bottom line.

What am I doing wrong?

Also, when you have multiple scripts, say one to do a scrolling marquee and one to the date and time, can you place both scripts between the same script tag? Or should they stay seperate between there own script tags?

Thanks,
PoJ

• Originally Posted by prophetofjah
I have this script in the header:
... [snip code] ...
I have this in the body as is :
<script language="JavaScript" src="path/clock.js"></script>
The problem is that the line in your <body> that I quoted above is used to link an external .js file to the page; however, your javascript is contained inside the <head> of your web-page. You can do either of the following to fix your problem:

1) Remove the <script language="JavaScript" src="path/clock.js"></script> line from the <body>. OR...

2) (Recommended, albeit a little more complex for newbies) Move the code in the <head> into a separate .js file. Just open a text-editor, cut / paste the code in between the <script> tags from the html to a new document, and save the document with a .js extension (eg name the file "clock.js"). Then in the <script> line in the <body>, set the src attribute to point to that file (ie as it is right now, the web-page is looking for a "clock.js" file that is inside a folder named "path" which is located inside the folder where your html -page is stored). Finally, move that line from the <body> to the <head> section of the html page. Thus you should have:
Code:
<html>
<head>
<script type="text/javascript" language="javascript" src="clock.js"></script>
</head>
<body>
<span id="tP">&nbsp;</span>
</body>
</html>
And in a separate "clock.js" file located in the same directory as your html:
Code:
// Clock Script Generated By Maxx Blade's Clock v2.0d
// http://www.maxxblade.co.uk/clock
function timeSource(){
x=new Date();
x.setTime(x.getTime()+daylightSaving());
return x;
}
function timeNow(){
// ... [insert the rest of the code here] ...
Note that I did not include the <script> tags in the .js file. This is because external .js files hold javascript, not html, and the <script> tags are html tags!

As for your second question, it depends on what you mean by "can you place both scripts between the same script tag?" If you go with the
Code:
<script>
... [javascript code here] ...
</script>
format, then the answer is yes (with a caveat -- see below). However it is incorrect to do something like:
Code:
<script type="text/javascript" src="clock.js; anotherScript.js"></script>
nor can you do:
Code:
<script type="text/javascript" src="clock.js">
... [javascript code here] ...
</script>
Thus, if you are using the <script> tags to include an external .js script, then you can only include one script per <script> tag.

As I mentioned above, there is a caveat for writing multiple scripts within the same <script> tags... You may run into problems if the scripts try to address the same object / variable. To be safe:

1) Try to avoid global variables. Variables are local to the area where they are declared using the 'var' keyword (if you do not use the 'var' keyword when the variable is first used, then they become global). If you use global variables, then any script can access them and cause unintened consequences. Thus in the function timeSource():
Code:
function timeSource(){
x=new Date();
x.setTime(x.getTime()+daylightSaving());
return x;
}
the variable 'x' is being made into a global variable. It would be better to write var x=new Date(); instead, to make it a local variable to the timeSource() function (the info is still being passed outside of the function using the 'return' statement).

2) If you do use global variables / objects, try to make it specific for the particular script. In your clock script, you may want to change the <span> id attribute to "clockjsTP" and change the line in the displayTime() function to
Code:
document.getElementById('clockjsTP').innerHTML=eval(outputTime);
Then when you ( or others! ) read the html code, you'll realize that the <span> goes with the "clock.js" script. VWPhillips (on these forums) does a similar thing by appending "zxc" to the beginning of each variable / function. It's easy to type and it also signifies that the varibles / functions belong to the script that vwphillips wrote

3) Finally be aware of how scripts use the same object... For example the clock script has the line:
Code:
if(!document.all){ window.onload=displayTime; }else{ displayTime(); }
This basically is stating window.onload=displayTime; which defines the function to run when the window-object's onload event is triggered. The window-object is the navigator's window that is currently being used to display the html page. Thus other scripts may have need to also use this object. If, for example, the marquee script also calls window.onload=runMarquee;, then this will "bump-off" the displayTime() function from being run! If you have several scripts that need to use the window.onload event, then you'll have to define a separate function that calls each script / function to run:
Code:
function init()
{
displayTime();
runMarquee();
}
window.onload=init;

... or using an anonymous function ...

window.onload = function(){ displayTime(); runMarquee(); };

• ## thanks!

thank you sooooo much for your response!

I really appreciate it!

• Hello,
Right now I am searching the internet for different scripts for my website. So I come accross my marquee script:

<SCRIPT language="javascript">
//Specify the marquee's width (in pixels)
var marqueewidth="350px";
//Specify the marquee's height
var marqueeheight="25px";
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2;
//configure background color:
var marqueebgcolor="#333333";
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=0;
</SCRIPT>

Then, I want to add the clock script. To clarify, could I house both scripts between the same <script></script> tags in the header?

If so I could both into a .js file. Would putting them both in a .js file be the most efficient way to handle it?

Also, "return x;" passes "x" out of the timeSource() function... so that sets the initial value of "x" for the rest of the script untill x is then returned out of the next function.

Thanks again kind soul!

PoJ

• Originally Posted by prophetofjah
To clarify, could I house both scripts between the same <script></script> tags in the header?
Yes, you can have many different functions and declarations in the same script tag.

Originally Posted by prophetofjah
If so I could both into a .js file. Would putting them both in a .js file be the most efficient way to handle it?
You can put them both in one .js file. Efficiency is another question though. Let's say you have one function that you use on 50 pages and another function that you use on 1 page. It won't cause any errors to put them both in the same .js file but it doesn't really make sense to have them in the same .js file. Now let's say you have a function that you use on 50 pages and another function you use on 49 pages. It would make more sense to include them both in the same .js file.

Don't forget, you can include several .js files on one page so you can separate them out as much as you want.

• I am still having trouble, even though I have made great progress thanks to you :-)

Two of my scripts seem to be cancelling the other out.

In my header I have:

Code:
<SCRIPT language="javascript">
//Specify the marquee's width (in pixels)
var marqueewidth="350px";
//Specify the marquee's height
var marqueeheight="25px";
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2;
//configure background color:
var marqueebgcolor="#333333";
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=0;
</SCRIPT>
<script type="text/javascript" language="javascript" src="calendar.js"></script>
Then in the body I have the following scripts:
Code:

<SCRIPT type="text/javascript" language="javascript1.2"
SRC="http://www.cnsnews.com/ticker/horizontal_code.js"></SCRIPT>
<script type="text/javascript" language="javascript" src="http://www.freshcontent.net/world_news_feed.php"></script>
On my calendar.js file I have:
Code:
// Clock Script Generated By Maxx Blade's Clock v2.0d
// http://www.maxxblade.co.uk/clock
function timeSource(){
x=new Date();
x.setTime(x.getTime()+daylightSaving());
return x;
}
function timeNow(){
return new Date();
}
function daylightSaving(){
return ((timeNow().getTime()>findDay(0,3,1,1).getTime())&&(timeNow().getTime()<findDay(0,9,1,-1).getTime()))?3600000:0;
}
function findDay(d,m,h,p){
var week=(p<0)?7*(p+1):7*(p-1),nm=(p<0)?m+1:m,x=new Date(timeNow().getUTCFullYear(),nm,1,h,0,0),dOff=0;
if(p<0){
x.setTime(x.getTime()-86400000);
}
if(x.getDay()!=d){
dOff=(x.getDay()<d)?(d-x.getDay()):0-(x.getDay()-d);
if(p<0&&dOff>0){
week-=7;
}
if(p>0&&dOff<0){
week+=7;
}
x.setTime(x.getTime()+((dOff+week)*86400000));
}
return x;
}
function leadingZero(x){
return (x>9)?x:'0'+x;
}
function twelveHour(x){
if(x==0){
x=12;
}
return (x>12)?x-=12:x;
}
function displayTime(){
document.getElementById('calendartP').innerHTML=eval(outputTime);
setTimeout('displayTime()',1000);
}
function amPMsymbol(x){
return (x>11)?'pm':'am';
}
function fixYear4(x){
return (x<500)?x+1900:x;
}
var dayNames=new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var monthNames=new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var outputTime="dayNames[timeSource().getDay()]+','+' '+monthNames[timeSource().getMonth()]+' '+timeSource().getDate()+','+' '+fixYear4(timeSource().getYear())+' '+'<BR>'+' '+twelveHour(timeSource().getHours())+':'+leadingZero(timeSource().getMinutes())+':'+leadingZero(timeSource().getSeconds())+' '+amPMsymbol(timeSource().getHours())";
if(!document.all){ window.onload=displayTime; }else{ displayTime(); }

// Put the following HTML on your page where you would like the Clock to be displayed:
// <span id="tP">&nbsp;</span>
I can either get my marqee to work and not the clock, or vice versa. Thank you so much for your help so far

PoJ

• I can either get my marqee to work and not the clock, or vice versa
Both are triggered by onload event. As this event belongs to the window and as this event happens only once when the window object is loaded, now it is logically that everything that happens onload should be gather under the same command, so that look after the onload (or window.onload, or <body onload="") triggered functions and gather them in a single place (removing them from the others)

• I see my onload event for my clock:
Code:
window.onload=displayTime;
Where is the second onload event? I can't spot it.

Thanks A Million

PoJ

• I am sorry, but I still can't figure this out. I understand that the page only loads once, so that there can be only window.onload event, and I need to put the clock script and marquee script onload events as the same window.onload event.

I know what the clock onload event is (window.onload=displaytime so I would need to add the marquee onload function or whatever it does when the window loads. However, I cant find the marquee onload event. Could someone tell me what it is?

Thanks,
PoJ

• I figured it out... there was a window.onload event on the marquee javascript which is called from a url.

Thanks

•

#### Posting Permissions

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