I got from http://www.javascriptkit.com/ two scripts (one for drop-down world clock, one for date) and merged them in one. I changed a bit the text for credits (from "this script is provided by:" to "Credits") to fit in a 170 px left block. You can modify dimensions, font size, font face etc.
<table border="0" width="200" cellspacing="0" cellpadding="3">
<form name="where">
<tr>
<td width="100%">
<select name="city" size="1" onchange="updateclock(this);">
<option value="" selected>Local time</option>
<option value="2">Bucuresti</option>
<option value="-8">Oregon</option>
<option value="-5">Ontario</option>
<option value="0">London GMT</option>
<option value="1">Rome</option>
<option value="7">Bangkok</option>
<option value="8">Hong Kong</option>
<option value="9">Tokyo</option>
<option value="10">Sydney</option>
<option value="12">Fiji</option>
<option value="-10">Hawaii</option>
<option value="-8">San Francisco</option>
<option value="-5">New York</option>
<option value="-3">Buenos Aires</option>
</select>
</td>
</tr>
<tr>
<td width="100%">
<script language="JavaScript">
/*
Drop Down World Clock- By JavaScript Kit (http://www.javascriptkit.com)
Portions of code by Kurt @ http://www.btinternet.com/~kurt.grigg/javascript
This credit notice must stay intact
*/
if (document.all||document.getElementById)
document.write('<span id="worldclock" style="font:bold 16px Arial;"></span><br>')
zone=0;
isitlocal=true;
ampm='';
function updateclock(z){
zone=z.options[z.selectedIndex].value;
isitlocal=(z.options[0].selected)?true:false;
}
function WorldClock(){
now=new Date();
ofst=now.getTimezoneOffset()/60;
secs=now.getSeconds();
sec=-1.57+Math.PI*secs/30;
mins=now.getMinutes();
min=-1.57+Math.PI*mins/30;
hr=(isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone);
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360;
if (hr < 0) hr+=24;
if (hr > 23) hr-=24;
ampm = (hr > 11)?"PM":"AM";
statusampm = ampm.toLowerCase();
hr2 = hr;
if (hr2 == 0) hr2=12;
(hr2 < 13)?hr2:hr2 %= 12;
if (hr2<10) hr2="0"+hr2
var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs)+' '+statusampm;
if (document.all)
worldclock.innerHTML=finaltime
else if (document.getElementById)
document.getElementById("worldclock").innerHTML=finaltime
else if (document.layers){
document.worldclockns.document.worldclockns2.document.write(finaltime)
document.worldclockns.document.worldclockns2.document.close()
}
setTimeout('WorldClock()',1000);
}
window.onload=WorldClock
//-->
</script>
<!--Place holder for NS4 only-->
<ilayer id="worldclockns" width=100% height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 16px Arial;"></layer></ilayer>
<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<medium><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></medium>")
</script>
<font face="arial" size="-2">Credit:<a href="http://www.javascriptkit.com">JavaScript Kit</a></font>
</td>
</form>
</tr>
</table>
See live here (http://oregonstate.edu/~dogaruc/vizuinasmf/index.php)
Very cool, but I notice the box is stick out a little :)
on my page? looks okay to me in SMF default. (maybe depends on screen's resolution?).
see here:
(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fimg.photobucket.com%2Falbums%2Fv505%2Ftapirul%2Fth_script.jpg&hash=89c9a3934ee23de39a1c5b45bc57b1c9acf81700) (http://img.photobucket.com/albums/v505/tapirul/script.jpg)
what can be confusing about this script is the fact that the date is the local date regardless of what timezone you select in the clock (being separate scripts and not related)
I just installed this clock and I think it's phenominal. My only question is how could I change the display from 12/hr time to 24 hr time? I.e.: 1PM EST or GMT-5 in 12 hr time = 1:00 PM; in 24 hr time=13:00. Does anyone know what edits would be needed or what i could change to get the time displayed like this?
Thanks,
ACE844
If i am right, it goes by the time set into your pc.. try right clicking on your time and date, and change that to the 24hr format (or military time). ;)
Smoky,
Thanks, I'll try it.
I don't know much about javascript, but it looks like you need change
ampm = (hr > 11)?"PM":"AM";
statusampm = ampm.toLowerCase();
hr2 = hr;
if (hr2 == 0) hr2=12;
(hr2 < 13)?hr2:hr2 %= 12;
if (hr2<10) hr2="0"+hr2
var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs)+' '+statusampm;
to
hr2 = hr;
if (hr2<10) hr2="0"+hr2
var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs);
Be sure to keep a backup of the original code in case this doesn't give you what you want.
Thanks JPDeni.. didnt think of that as I thought it would pick up your time settings based off the pc you are using.. (didnt see that info in the script) hope it works for you guys.. ;)
JP,
The code change worked like a charm thank you so much for your help.
ACE844
is there a way to adjust the width in that code pls also with me using a dark theme can the colour of the font be changed etc ty
platinumUWE, don't be afraid to look at the code and give it a try. If you look you'll see there are some places that things can be chagned that are simply HTML. For instance: here's a place you can change the color of the font.<font color='000000' The width of the table is also set right at the beginning of the file. Give it a shot, you can do it!
okay got width done etc and the date showing in white but the acctual clock isnt showing as its set in ariel black messing with code to change colour if i can thxs for the help
edit:
i got it working ty ichbin very much for your help i have it now working thxs
No thanks to me ! Good work! See what you can do when you try. :)
Spoke to soon it has stoped working showing everytihng but the time which is in ariel black how would i change this line here to include a specific collour i wish to chose. i think this is the right bit of code. attached is a screen shot also ty.
<ilayer id="worldclockns" width=100% height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 16px Arial;"></layer></ilayer>
look at the style properties for the font in that line. Then go here to figure it out.
http://www.w3schools.com/css/css_font.asp
well i searched tried about 40 ways still wont change colour :idiot2:
Did you try
style="font:bold 16px Arial; color: #FFFFFF;"
sure JP, the old style=" _ tag;" ;)
It is nicer when the poster gets to figure it out for himself, but it just wasn't going to happen this time. :-)
ud got more chance of elvis joining the forum than me figuring that ty very much
:2funny:
You're welcome. ;D
It took abunch of tweaking, but I actaully finally got it to work correctly thank you all for the tips and help.
ACE