2 Replies - 3356 Views - Last Post: 08 October 2009 - 03:37 AM

#1 deathwalker  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 16-May 09

World Times?

Posted 08 October 2009 - 02:09 AM

Hey guys i have been struggling for quite some time now. This is what i have sofar. What i am trying todo is print out each time zone in the right box but i am not able todo so. Any help will be much appreciate.

Thanks alot,Code and CSS below and attached pics

<html>

<head>


   <title>Jackson Electronics World Clock</title>
   <link href="je.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form name="Tick">
<input type="text" size="12" name="Clock">

</form>

<script type="text/javascript">
function show()
{
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM" 
if (hours>12)
{
dn="PM"
hours=hours-12
//this is so the hours written out is 
//in 12-hour format, instead of the default //24-hour format.
}
if (hours==0)
hours=12
//this is so the hours written out 
//when hours=0 (meaning 12a.m) is 12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
document.Tick.Clock.value=hours+":"+minutes+":"+seconds+" "+dn

setTimeout("show()",1000)
}
show()
</script>

<form name="Tick">

<div id="headbar">
   <img src="logo.jpg" alt="Jackson Electronics" />
   <h2>Corporate Headquarters World Clock</h2>
</div>

<div id="timemap">
<input type="text" size="12" name="Clock">

   <input id="place1" name="Clock" size="8"  />
   <input id="place2" name="place2" size="7"  />
   <input id="place3" name="place3" size="7"  />
   <input id="place4" name="place4" size="7"  />
   <input id="place5" name="place5" size="7"  />
   <input id="place6" name="place6" size="7"  />

   <img src="map.jpg" alt="World Map" id="map" />
   <table>
   <tr>
   <th id="name1">Houston</th>
   <th id="name2">London</th>
   <th id="name3">New York</th>
   <th id="name4">Seattle</th>
   <th id="name5">Sydney</th>
   <th id="name6">Tokyo</th>
   </tr>
   </table>
   <table>
   <tr>
   <td id="address3">
	  <p><b>Jackson Electronics USA</b><br />
		 10010 Park Street<br />
		 New York, NY 10001<br />
		 <b>Phone: </b>(212) 555-1209<br />
		 <b>Fax: </b>(212) 555-4001
	  </p>
   </td>
   <td id="address4">
	  <p><b>Jackson Electronics Ltd.</b><br />
		 2349 Mitchell Street<br />
		 Seattle, WA 65091<br />
		 <b>Phone: </b>(381) 555-5499<br />
		 <b>Fax: </b>(381) 555-3181
	  </p>
   </td>
   <td id="address1">
	  <p><b>Jackson Electronics Latin America</b><br />
		 5150 Shasta Lane<br />
		 Houston, TX 32821<br />
		 <b>Phone: </b>(817) 555-8190<br />
		 <b>Fax: </b>(817) 555-2881
	  </p>
   </td>
   </tr>
   <tr>
   <td id="address2">
	  <p><b>Jackson Electronics Europe</b><br />
		 18 Northland Avenue<br />
		 London, England WC2N 5EA<br />
		 <b>Phone: </b>(+44) 0 870 555 7081<br />
		 <b>Fax: </b>(+44) 0 870 555 1788
	  </p>
   </td>
   <td id="address5">
	  <p><b>Jackson Electronics Pacifica</b><br />
		 171-105 Thomas Street<br />
		 Sydney NSW 2000, Australia<br />
		 <b>Phone: </b>(+61) 2 5555 8993<br />
		 <b>Fax: </b>(+61) 2 5555 7171
	  </p>
   </td>
   <td id="address6">
	  <p><b>Jackson Electronics Asia</b><br />
		 1-2-99 Sumiyoshi<br />
		 Hakata-Ku<br />
		 Tokyo 140-8781 Japan<br />
		 <b>Phone: </b>(+81) 3 5551 7817<br />
		 <b>Fax: </b>(+81) 3 5551 2398
	  </p>
   </td>
   </tr>
   </table>
</div>

</form>
</body>
</html> 

CSS file
body {background-color: white; margin: 5px }
#headbar {width: 660px}
h2 {font-family: Arial, Helvetica, sans-serif; text-align: center;
	letter-spacing: 4; color: blue; margin: 0px}
#timemap {position: relative; top: 0px; left: 0px; width: 655px}

table {width: 100%; margin-top: 0px; border-top: 0px}
th {border: 1px solid black; font-weight: normal; font-family: monospace}
td {font-size: 10pt; width: 33%; vertical-align: top; padding: 5px; border: 1px solid black; 
	font-family: Arial, Helvetica, sans-serif}

