2
   

Sigh, I'm new and need help!

Forums: Web Development, Javascript, Mousetrail
Email this Topic • Print this Page
 
 
Librarygirl
 
Reply Tue 17 Aug, 2004 01:45 pm
I'm working on the business website and can't seem to get the java script to work for the "Mouse Tail Clock". I do have another bit of java script (for the status bar) on the same page but in the <body> section as opposed to the <head> section that this is in.

I was under the impression I could have more than one script on a page.

It was working fine before I added the status bar script into the body.

I will gladly post the web address so that you can see the source or I could copy and paste it into a message here......

Thanks for any help!

Librarygirl
  • Topic Stats
  • Top Replies
  • Link to this Topic
Type: Discussion • Score: 2 • Views: 1,890 • Replies: 10
No top replies

 
panzade
 
  1  
Reply Tue 17 Aug, 2004 01:48 pm
A nerd will be along shortly Libr Girl
0 Replies
 
cavfancier
 
  1  
Reply Tue 17 Aug, 2004 01:51 pm
Don't post the web address. I'm sure someone will help you.
0 Replies
 
Librarygirl
 
  1  
Reply Tue 17 Aug, 2004 01:54 pm
Okay! Thank you!
0 Replies
 
Jer
 
  1  
Reply Tue 17 Aug, 2004 02:32 pm
Re: Sigh, I'm new and need help!
You might be able to find some answers here:

W3Schools.com

There's a lot of info on that site.

Cheers,

-Jer-

Librarygirl wrote:
I'm working on the business website and can't seem to get the java script to work for the "Mouse Tail Clock". I do have another bit of java script (for the status bar) on the same page but in the <body> section as opposed to the <head> section that this is in.

I was under the impression I could have more than one script on a page.

It was working fine before I added the status bar script into the body.

I will gladly post the web address so that you can see the source or I could copy and paste it into a message here......

Thanks for any help!

Librarygirl
0 Replies
 
Craven de Kere
 
  1  
Reply Tue 17 Aug, 2004 03:50 pm
Hi, post the two scripts.

I am willing to bet that both use the page onload call.

Post the scripts and I'll modify them when I get the time so that both functions run off of one onload.
0 Replies
 
Librarygirl
 
  1  
Reply Wed 18 Aug, 2004 06:07 am
The first one is the clock and goes in the <head> section, the second is the status bar scroll that goes in the <body> section. So it was the onload thing. I was wondering about that, but I don't know enough about Javascript to finger the culprit! Thank you for your help!

Library Girl


<!-- This script and many more are available free online at -->
<!-- http://search.able2know.com/web_development/scripts/ -->
<!-- Original: Amy Cook ([email protected] ) -->
<!-- Web Site: http://ncgoddess.com/script.html -->

<script language="JavaScript">

dCol='000000';//date colour.

fCol='000000';//face colour.

sCol='000000';//seconds colour.

mCol='000000';//minutes colour.

hCol='000000';//hours colour.

ClockHeight=40;

ClockWidth=40;

ClockFromMouseY=0;

ClockFromMouseX=100;



//Alter nothing below! Alignments will be lost!



d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");

m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");

date=new Date();

day=date.getDate();

year=date.getYear();

if (year < 2000) year=year+1900;

TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;

D=TodaysDate.split('');

H='...';

H=H.split('');

M='....';

M=M.split('');

S='.....';

S=S.split('');

Face='1 2 3 4 5 6 7 8 9 10 11 12';

font='Arial';

size=1;

speed=0.6;

ns=(document.layers);

ie=(document.all);

Face=Face.split(' ');

n=Face.length;

a=size*10;

ymouse=0;

xmouse=0;

scrll=0;

props="<font face="+font+" size="+size+" color="+fCol+"><B>";

props2="<font face="+font+" size="+size+" color="+dCol+"><B>";

Split=360/n;

Dsplit=360/D.length;

HandHeight=ClockHeight/4.5

HandWidth=ClockWidth/4.5

HandY=-7;

HandX=-2.5;

scrll=0;

step=0.06;

currStep=0;

y=new Array();x=new Array();Y=new Array();X=new Array();

for (i=0; i < n; i++){y=0;x=0;Y=0;X=0}

Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();

for (i=0; i < D.length; i++){Dy=0;Dx=0;DY=0;DX=0}

if (ns){

for (i=0; i < D.length; i++)

document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D+'</font></center></layer>');

for (i=0; i < n; i++)

document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face+'</font></center></layer>');

for (i=0; i < S.length; i++)

document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S+'</b></center></font></layer>');

for (i=0; i < M.length; i++)

document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M+'</b></center></font></layer>');

for (i=0; i < H.length; i++)

document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H+'</b></center></font></layer>');

}

if (ie){

document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < D.length; i++)

document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D+'</B></font></div>');

document.write('</div></div>');

document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < n; i++)

document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face+'</B></font></div>');

document.write('</div></div>');

document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < H.length; i++)

document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H+'</div>');

document.write('</div></div>');

document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < M.length; i++)

