Help with Local Time Script Mod

**moscarda** · 01-09-2009, 11:54 PM

1) Script Title:
Local Time

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex6/localtime.htm

3) Describe problem:

I'm working with a very specific style on this site I'm developing, and I need to display the local time in a specific font, with no anti-aliasing. Since you can't control anti-aliasing with css, or embed fonts without flash, I'm hoping I could use this local time script to display an image version of the time rather than text version. It would have to replace each digit or character with an image. Any ideas or scripting help would be appreciated.

Here is what I need it to look like:

**jscheuer1** · 01-10-2009, 03:51 PM

Well, of course you would need all of your various numbers as images, gif would probably be best. You would need them for 0 through 9 (ex: 5.gif). And you would need a colon.gif image, and one AM.gif, one PM.gif, and images for the days of the week (ex: Mon.gif). Put all of the images in the same folder as the page.

To output the image tags for the time numbers, a helper function would be good:

Code:

var num2image = function(n){
 n = n.toString(10);
 if (n.length == 1)
  return '<img src="' + n + '.gif">';
 return '<img src="' + n.charAt(0) + '.gif"><img src="' + n.charAt(1) + '.gif">';
};

and a variable for the oft repeated colon:

Code:

var cln = '<img src="colon.gif">';

These can both go at the very end of the script. Now we can use them as we edit this line:

Code:

this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" "+ampm+" ("+dayofweek+")"

Replace it with these:

Code:

this.container.innerHTML = num2image(formatField(hour, 1)) + cln + num2image(formatField(minutes)) + cln +
num2image(formatField(seconds)) + '<img src="' + ampm + '.gif">' + '<img src="' + dayofweek + '.gif">';

Just make sure to follow all of that, and to use the "short" parameter for the displaymode in the script call, ex:

Code:

<script type="text/javascript">
new showLocalTime("timecontainer", "server-ssi", 0, "short")
</script>

and you should be all set.

**moscarda** · 01-11-2009, 01:05 AM

thats great! works perfectly... do you think i should compile everything as a demo and submit it as a script so other people could use it / modify it? i'd give you all the credit of course...

**jscheuer1** · 01-11-2009, 05:46 AM

Glad it's working out for you. Two improvements would be -

Preloading all of the .gif images mentioned. These images should be optimized for smallest byte size with acceptable resolution BTW.

Changing the large + concat to a join() method on an array:

Code:

this.container.innerHTML = [num2image(formatField(hour, 1)), cln, num2image(formatField(minutes)), cln,
num2image(formatField(seconds)), '<img src="' + ampm + '.gif">', '<img src="' + dayofweek + '.gif">'].join('');

As for submitting this, I think it is too narrow of a customization to qualify. If DD has thought of it (which he may have), if he considered it worth adding to the demo page as an option, he would have already done so.

But when it comes to others' contributions to DD scripts, in my experience DD likes them to be more dramatic than this.

**moscarda** · 01-11-2009, 06:12 AM

okay i wont submit it.

one more issue im having with the script is the server time call, i cant get it to work. it says it only works if you save your page as php or whatever... but the time displayed when i do that is just blank. this page is saved as htm:

http://www.dynamicdrive.com/dynamicindex6/localtime.htm

and works just fine... whats the deal? i just need it to display new york time for my purposes. what do i change in the code to achieve that?

**jscheuer1** · 01-11-2009, 06:29 AM

That's between you and your host. It will not work locally unless your local computer is a server and you are viewing the page on it as a server.

There are various methods for obtaining the server time with this script:

Servermode (string): Valid values are either "server-php", "server-asp", or "server-ssi", to indicate this page as either of type, PHP, ASP, or SSI.

Your host must support one of these server side methods, and your page's extension (.php, .asp, whatever) must indicate to the host that it is to parse the page on the server side before sending it to the browser.

As far as I can tell, the page on DD - the demo is using server-ssi (from the source code of the demo page):

Code:

new showLocalTime("timebox", "server-ssi", 0, "short")
new showLocalTime("timebox2", "server-ssi", 600, "short")
new showLocalTime("timebox3", "server-ssi", 240, "short")
new showLocalTime("timebox4", "server-ssi", 1080, "short")

Apparently for hosts supporting this type of server side code, the file extension may be .htm - either that or the host is configured to parse all .htm files as ssi.

But the file extension is only helpful if the server supports it for the type of server side code configured in the Servermode parameter.

**moscarda** · 01-11-2009, 06:40 AM

yeah i've tried it both ways, either as ssi and saving as .htm or as php and saving as .php ... neither work.

the page i'm trying to put it on is here:

http://moscarda.com/clock/anylink.php

and i'm sure everything else is working correctly, because it did before i tried to get it to display the time off the server.