How?: Panther countdown graphic on apple.com

[unregbaron]

..did they have an intern slaving away for months doing animated gifs of all date/time combinations?

Java?

If anyone knows please explain as basically as possible - i know nothing beyond assembling basic pages in dreamweaver...

thanks

 

[groovebuster]

A simple click to take a look at the source code of the page would have reveiled that information.

It is done by a JavaScript.

<script language="JAVASCRIPT">
// <!--

// preload images
var clock1 = new Array();
for(i=0; i < 10; i++) {
clock1 = new Image();
clock1.src = "http://a772.g.akamai.net/7/772/51/524a0405ba2b3c/www.apple.com/home/images/2003/10/clock/" + i + "1.gif"; // take gif out of source name for use with abc
}
var clock2 = new Array();
for(i=0; i < 10; i++) {
clock2 = new Image();
clock2.src = "http://a772.g.akamai.net/7/772/51/524a0405ba2b3c/www.apple.com/home/images/2003/10/clock/" + i + "2.gif"; // take gif out of source name for use with abc
}
var clock3 = new Array();
for(i=0; i < 10; i++) {
clock3 = new Image();
clock3.src = "http://a772.g.akamai.net/7/772/51/524a0405ba2b3c/www.apple.com/home/images/2003/10/clock/" + i + "3.gif"; // take gif out of source name for use with abc
}

var counterd = 1;
var counterdd = 1;
var counterh = 1;
var counterhh = 1;
var counterm = 1;
var countermm = 1;
var counters = 1;
var counterss = 1;

function countdown() {
path = "http://a772.g.akamai.net/7/772/51/524a0405ba2b3c/www.apple.com/home/images/2003/10/clock/"
s = 1; //initialize seconds
// now
var now = new Date()

// then
var then = new Date("October 24, 2003 20:00:00");

var difference = new Date();
difference.setTime(Math.abs(then.getTime() - now.getTime()));
timeDifference = difference.getTime();

// dRemain = Math.ceil((then.getTime() - now.getTime()) / (one_day));

dRemain = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
timeDifference -= dRemain * (1000 * 60 * 60 * 24);
hRemain = Math.floor(timeDifference / (1000 * 60 * 60));
timeDifference -= hRemain * (1000 * 60 * 60);
mRemain = Math.floor(timeDifference / (1000 * 60));
timeDifference -= mRemain * (1000 * 60);
sRemain = Math.floor(timeDifference / 1000);
timeDifference -= sRemain * 1000;

var o=0;
while (dRemain > 9) {
o++;
dRemain = dRemain-10
}
if (document.day.src.indexOf(clock3[o].src) < 0 && counterd < 4) {
document.day.src = eval("clock" + (counterd) + "[" + o + "].src");
counterd++;
} else {
document.day.src = clock3[o].src;
counterd=1;
}
if (document.dayday.src.indexOf(clock3[dRemain].src) < 0 && counterdd < 4) {
document.dayday.src = eval("clock" + (counterdd) + "[" + dRemain + "].src");
counterdd++;
} else {
document.dayday.src = clock3[dRemain].src;
counterdd=1;
}
var p=0;
while (hRemain > 9) {
p++;
hRemain = hRemain-10
}
if (document.hour.src.indexOf(clock3[p].src) < 0 && counterh < 4) {
document.hour.src = eval("clock" + (counterh) + "[" + p + "].src");
counterh++;
} else {
document.hour.src = clock3[p].src;
counterh=1;
}
if (document.hourhour.src.indexOf(clock3[hRemain].src) < 0 && counterhh < 4) {
document.hourhour.src = eval("clock" + (counterhh) + "[" + hRemain + "].src");
counterhh++;
} else {
document.hourhour.src = clock3[hRemain].src;
counterhh=1;
}
var q=0;
while (mRemain > 9) {
q++;
mRemain = mRemain-10
}
if (document.minute.src.indexOf(clock3[q].src) < 0 && counterm < 4) {
document.minute.src = eval("clock" + (counterm) + "[" + q + "].src");
counterm++;
} else {
document.minute.src = clock3[q].src;
counterm=1;
}
if (document.minuteminute.src.indexOf(clock3[mRemain].src) < 0 && countermm < 4) {
document.minuteminute.src = eval("clock" + (countermm) + "[" + mRemain + "].src");
countermm++;
} else {
document.minuteminute.src = clock3[mRemain].src;
countermm=1;
}
var r=0;
while (sRemain > 9) {
r++;
sRemain = sRemain-10
}
if (document.second.src.indexOf(clock3[r].src) < 0 && counters < 4) {
document.second.src = eval("clock" + (counters) + "[" + r + "].src");
counters++;
} else {
document.second.src = clock3[r].src;
counters=1;
}
if (document.secondsecond.src.indexOf(clock3[sRemain].src) < 0 && counterss < 4) {
document.secondsecond.src = eval("clock" + (counterss) + "[" + sRemain + "].src");
counterss++;
} else {
document.secondsecond.src = clock3[sRemain].src;
counterss=1;
}
setTimeout("countdown()",20);
}
//-->
</script>

