Clock Application or Script

HPNPilot1200 · Jan 25, 2007

I'm looking for a 24-hour clock/time application which can display at least zulu and eastern time simultaneously (preferably zulu and all US-domestic time zones) in large digits that I can display on my second monitor.

Does anyone know of such an application? If not, do you know of a script (java?) I can use to accomplish this on a webpage?

Thanks in advance,

ausrere · Jan 25, 2007

Here's one, although I don't know if the digits are large enough:

http://www.timeanddate.com/worldclock/personalapplet.html

I love this site..lots of cool time and date related stuff.

jesse · Jan 25, 2007

Why don't you just write one?

echo the time with PHP..maybe filter the output... really large text...throw a line of javascript in to refresh the page every 10 seconds or something. Run Internet Explorer full screen in kiosk mode. Done deal.

HPNPilot1200 · Jan 25, 2007

jesse said:
Why don't you just write one?

echo the time with PHP..maybe filter the output... really large text...throw a line of javascript in to refresh the page every 10 seconds or something. Run Internet Explorer full screen in kiosk mode. Done deal.

If I knew how to echo the time with PHP and filter the output, I'm sure I would. :redface:

jesse · Jan 25, 2007

HPNPilot1200 said:
If I knew how to echo the time with PHP and filter the output, I'm sure I would.

http://www.php.net

You learn by trying.

gkainz · Jan 25, 2007

xclock is included in just about any unix flavor, and there's a few XWindows shareware/freeware pkgs out there, I think...

tonycondon · Jan 25, 2007

Jason, buy two clocks, one a 24 hr clock, one a 12 hr clock. hang them on wall. use your second monitor for something besides telling time

JohnR · Jan 25, 2007

I thought pilots used huge, expensive, overly complicated wrist watches to tell time, not wall clocks.

mikea · Jan 25, 2007

tonycondon said:
Jason, buy two clocks, one a 24 hr clock, one a 12 hr clock. hang them on wall. use your second monitor for something besides telling time

It has always been thus. In the 1980s there were hundred of applications to turn your $3000 computer into a clock. And $3000 then was like $10,000 now.

KennyFlys · Jan 25, 2007

JohnR said:
I thought pilots used huge, expensive, overly complicated wrist watches to tell time, not wall clocks.

True... and they must cost a minimum of $350. But, if you're a real jet-setting pilot, you own a Breitling.

HPNPilot1200 · Jan 27, 2007

jesse said:
http://www.php.net

You learn by trying.

Thanks for the encouragement, I was able to create it with a little help from a friend of mine. http://hpnpilot1200.org/clock/date.php

The only thing I don't like is that the page is physically refreshed every second (to keep the seconds moving) rather than just the php script(s). Since the entire page is refreshed, the contents tend to "flicker" every second or so.

Thanks,

jesse · Jan 27, 2007

HPNPilot1200 said:
The only thing I don't like is that the page is physically refreshed every second (to keep the seconds moving) rather than just the php script(s). Since the entire page is refreshed, the contents tend to "flicker" every second or so.

Javascript might be a good option to avoid this--I'm sure you can create a clock in javascript that wouldn't require page reloads. Of course this would be more dependent on your system time. The php method you are using is basing it on the server's time.

Btw-- Post your code in here.. Use a
[ code ]

tag like that just like how quotes are used.

mikea · Jan 27, 2007

http://www.humanclock.com/clock.php

Only updates once a minute, though.

HPNPilot1200 · Jan 27, 2007

jesse said:
Javascript might be a good option to avoid this--I'm sure you can create a clock in javascript that wouldn't require page reloads. Of course this would be more dependent on your system time. The php method you are using is basing it on the server's time.

Btw-- Post your code in here.. Use a
[ code ]

tag like that just like how quotes are used.

Here's the code:

Code:

<head>
<STYLE TYPE="text/css">
<!--
H2
   {
   font-size:72pt;
   }
-->
</STYLE>
<STYLE TYPE="text/css">
<!--
H3
   {
   font-size:50pt;
   }
-->
</STYLE>
<noscript>
<meta http-equiv="refresh" content="1; url=date.php">
</noscript>

<script>
<!--
  var version = parseInt(navigator.appVersion)
  // replace is supported

  if (version>=4 || window.location.replace)
  setTimeout("window.location.replace('date.php')",1000);
  else
    window.location.href = "target.html"