input {font-size: 9pt; font-family: monospace; border: 1px solid black}

#place1 {position: absolute; top: 190px; left: 125px}
#place1, #name1, #address1 {background-color: rgb(231,231,231)}

#place2 {position: absolute; top: 130px; left: 305px}
#place2, #name2, #address2 {background-color: white}

#place3 {position: absolute; top: 160px; left: 175px}
#place3, #name3, #address3 {background-color: rgb(255,255,204)}

#place4 {position: absolute; top: 175px; left: 45px}
#place4, #name4, #address4 {background-color: rgb(153,255,255)}

#place5 {position: absolute; top: 300px; left: 575px}
#place5, #name5, #address5 {background-color: pink}

#place6 {position: absolute; top: 170px; left: 555px}
#place6, #name6, #address6 {background-color: rgb(204,204,153)}


Attached image(s)

  • Attached Image
  • Attached Image

This post has been edited by deathwalker: 08 October 2009 - 02:11 AM


Is This A Good Question/Topic? 0
  • +

Replies To: World Times?

#2 Christopher Elison  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 230
  • Joined: 29-December 08

Re: World Times?

Posted 08 October 2009 - 02:41 AM

I'm having a look at your code now, got the top clock working which shows local time.. working on the rest.
Was This Post Helpful? 0
  • +
  • -

#3 Christopher Elison  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 230
  • Joined: 29-December 08

Re: World Times?

Posted 08 October 2009 - 03:37 AM

Ok, not sure if this is what you entirely wanted, but try this, I've cleaned up the HTML and the CSS, I have the world clocks in 24 hour format, bit trickier to do them AM/PM, but I think it looks more business like if you leave them as 24 hour anyway:

First, the HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>Jackson Electronics World Clock</title>
		<link href="je.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
		/* <![CDATA[ */
			function show() {
				var isDST    = 1; // Set 'isDST' to either 1 OR 0 depending if Daylight savings is active.
				                  // I think DST varies according to location, so this might not be totally reliable
				
				var Digital  = new Date();
				var hours    = Digital.getHours();     // Gets local timezone hour
				var GMThours = Digital.getUTCHours();  // Gets the GMT hour (Universal time)
				var minutes  = Digital.getMinutes();
				var seconds  = Digital.getSeconds();
				
				var dn = "AM";

				if (hours > 12) {
					dn = "PM";
					hours = hours - 12;
					// this is so the hours written out is
					// in 12-hour format, instead of the default //24-hour format.
				}
								
				if (hours == 0) {
					hours = 12;
					// this is so the hours written out
					// when hours=0 (meaning 12a.m) is 12
				}
				
				if (minutes <= 9) {
					minutes = "0" + minutes;
				}
				
				if (seconds <= 9) {
					seconds = "0" + seconds;
				}
				
				// Now set the world clocks, offset the GMT hour relevant to each city:
				// 	Houston   Standard offset: [GMT -6]  DST: [GMT -5]
				// 	London    Standard offset: [GMT +0]  DST: [GMT +1]
				// 	New York  Standard offset: [GMT -5]  DST: [GMT -4]
				// 	Seattle   Standard offset: [GMT -8]  DST: [GMT -7]
				// 	Sydney    Standard offset: [GMT +10] DST: [GMT +11]
				// 	Tokyo     Standard offset: [GMT +9]  DST: [GMT +9]
				
				document.getElementById("place1").value = (GMThours - 6 + isDST)  + ":" + minutes + ":" + seconds;
				document.getElementById("place2").value = (GMThours + 0 + isDST)  + ":" + minutes + ":" + seconds;
				document.getElementById("place3").value = (GMThours - 5 + isDST)  + ":" + minutes + ":" + seconds;
				document.getElementById("place4").value = (GMThours - 8 + isDST)  + ":" + minutes + ":" + seconds;
				document.getElementById("place5").value = (GMThours + 10 + isDST) + ":" + minutes + ":" + seconds;
				document.getElementById("place6").value = (GMThours + 9 + isDST)  + ":" + minutes + ":" + seconds;
				
				document.getElementById("clock").value = hours + ":" + minutes + ":" + seconds + " " + dn;
				setTimeout("show()", 1000);
			}
		/* ]]> */
		</script>
	</head>
	<body>
		<form id="tick" action="#">
			
			<div id="headbar">
				<img src="logo.jpg" alt="Jackson Electronics" />
				<h2>Corporate Headquarters World Clock</h2>
			</div>
			
			<div id="timemap">
				<input id="clock" type="text" name="clock" size="12" />
				<input id="place1" name="place1" size="9" /> 
				<input id="place2" name="place2" size="9" /> 
				<input id="place3" name="place3" size="9" /> 
				<input id="place4" name="place4" size="9" /> 
				<input id="place5" name="place5" size="9" /> 
				<input id="place6" name="place6" size="9" /> 
				
				<img src="map.jpg" alt="World Map" id="map" />
   
				<table>
					<tr>
						<th id="name1">Houston</th>
						<th id="name2">London</th>
						<th id="name3">New York</th>
						<th id="name4">Seattle</th>
						<th id="name5">Sydney</th>
						<th id="name6">Tokyo</th>
					</tr>
				</table>
				
				<table>
					<tr>
						<td id="address3">
							<p><b>Jackson Electronics USA</b><br />
								10010 Park Street<br />
								New York, NY 10001<br />
								<b>Phone: </b>(212) 555-1209<br />
								<b>Fax: </b>(212) 555-4001
							</p>
						</td>
   
						<td id="address4">
							<p><b>Jackson Electronics Ltd.</b><br />
							2349 Mitchell Street<br />
							Seattle, WA 65091<br />
							<b>Phone: </b>(381) 555-5499<br />
							<b>Fax: </b>(381) 555-3181
							</p>
						</td>
	 
						<td id="address1">
							<p><b>Jackson Electronics Latin America</b><br />
							5150 Shasta Lane<br />
							Houston, TX 32821<br />
							<b>Phone: </b>(817) 555-8190<br />
							<b>Fax: </b>(817) 555-2881
							</p>
						</td>
					</tr>
					
					<tr>
						<td id="address2">
							<p><b>Jackson Electronics Europe</b><br />
							18 Northland Avenue<br />
							London, England WC2N 5EA<br />
							<b>Phone: </b>(+44) 0 870 555 7081<br />
							<b>Fax: </b>(+44) 0 870 555 1788
							</p>
						</td>
						
						<td id="address5">
							<p><b>Jackson Electronics Pacifica</b><br />
							171-105 Thomas Street<br />
							Sydney NSW 2000, Australia<br />
							<b>Phone: </b>(+61) 2 5555 8993<br />
							<b>Fax: </b>(+61) 2 5555 7171
							</p>
						</td>
   
						<td id="address6">
							<p><b>Jackson Electronics Asia</b><br />
								1-2-99 Sumiyoshi<br />
								Hakata-Ku<br />
								Tokyo 140-8781 Japan<br />
								<b>Phone: </b>(+81) 3 5551 7817<br />
								<b>Fax: </b>(+81) 3 5551 2398
							</p>
						</td>
					</tr>
				</table>
			</div>
		</form>
		<script type="text/javascript">
			// Call the show() function for first time after the page has loaded
			show();
		</script>
	</body>