So actually no big deal!

Greetings,

groovebuster

 

[unregbaron]

thanks - I realised I could do that seconds after posting, but it didn't really help!

For me Java is the indiscovered country so I will have to look into it myself a bit more to understand...

Funny how the apple uk homepage doesn't bother with it..
http://www.apple.com/uk

thanks for your patience

u

 

[groovebuster]

Java != JavaScript.

Keep that in mind to prevent yourself from frustration and misunderstandings.

JavaScript is "just" a scripting enhancement for webbrowsers. Java is a complete Software development environment.

Greetings from Berlin,

groovebuster

 

[yamabushi]

Yes I really wish JavaScript and Java had dissimilar names to avoid confusion. I like the name Oak better anyways.

 

[skymaXimus]

Is there any that script could be compiled into a stand alone app or widget that I could place on my desktop all the time? That would be sweet.

 

[whocares]

Originally posted by skymaXimus
Is there any that script could be compiled into a stand alone app or widget that I could place on my desktop all the time? That would be sweet.

I can remember one thread about this. I think someone created a widget of it. I'll go look...


...found it:
https://forums.macrumors.com/showthread.php?s=&threadid=41249

 

[Chaszmyr]

Originally posted by skymaXimus
Is there any that script could be compiled into a stand alone app or widget that I could place on my desktop all the time? That would be sweet.

It should be widget-able... However, as a minor correction, scripts aren't "compiled"

 

[skymaXimus]

I know that scripts aren't compilied, but to run as a stand alone app some code would have to be compiled.

 

[FattyMembrane]

the whole purpose of a script is that it isn't compiled, so it can be run on any machine with an interpreter.

konfabulator is a javascript interpreter that lets you make "widgets" with javascript and applescript that can do all kinds of cool things.

 

[MetallicPenguin]

I think he meant "made" or "written." I know nothing of code, I'm just taking a stab here. lol, I once had a discussion with a programmer for about an hour about....actually now that I think about it, it was this very same subject, something with scripts and I can't remember it was a year ago.

 

[Gymnut]

Check version tracker, they have a version of what you're looking for.

http://www.versiontracker.com/dyn/moreinfo/macosx/21154

 

[Chealion]

Moving Apple's code into the widget took about a half hour. Of which 95% of that half hour was getting the hOffsets and vOffsets where I wanted them.

Konfabulator is awesome, and the code is very simple, although I still don't know why the flip effect isn't working in Konfabulator like Apple's web site.

 

[janey]

hey you could also do the same thing i did on my .mac homepage...do the lesser known one that causes less of a hassle
http://homepage.mac.com/jane_lee

 

[Kenny Pollock]

Look at mtswitch.net

 

[Wardofsky]

Now the mini countdown is just QuickTime, not as complex but simplicity was the key for Apple.
Just save the source (.mov) and watch it play on your desktop