// -->
</script>
<title>Date and Time</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<body bgcolor="#000000">
<table width="100%" border="0" bordercolor="#000000">
  <tr> 
    <td height="67" colspan="2"><div align="center"><font color="#33FF66" size="7" face="Arial"> 
        <?php
$now = time();
$eastern = $now + (3 * 3600);
print date ('l, F, j, Y', $eastern);
?>
        </font></div></td>
  </tr>
  <tr>
    <td height="205" colspan="3"><div align="center"><font color="#33FF66" face="BK Segment">
        <br><br><br><br><br><H2>ZULU:</H2></font><font color="#FF0000" face="BK Segment"><H2> 
          <?php
$zulu = $now + (8 * 3600);
print date ('H:i:s', $zulu);
?>
          </H2>
        </font></div></tr>
  <tr>
    <td width="50%" height="214"><div align="center"><font color="#33FF66" face="BK Segment">
        <br><br><br><br><H3>CENTRAL:</H3>
        </font><font color="#FF0000" face="BK Segment">
        <H3> 
          <?php
$central = $now + (2 * 3600);
print date ('H:i:s', $central);
?>
        </H3>
        </font><font color="#FF0000" face="BK Segment"></font></div></td>
    <td width="50%"><div align="center"><font color="#33FF66" face="BK Segment">
        <br><br><br><br><H3>EASTERN:</H3>
        </font><font color="#FF0000" face="BK Segment">
        <H3> 
          <?php
$eastern = $now + (3 * 3600);
print date ('H:i:s', $eastern);
?>
        </H3>
        </font></div></td>
  </tr>
  <tr> 
    <td height="214"><div align="center"><font color="#33FF66" face="BK Segment">
        <br><br><H3>PACIFIC:</H3>
        </font><font color="#FF0000" face="BK Segment">
        <H3> 
          <?php
$pacific = $now;
print date ('H:i:s', $pacific);
?>
        </H3>
        </font></div></td>
    <td><div align="center"><font color="#33FF66" face="BK Segment">
        <br><br><H3>MOUNTAIN:</H3>
        </font><font color="#FF0000" face="BK Segment">
        <H3> 
          <?php
$mountain = $now + (1 * 3600);
print date ('H:i:s', $mountain);
?>
        </H3>
        </font></div></td>
  </tr>
</table>
</body>

Now I'm trying to learn JavaScript. heh.

HPNPilot1200 · Jan 27, 2007

Well this script displays the correct time, but doesn't update per the 1000ms interval.

Code:

<span id="dt"></span>
<script type="text/javascript">
<!--
var currentTime = new Date()
var hours = currentTime.getUTCHours()
var minutes = currentTime.getUTCMinutes()
if (minutes < 10)
minutes = "0" + minutes
var seconds = currentTime.getUTCSeconds()
if (seconds < 10)
seconds = "0" + seconds
var UTCTime = (hours + ":" + minutes + ":" + seconds)

setInterval('dispUTCtime()', 1000);

[B] function dispUTCtime() {
  document.getElementById('dt').innerHTML = UTCTime;
}[/B]
//-->
</script>

If I replace the bolded portion of it with this:

Code:

function dispUTCtime() {
  myUTC = new Date();
  document.getElementById('dt').innerHTML = myUTC;
}

It updates, but includes date and time, which isn't what I want.

Greebo · Jan 27, 2007

Thats because a date, by itself, includes just that, the date.

If you wan't just the time portion, you need to move the code that formats the time string for you into the function that executes every second.

Code:

<span id="dt"></span>
<script type="text/javascript">
<!--
setInterval('dispUTCtime()', 1000);

function dispUTCtime() {
   var currentTime = new Date()
    var hours = currentTime.getUTCHours()
   var minutes = currentTime.getUTCMinutes()
    if (minutes < 10)
    minutes = "0" + minutes
    var seconds = currentTime.getUTCSeconds()
    if (seconds < 10)
    seconds = "0" + seconds
    var UTCTime = (hours + ":" + minutes + ":" + seconds)
   document.getElementById('dt').innerHTML = myUTC;
}
--></script>

see the call to setinterval tells the browser to execute the code in dispUTCtime every 1000 miliseconds. The code that formatted the date string only occurs when the page is loaded. By moving the code into the function called, you execute the same logic every second to get your time string. Well you should - I just moved the code, I didn't test it.