</html>



And the CSS:
body {
	background-color: white; 
	margin: 5px;
}

#headbar {
	width: 660px;
}

h2 {
	font-family: Arial, Helvetica, sans-serif; 
	text-align: center;
  letter-spacing: 4; 
	color: blue; 
	margin: 0px;
}

#timemap {
	position: relative; 
	top: 0px; 
	left: 0px; 
	width: 655px;
}

table {
	width: 100%; 
	margin-top: 0px; 
	border-top: 0px;
}

th {
	border: 1px solid black; 
	font-weight: normal; 
	font-family: monospace;
}

td {
	font-size: 10pt; 
	width: 33%; 
	vertical-align: top; 
	padding: 5px; 
	border: 1px solid black;
	font-family: Arial, Helvetica, sans-serif;
}

input {
	font-size: 8pt;
	font-family: monospace;
	border: 1px solid black;
}

#place1 {position: absolute; top: 190px; left: 125px; text-align: center;}
#place1, #name1, #address1 {background-color: rgb(231,231,231)}

#place2 {position: absolute; top: 130px; left: 305px; text-align: center;}
#place2, #name2, #address2 {background-color: white}

#place3 {position: absolute; top: 160px; left: 175px; text-align: center;}
#place3, #name3, #address3 {background-color: rgb(255,255,204)}

#place4 {position: absolute; top: 175px; left: 45px; text-align: center;}
#place4, #name4, #address4 {background-color: rgb(153,255,255)}

#place5 {position: absolute; top: 300px; left: 575px; text-align: center;}
#place5, #name5, #address5 {background-color: pink}

#place6 {position: absolute; top: 170px; left: 555px; text-align: center;}
#place6, #name6, #address6 {background-color: rgb(204,204,153)}



The Standard/DST offsets might be wrong, so have a play about with it if the times are wrong (I blame the farmers for the DST mess!). Hope this helps!

This post has been edited by Christopher Elison: 08 October 2009 - 03:55 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1