document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M+'</div>');

document.write('</div></div>')

document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < S.length; i++)

document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S+'</div>');

document.write('</div></div>')

}

(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){

ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;

xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;

}

(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

function ClockAndAssign(){

time = new Date ();

secs = time.getSeconds();

sec = -1.57 + Math.PI * secs/30;

mins = time.getMinutes();

min = -1.57 + Math.PI * mins/30;

hr = time.getHours();

hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;

if (ie){

Od.style.top=window.document.body.scrollTop;

Of.style.top=window.document.body.scrollTop;

Oh.style.top=window.document.body.scrollTop;

Om.style.top=window.document.body.scrollTop;

Os.style.top=window.document.body.scrollTop;

}

for (i=0; i < n; i++){

var F=(ns)?document.layers['nsFace'+i]:ieFace.style;

F.top=y + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;

F.left=x + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);

}

for (i=0; i < H.length; i++){

var HL=(ns)?document.layers['nsHours'+i]:ieHours.style;

HL.top=y+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;

HL.left=x+HandX+(i*HandWidth)*Math.cos(hrs);

}

for (i=0; i < M.length; i++){

var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes.style;

ML.top=y+HandY+(i*HandHeight)*Math.sin(min)+scrll;

ML.left=x+HandX+(i*HandWidth)*Math.cos(min);

}

for (i=0; i < S.length; i++){

var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds.style;

SL.top=y+HandY+(i*HandHeight)*Math.sin(sec)+scrll;

SL.left=x+HandX+(i*HandWidth)*Math.cos(sec);

}

for (i=0; i < D.length; i++){

var DL=(ns)?document.layers['nsDate'+i]:ieDate.style;

DL.top=Dy + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;

DL.left=Dx + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);

}

currStep-=step;

}

function Delay(){

scrll=(ns)?window.pageYOffset:0;

Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);

Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);

for (i=1; i < D.length; i++){

Dy=Math.round(DY+=(Dy[i-1]-DY)*speed);

Dx=Math.round(DX+=(Dx[i-1]-DX)*speed);

}

y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);

x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);

for (i=1; i < n; i++){

y=Math.round(Y+=(y[i-1]-Y)*speed);

x=Math.round(X+=(x[i-1]-X)*speed);

}

ClockAndAssign();

setTimeout('Delay()',20);

}

if (ns||ie)window.onload=Delay;

</script>

<script language="Javascript">
<!--
//This credit line must stay intact
//Status Scrolling script
//For this script, visit java-scripts.net

myMsg = "Welcome to the Flat River Community Library's homepage! Check out our new links: Local Links, Government Links, The Teen Spot. August 20th and 21st is the Used Booksale and Danish Travelogue! Come join us! "

i=0

function scrollMsg() {
frontPart = myMsg.substring(i,myMsg.length)
backPart = myMsg.substring(0,i)
window.status = frontPart + backPart

if (i < myMsg.length) {
i++
}
else {
i = 0
}

setTimeout("scrollMsg()",50)

}

window.onload=scrollMsg
//-->
</script>
0 Replies
 
Craven de Kere
 
  1  
Reply Wed 18 Aug, 2004 10:42 pm
Librarygirl,

In the future please use the "code" tags, it makes it easier to follow long bunches of code, and it also prevents the html from being parsed and displaying the script incorrectly here.

Here is the fix:

1) add this onload call to your "body" tag.

Code:onload="scrollMsg();CravenIsTired()"


Like so:

Code:<body onload="scrollMsg();CravenIsTired()">


2) Remove this line from the status scrolling script:

Code:window.onload=scrollMsg


3) Replace this line (in the first script):

Code:if (ns||ie)window.onload=Delay;


With this:

Code:function CravenIsTired(){
if (ns||ie)window.onload=Delay;
}


Please test it and let us know how it goes, I have not tested it.
0 Replies
 
Librarygirl
 
  1  
Reply Thu 19 Aug, 2004 08:12 am
Hello....

I tried it and it said I had errors on the page and neither script worked!

What's my next option? I'm afaid I just won't be able to have both.

Thank you for your time!

LibraryGirl
0 Replies
 
Craven de Kere
 
  1  
Reply Thu 19 Aug, 2004 07:09 pm
PM me a link to the page.
0 Replies
 
Craven de Kere
 
  1  
Reply Fri 20 Aug, 2004 12:59 am
No need to PM the link, I sat down and hacked it out for ya. It was a pain, the setTimeout in each script was too close, and was causing variable conflicts. Changing it too much or making it a setInterval would crash the browser or make one of the actions too slow or way too fast.

Ultimately, the solution was pretty simple, with a small rewrite of variables.