HPNPilot1200 · Jan 28, 2007

Greebo said:
Thats because a date, by itself, includes just that, the date.

If you wan't just the time portion, you need to move the code that formats the time string for you into the function that executes every second.

see the call to setinterval tells the browser to execute the code in dispUTCtime every 1000 miliseconds. The code that formatted the date string only occurs when the page is loaded. By moving the code into the function called, you execute the same logic every second to get your time string. Well you should - I just moved the code, I didn't test it.

Thanks! I was able to obtain a similar code from another forum, however my next challenge is to figure out a way to manipulate it to allow for additional time zones to be displayed and updated every 1000 milliseconds:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script type="text/javascript">

function dispUTCtime() {
 var currentTime = new Date();
 var hours = currentTime.getUTCHours();
 var minutes = currentTime.getUTCMinutes();
 var seconds = currentTime.getUTCSeconds();
 document.getElementById('dt').innerHTML = (((hours<10)?'0':'')+hours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 setTimeout('dispUTCtime()',1000);
}

</script>

</head>

<body onload="dispUTCtime();" >

<span id="dt"></span>
</body>
</html>

HPNPilot1200 · Jan 28, 2007

Well I finally figured it out. The only real problem is that the page isn't displaying correctly in Firefox (too much space between items), but I use IE on my second monitor anyway.

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<STYLE TYPE="text/css">
<!--
H2
   {
   font-size:72pt;
   }
-->
</STYLE>
<STYLE TYPE="text/css">
<!--
H3
   {
   font-size:50pt;
   }
-->
</STYLE>
<script type="text/javascript">
function dispUTCtime() {
 var currentTime = new Date();
 var hours = currentTime.getUTCHours();
 var easthours = (hours - 5)
 var centralhours = (hours - 6)
 var mountainhours = (hours - 7)
 var pacifichours = (hours - 8)
 var minutes = currentTime.getUTCMinutes();
 var seconds = currentTime.getUTCSeconds();
 var cDayT = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
 var cMonthT = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
 var cTime = new Date();
 var cYear = cTime.getYear();
 if(cYear<1000)cYear += 1900;
 var cMonth = cMonthT[cTime.getMonth()];
 var cDay = cDayT[cTime.getDay()];
 var cDate = cTime.getDate();
 document.getElementById('utc').innerHTML = (((hours<10)?'0':'')+hours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('eastern').innerHTML = (((easthours<10)?'0':'')+easthours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('central').innerHTML = (((centralhours<10)?'0':'')+centralhours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('mountain').innerHTML = (((mountainhours<10)?'0':'')+mountainhours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('pacific').innerHTML = (((pacifichours<10)?'0':'')+pacifichours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('date').innerHTML = cDay + ", " + cMonth + " " + cDate + ", " + cYear;
 setTimeout('dispUTCtime()',1000);
}
</script>
<title>Date and Time</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<body bgcolor="#000000">
<table width="100%" border="0" bordercolor="#000000">
  <tr> 
    <td height="67" colspan="2"><div align="center"><font color="#33FF66" size="7" face="Arial"> 
<body onload="dispUTCtime();" >
<span id="date"></span>
        </font></div></td>
  </tr>
  <tr>
    <td height="205" colspan="3"><div align="center"><font color="#33FF66" face="BK Segment">
        <br><br><br><br><br><H2>ZULU:</H2></font><font color="#FF0000" face="BK Segment"><H2> 
<body onload="dispUTCtime();" >
<span id="utc"></span>
          </H2>
        </font></div></tr>
  <tr>
    <td width="50%" height="214"><div align="center"><font color="#33FF66" face="BK Segment">
        <br><br><br><br><H3>CENTRAL:</H3>
        </font><font color="#FF0000" face="BK Segment">
        <H3> 
<body onload="dispUTCtime();" >
<span id="central"></span>
        </H3>
        </font><font color="#FF0000" face="BK Segment"></font></div></td>
    <td width="50%"><div align="center"><font color="#33FF66" face="BK Segment">
        <br><br><br><br><H3>EASTERN:</H3>
        </font><font color="#FF0000" face="BK Segment">
        <H3> 
<body onload="dispUTCtime();" >
<span id="eastern"></span>
        </H3>
        </font></div></td>
  </tr>
  <tr> 
    <td height="214"><div align="center"><font color="#33FF66" face="BK Segment">
        <br><br><H3>PACIFIC:</H3>
        </font><font color="#FF0000" face="BK Segment">
        <H3> 
<body onload="dispUTCtime();" >
<span id="pacific"></span>
        </H3>
        </font></div></td>
    <td><div align="center"><font color="#33FF66" face="BK Segment">
        <br><br><H3>MOUNTAIN:</H3>
        </font><font color="#FF0000" face="BK Segment">
        <H3> 
<body onload="dispUTCtime();" >
<span id="mountain"></span>
        </H3>
        </font></div></td>
  </tr>
</table>
</body> 
</html>

gkainz · Jan 28, 2007

ah... geeks!

Second monitor: $229
Writing clock app: $1250 in equivalent hourly rate of wasted time (but booked as "training")
Duplicating the functionality of a $6 LCD clock: Priceless!!!

HPNPilot1200 · Jan 28, 2007

gkainz said:
ah... geeks!

Second monitor: $229
Writing clock app: $1250 in equivalent hourly rate of wasted time (but booked as "training")
Duplicating the functionality of a $6 LCD clock: Priceless!!!

That'll be $1479.00, sir.

CJones · Jan 28, 2007

gkainz said:
ah... geeks!

Second monitor: $229
Writing clock app: $1250 in equivalent hourly rate of wasted time (but booked as "training")
Duplicating the functionality of a $6 LCD clock: Priceless!!!

Cut him some slack, he's just getting ready for a career with NASA.

KennyFlys · Jan 28, 2007

http://webpages.charter.net/kennyflys/Time_Page.htm

I didn't just violate some copyright, did I???

So.... now, can you write such a simple page for a Palm Treo?

HPNPilot1200 · Jan 28, 2007

KennyFlys said:
http://webpages.charter.net/kennyflys/Time_Page.htm

I didn't just violate some copyright, did I???

So.... now, can you write such a simple page for a Palm Treo?

No, I'll give you permission to display it on that site, but if you don't mind, use this code instead:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<STYLE TYPE="text/css">
<!--
H2
   {
   font-size:72pt;
   }
-->
</STYLE>
<STYLE TYPE="text/css">
<!--
H3
   {
   font-size:50pt;
   }
-->
</STYLE>
<script type="text/javascript">
<!-- Original:  Jason Herman (jason@hpnpilot1200.org) -->
function dispUTCtime() {
 var currentTime = new Date();
 var hours = currentTime.getUTCHours();
 var easthours = (hours - 5)
 var centralhours = (hours - 6)
 var mountainhours = (hours - 7)
 var pacifichours = (hours - 8)
 var minutes = currentTime.getUTCMinutes();
 var seconds = currentTime.getUTCSeconds();
 var cDayT = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
 var cMonthT = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
 var cTime = new Date();
 var cYear = cTime.getYear();
 if(cYear<1000)cYear += 1900;
 var cMonth = cMonthT[cTime.getMonth()];
 var cDay = cDayT[cTime.getDay()];
 var cDate = cTime.getDate();
 document.getElementById('utc').innerHTML = (((hours<10)?'0':'')+hours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('eastern').innerHTML = (((easthours<10)?'0':'')+easthours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('central').innerHTML = (((centralhours<10)?'0':'')+centralhours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('mountain').innerHTML = (((mountainhours<10)?'0':'')+mountainhours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('pacific').innerHTML = (((pacifichours<10)?'0':'')+pacifichours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('date').innerHTML = cDay + ", " + cMonth + " " + cDate + ", " + cYear;
 setTimeout('dispUTCtime()',1000);
}
</script>
<title>Date and Time</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="time.css" rel="stylesheet" type="text/css">
</head>

<body>
<body bgcolor="#000000">
<table width="100%" border="0" bordercolor="#000000">
  <tr> 
    <td height="67" colspan="2"><div align="center"><font color="#33FF66" size="7" face="Arial"> 
<body onload="dispUTCtime();" >
<span id="date"></span>
        </font></div></td>
  </tr>
  <tr>
    <td height="205" colspan="3"><div align="center"><font color="#33FF66" face="BK Segment, Arial">
        <br><br><br><br><br><H2>ZULU:</H2></font><font color="#FF0000" face="BK Segment, Arial"><H2> 
<body onload="dispUTCtime();" >
<span id="utc"></span>
          </H2>
        </font></div></tr>
  <tr>
    <td width="50%" height="214"><div align="center"><font color="#33FF66" face="BK Segment, Arial">
        <br><br><br><br><H3>CENTRAL:</H3>
        </font><font color="#FF0000" face="BK Segment, Arial">
        <H3> 
<body onload="dispUTCtime();" >
<span id="central"></span>
        </H3>
        </font><font color="#FF0000" face="BK Segment, Arial"></font></div></td>
    <td width="50%"><div align="center"><font color="#33FF66" face="BK Segment, Arial">
        <br><br><br><br><H3>EASTERN:</H3>
        </font><font color="#FF0000" face="BK Segment, Arial">
        <H3> 
<body onload="dispUTCtime();" >
<span id="eastern"></span>
        </H3>
        </font></div></td>
  </tr>
  <tr> 
    <td height="214"><div align="center"><font color="#33FF66" face="BK Segment, Arial">
        <br><br><H3>PACIFIC:</H3>
        </font><font color="#FF0000" face="BK Segment, Arial">
        <H3> 
<body onload="dispUTCtime();" >
<span id="pacific"></span>
        </H3>
        </font></div></td>
    <td><div align="center"><font color="#33FF66" face="BK Segment, Arial">
        <br><br><H3>MOUNTAIN:</H3>
        </font><font color="#FF0000" face="BK Segment, Arial">
        <H3> 
<body onload="dispUTCtime();" >
<span id="mountain"></span>
        </H3>
        </font></div></td>
  </tr>
    <tr>
  <td height="20" colspan="2"><div align="left"><font color="#33FF66" size="2" face="Arial, Helvetica, sans-serif">© 
        Copyright 2007, Jason Herman</font></div></td>
  </tr>
</table>
</body> 
</html>

It is slightly updated and includes a small copyright line at the bottom (I forgot to put that in before I posted it on PoA). As for the Treo, just make the font size smaller (<H2> and <H3> tags).

Thanks!

gkainz · Jan 28, 2007

My treo came with World Clock ... shows 2 time zones and the world map with daylight/dark ... of course, I can't find a suitable link to post a screen shot from right now ...

jesse · Jan 28, 2007

Congrats Jason!!!

There are few people who will go through the effort of learning all of this just to accomplish something so little. The fact that you did says a lot about you.

HPNPilot1200 · Jan 28, 2007

jesse said:
Congrats Jason!!!

There are few people who will go through the effort of learning all of this just to accomplish something so little. The fact that you did says a lot about you.

Thanks Jesse, I appreciate that. When you get a chance, any ideas why the page doesn't look right in Firefox? I can't figure it out.

HPNPilot1200 · Jan 28, 2007

Well I had the page up on my screen and realized I had forgotten to include some code to correct for the offset when UTC is less than 8. It tried to output a negative time.

This should do it:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<STYLE TYPE="text/css">
<!--
H2
   {
   font-size:72pt;
   }
-->
</STYLE>
<STYLE TYPE="text/css">
<!--
H3
   {
   font-size:50pt;
   }
-->
</STYLE>
<script type="text/javascript">
<!-- Original:  Jason Herman (jason@hpnpilot1200.org) -->
function dispUTCtime() {
 var currentTime = new Date();
 var hours = currentTime.getUTCHours();
 var utchours = currentTime.getUTCHours();
 if (utchours<8)utchours += 24;
 var easthours = (utchours - 5);
 if (easthours>23)easthours -= 24;
 var centralhours = (utchours - 6);
 if (centralhours>23)centralhours -= 24;
 var mountainhours = (utchours - 7);
 if (mountainhours>23)mountainhours -= 24;
 var pacifichours = (utchours - 8);
 if (pacifichours>23)pacifichours -= 24;
 var minutes = currentTime.getUTCMinutes();
 var seconds = currentTime.getUTCSeconds();
 var cDayT = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
 var cMonthT = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
 var cTime = new Date();
 var cYear = cTime.getYear();
 if(cYear<1000)cYear += 1900;
 var cMonth = cMonthT[cTime.getMonth()];
 var cDay = cDayT[cTime.getDay()];
 var cDate = cTime.getDate();
 document.getElementById('utc').innerHTML = (((hours<10)?'0':'')+hours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('eastern').innerHTML = (((easthours<10)?'0':'')+easthours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('central').innerHTML = (((centralhours<10)?'0':'')+centralhours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('mountain').innerHTML = (((mountainhours<10)?'0':'')+mountainhours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('pacific').innerHTML = (((pacifichours<10)?'0':'')+pacifichours) + ":" + (((minutes<10)?'0':'')+minutes) + ":" + (((seconds<10)?'0':'')+seconds);
 document.getElementById('date').innerHTML = cDay + ", " + cMonth + " " + cDate + ", " + cYear;
 setTimeout('dispUTCtime()',1000);
}
</script>
<title>Date and Time</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="time.css" rel="stylesheet" type="text/css">
</head>

<body>
<body bgcolor="#000000">
<table width="100%" border="0" bordercolor="#000000">
  <tr> 
    <td height="67" colspan="2"><div align="center"><font color="#33FF66" size="7" face="Arial"> 
<body onload="dispUTCtime();" >
<span id="date"></span>
        </font></div></td>
  </tr>
  <tr>
    <td height="205" colspan="3"><div align="center"><font color="#33FF66" face="BK Segment, Arial">
        <br><br><br><br><br><H2>ZULU:</H2></font><font color="#FF0000" face="BK Segment, Arial"><H2> 
<body onload="dispUTCtime();" >
<span id="utc"></span>
          </H2>
        </font></div></tr>
  <tr>
    <td width="50%" height="214"><div align="center"><font color="#33FF66" face="BK Segment, Arial">
        <br><br><br><br><H3>CENTRAL:</H3>
        </font><font color="#FF0000" face="BK Segment, Arial">
        <H3> 
<body onload="dispUTCtime();" >
<span id="central"></span>
        </H3>
        </font><font color="#FF0000" face="BK Segment, Arial"></font></div></td>
    <td width="50%"><div align="center"><font color="#33FF66" face="BK Segment, Arial">
        <br><br><br><br><H3>EASTERN:</H3>
        </font><font color="#FF0000" face="BK Segment, Arial">
        <H3> 
<body onload="dispUTCtime();" >
<span id="eastern"></span>
        </H3>
        </font></div></td>
  </tr>
  <tr> 
    <td height="214"><div align="center"><font color="#33FF66" face="BK Segment, Arial">
        <br><br><H3>PACIFIC:</H3>
        </font><font color="#FF0000" face="BK Segment, Arial">
        <H3> 
<body onload="dispUTCtime();" >
<span id="pacific"></span>
        </H3>
        </font></div></td>
    <td><div align="center"><font color="#33FF66" face="BK Segment, Arial">
        <br><br><H3>MOUNTAIN:</H3>
        </font><font color="#FF0000" face="BK Segment, Arial">
        <H3> 
<body onload="dispUTCtime();" >
<span id="mountain"></span>
        </H3>
        </font></div></td>
  </tr>
    <tr>
  <td height="20" colspan="2"><div align="left"><font color="#33FF66" size="2" face="Arial, Helvetica, sans-serif">© 
        Copyright 2007, Jason Herman</font></div></td>
  </tr>
</table>
</body> 
</html>

*Doh!*

Greebo · Jan 29, 2007

HPNPilot1200 said:
Thanks Jesse, I appreciate that. When you get a chance, any ideas why the page doesn't look right in Firefox? I can't figure it out.

What, exactly, looks wrong?

I'm looking at the html on the charter.net page - you've got fixed heights on your TDs at 214px (tallish) and lots of BRs inside your TDs. When you specify a fixed height and then use BRs to fix the height, you're giving mixed signals. Choose one method or the other. I recommend using the table height method, and insert empty rows with fixed heights and an nbsp in the cell to adjust the position of the things below it.

mikea · Jan 29, 2007

HPNPilot1200 said:
If not, do you know of a script (java?) I can use to accomplish this on a webpage?

[pedantic mode]
Javascript is not Java.
[/pedantic mode]

Greebo · Jan 29, 2007

mikea said:
[pendantic mode]
Javascript is not Java.
[/pendantic mode]

[pedantic mode]
Pendantic is not a word.
[/pedantic mode]

mikea · Jan 29, 2007

Greebo said:
[pedantic mode]
Pendantic is not a word.
[/pedantic mode]

What ever happened to the spell checker? I can't count on the one in Firefox...ohhhhh...I guess I can. I just need to not ignore it.

HPNPilot1200 · Jan 29, 2007

Greebo said:
What, exactly, looks wrong?

I'm looking at the html on the charter.net page - you've got fixed heights on your TDs at 214px (tallish) and lots of BRs inside your TDs. When you specify a fixed height and then use BRs to fix the height, you're giving mixed signals. Choose one method or the other. I recommend using the table height method, and insert empty rows with fixed heights and an nbsp in the cell to adjust the position of the things below it.

I took out all of the <br> tags and inserted empty rows like you suggested, but unfortunately the problem still occurs. I made the changes to this page: http://hpnpilot1200.org/clock/date2.php. Compare the page between firefox and IE and you'll see much more space between text/digits in FireFox (at least I do).

mikea said:
[pedantic mode]
Javascript is not Java.
[/pedantic mode]

Yes, Mike, I know. I made a typo in my post.

Greebo · Jan 29, 2007

I'm not seeing anything obvious about the height, but I AM seeing a big bad no-no from an HTML perspective.
(using { and } for < and > here)

You repeatedly have {body onload="dispUTCtime();"} nested throughout your html.
BODY is a tag that falls in one place only - UNDER {HTML} - once.
You should have:
{html}
{head}...{/head}
{body onload="dispUTCtime();"}
...
{/body}
{/html}

Repeating it throughout not violates HTML standards and adds no value.

Now - regarding the formatting, I *suspect* that the H3 tags are the issue. Browsers are at some liberty to determine how to format H tags. Instead of H tags, why not specifically set font characteristics, or better, set CSS style tags?

HPNPilot1200 · Jan 29, 2007

Greebo said:
I'm not seeing anything obvious about the height, but I AM seeing a big bad no-no from an HTML perspective.
(using { and } for < and > here)

You repeatedly have {body onload="dispUTCtime();"} nested throughout your html.
BODY is a tag that falls in one place only - UNDER {HTML} - once.
You should have:
{html}
{head}...{/head}
{body onload="dispUTCtime();"}
...
{/body}
{/html}

Repeating it throughout not violates HTML standards and adds no value.

Now - regarding the formatting, I *suspect* that the H3 tags are the issue. Browsers are at some liberty to determine how to format H tags. Instead of H tags, why not specifically set font characteristics, or better, set CSS style tags?

I took out all of those extra body tags, I'm not quite sure why I left them there, but thanks for pointing them out.

I used style tags in the <head> section to define the different headings (<H2> and <H3>) because it was the only way I knew how to accomplish defining font size with simple tags. What would be the best way to handle this?

Thanks,
Jason

Greebo · Jan 29, 2007

Defining them in the header section is a good approach. Its either there or in a separate CSS file, and that would be overkill for this, I think.

HPNPilot1200 · Jan 29, 2007

Greebo said:
Defining them in the header section is a good approach. Its either there or in a separate CSS file, and that would be overkill for this, I think.

Okay. Do you still believe the heading tags are to blame for the formatting? Not much of a way around it.

Thanks for the help. I'm learning a lot.

Jason

Greebo · Jan 29, 2007

HPNPilot1200 said:
Okay. Do you still believe the heading tags are to blame for the formatting? Not much of a way around it.

I haven't had time to look in detail, so I can't say with certainty.

You can use spans instead of header tags, however, and assign them CSS classes with specific font attributes.

Clock Application or Script

En-Route

Pattern Altitude

Touchdown! Greaser!

En-Route

Touchdown! Greaser!

Final Approach

Gastons CRO (Chief Dinner Reservation Officer)

Final Approach

Touchdown! Greaser!

KennyFlys

Guest

En-Route

Touchdown! Greaser!

Touchdown! Greaser!

En-Route

En-Route

N9017H - C172M (1976)

En-Route

En-Route

Final Approach

En-Route

Final Approach

KennyFlys

Guest

En-Route

Final Approach

Touchdown! Greaser!

En-Route

En-Route

N9017H - C172M (1976)

Touchdown! Greaser!

N9017H - C172M (1976)

Touchdown! Greaser!

En-Route

N9017H - C172M (1976)

En-Route

N9017H - C172M (1976)

En-Route

N9017H - C172M (1976)