Pretty "Suite" Clock

[The Doctor]

http://www.suite101.com/files/mysites/AskAlice/Clock.htm

[This message has been edited by The Doctor (edited 07-13-2003 10:12 AM).]

[dethwing]

Nothing happens. I don't get it.

[JDTAY]

It works for me. You're probably just one of those losers who doesn't use IE.

[Chuck]

It works in Internet Explorer but not in Netscape Navigator.

This is my 7500th post. I know you get a house, car, and big screen TV when you hit 10,000. Is there any prize for 7500?

[The Doctor]

I don't know. What about 1402nd? Anything from some foreign people who count using base 1402?

[This message has been edited by The Doctor (edited 07-13-2003 10:39 AM).]

[Beartalon]

[margitsw]

From the source code
if (ie){

And that says it all.

[Beartalon]

I checked again. It also says "if(ns)..." so the detection code is there. I wonder why it doesn't work?

[extropalopakettle]

Works fine for me in Netscape (4.75).

[The Doctor]

Beart, how'd you do that elipse thing?

[Beartalon]

I'm trying to find it. I either deleted or overwrote the result. It's obviously based on a circle, but I introduced new variables for the different radii of the ellipse. I'll have to work on it again.

[Beartalon]

If you look in the source, you can see variables names ClockWidth and ClockHeight. Change these to affect the shape of the clock part. Make one value larger than the other for an elliptical clock. If you use negative numbers, you'll flip the clock horizontally, vertically or both, and the hands will move in the appropriate direction for the new look.

Further down, you'll see this text which creates the scrolling date effect:

code:

---

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);


 }

---

To get an ellipse for the date, add a multiplying factor to each line, like so:

code:

---

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


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


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


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


 }

---

Now the date will also be elliptical. If you use negative numbers, the date ellipse will rotate appropriately. If you make one of the multiplying factors less than one, the date ellipse will intersect the clock, like the atom I was talking about.
Now, try the multiplying factor somewhere else for more effects. This code:

code:

---

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(2*(currStep+i*Dsplit*Math.PI/180))+scrll;


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


 }

---

has a multiplying factor inside the sin function, and produces an infinity-symbol with the scrolling date.

I'll upload these.

[Beartalon]

Here they are:
http://www.geocites.com/beartalon/graphics/clock.htm - normal clock and date
http://www.geocites.com/beartalon/graphics/clock2.htm - elliptical clock face
http://www.geocites.com/beartalon/graphics/clock3.htm - elliptical date
http://www.geocites.com/beartalon/graphics/clock4.htm - both elliptical
http://www.geocites.com/beartalon/graphics/clock5.htm - infinity date

[Beartalon]

Hmph. They won't work for some reason, although they test locally just fine. Maybe it's geocities, my host. Try saving the sources to your hard drive and running it from there.

[The Doctor]

They work for me.

Those are great! I like that infinity one. Snazzy.

[This message has been edited by The Doctor (edited 07-28-2003 06:53 PM).]

[HyToFry]

They sure don't work for me.

[The Ktulu]

Nor for me.

[Ancalagon]

Doesn't work here either. Browser thingy?

[Beartalon]

It could be, but if I view it locally in IE, they work fine for me.

[Beartalon]

The error tells me invalid argument at line 118 char 2. I'll look at it when i get home.

[HyToFry]

They don't work even locally for me.