Here is a page with both scripts functioning perfectly (cept for some browser sniffin' excised, but I'm not getting back to this.

But before I go, I do want to note that these kinds of scripts are very "amateuristic" and very unprofessional in this kind of implementation. Since you mentioned that this is a business site the useability side of me had to point that out.

It's usually only used on geocities-type sites.

Anywho, enough preaching, here's your code:

Code:<head>
<script language="JavaScript">
<!--
dCol='000000';//date colour.

fCol='000000';//face colour.

sCol='000000';//seconds colour.

mCol='000000';//minutes colour.

hCol='000000';//hours colour.

ClockHeight=40;

ClockWidth=40;

ClockFromMouseY=0;

ClockFromMouseX=100;



//Alter nothing below! Alignments will be lost!



d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");

m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");

date=new Date();

day=date.getDate();

year=date.getYear();

if (year < 2000) year=year+1900;

TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;

D=TodaysDate.split('');

H='...';

H=H.split('');

M='....';

M=M.split('');

S='.....';

S=S.split('');

Face='1 2 3 4 5 6 7 8 9 10 11 12';

font='Arial';

size=1;

speed=0.6;

ns=(document.layers);

ie=(document.all);

Face=Face.split(' ');

n=Face.length;

a=size*10;

ymouse=0;

xmouse=0;

scrll=0;

props="<font face="+font+" size="+size+" color="+fCol+"><B>";

props2="<font face="+font+" size="+size+" color="+dCol+"><B>";

Split=360/n;

Dsplit=360/D.length;

HandHeight=ClockHeight/4.5

HandWidth=ClockWidth/4.5

HandY=-7;

HandX=-2.5;

scrll=0;

step=0.06;

currStep=0;

y=new Array();x=new Array();Y=new Array();X=new Array();

for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}

Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();

for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}

if (ns){

for (i=0; i < D.length; i++)

document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');

for (i=0; i < n; i++)

document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');

for (i=0; i < S.length; i++)

document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');

for (i=0; i < M.length; i++)

document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');

for (i=0; i < H.length; i++)

document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');

}

if (ie){

document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < D.length; i++)

document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');

document.write('</div></div>');

document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < n; i++)

document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');

document.write('</div></div>');

document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < H.length; i++)

document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');

document.write('</div></div>');

document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < M.length; i++)

document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');

document.write('</div></div>')

document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < S.length; i++)

document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');

document.write('</div></div>')

}

(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){

ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;

xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;

}

(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

function ClockAndAssign(){

time = new Date ();

secs = time.getSeconds();

sec = -1.57 + Math.PI * secs/30;

mins = time.getMinutes();

min = -1.57 + Math.PI * mins/30;

hr = time.getHours();

hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;

if (ie){

Od.style.top=window.document.body.scrollTop;

Of.style.top=window.document.body.scrollTop;

Oh.style.top=window.document.body.scrollTop;

Om.style.top=window.document.body.scrollTop;

Os.style.top=window.document.body.scrollTop;

}

for (i=0; i < n; i++){

var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;

F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;

F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);

}

for (i=0; i < H.length; i++){

var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;

HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;

HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);

}

for (i=0; i < M.length; i++){

var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;

ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;

ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);

}

for (i=0; i < S.length; i++){

var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;

SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;

SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);

}

for (i=0; i < D.length; i++){

var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;

DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;

DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);

}

currStep-=step;

}

function Delay(){

scrll=(ns)?window.pageYOffset:0;

Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);

Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);

for (i=1; i < D.length; i++){

Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);

Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);

}

y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);

x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);

for (i=1; i < n; i++){

y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);

x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}

ClockAndAssign();

setTimeout('Delay();',20);
}

//-->
</script>
</head>
<body onload="scrollMsg();Delay()">

<script language="Javascript">
<!--
//This credit line must stay intact
//Status Scrolling script
//For this script, visit java-scripts.net

myMsg = "Welcome to the Flat River Community Library's homepage! Check out our new links: Local Links, Government Links, The Teen Spot. August 20th and 21st is the Used Booksale and Danish Travelogue! Come join us! "
// Variable renamed by Craven de Kere (able2know.com), because it was conflicting with the other script
i2=0

function scrollMsg() {
frontPart = myMsg.substring(i2,myMsg.length)
backPart = myMsg.substring(0,i2)
window.status = frontPart + backPart

if (i2 < myMsg.length) {
i2++
}
else {
i2 = 0
}

setTimeout("scrollMsg()",50)
}

//-->
</script>
</body>
0 Replies
 
 

Related Topics

.NET web application development and the application server - Question by carebear1
phpBB Search Engine Optimization - Sessions, static ( SEO ) - Discussion by Craven de Kere
Webdevelopment and hosting - Question by harisit2005
Showing an Ico File - Discussion by Brandon9000
how to earn money in internet - Discussion by rizwanaraj
The version 10 bug. Worse then Y2K! - Discussion by Nick Ashley
CSS Border style colors - Question by meesa
There is no Wisdom in Crowds - Discussion by ebrown p
THANK YOU CRAVEN AND NICK!!! - Discussion by dagmaraka
I'm the developer - Discussion by Nick Ashley
IIS-compatible mod_rewrite software (URL rewriting; ISAPI) - Discussion by Monger
 
  1. Forums
  2. » Sigh, I'm new and need help!
Copyright © 2024 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.03 seconds on 05/08/2024 at 05:51:17
▲ ▼