Free JavaScript: timezone scroller

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Free JavaScript: timezone scroller
This free copy and paste JavaScript scroller displays the time of about 20 world-capitals. You may add as many locations as you like. Each location can be linked. Very easy configuration of locations (time-zones), font-attributes, colors, size and speed. Internet Explorer 6x/7x/8x/9x, Firefox 2x/3x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x/5x/6x/7x/8x.

Configuration:

Step 1: Open your webpage and paste the following code anywhere between <body> and </body>:

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a hyperlink to http://www.fabulant.com on the webpage 
// where this script will be running.

// Add as many worltimes as you like. The last worldtime does not end with a comma!!!
// Study carefully the setting of the commas!!!

/////////////////////////////////////////////////////////////////////////////
// CONFIGURATION ZONE STARTS HERE
/////////////////////////////////////////////////////////////////////////////

// The location line contains the name of a city or a country
// The shift line contains the difference to Greenich Mean Time (in hours)
// The url line contains any link you like. Each location may have a link.
// If you dont't want to add a link enter "#" instead of "http://www.anyurl.com" (see second sample)

var worldtime = [
{
location : "Azores",
shift : -1,
url : "http://www.fabulant.com"
},
{
location : "Baghdad",
shift : 3,
url : "#"
},
{
location : "Berlin",
shift : 1,
url : "http://www.fabulant.com"
},
{
location : "Buenos Aires",
shift : -3,
url : "http://www.fabulant.com"
},
{
location : "Chicago",
shift : -6,
url : "http://www.fabulant.com"
},
{
location : "Denver",
shift : -7,
url : "http://www.fabulant.com"
},
{
location : "Hong Kong",
shift : 8,
url : "http://www.fabulant.com"
},
{
location : "Honolulu",
shift : -10,
url : "http://www.fabulant.com"
},
{
location : "Johannesburg",
shift : 2,
url : "http://www.fabulant.com"
},
{
location : "Kairo",
shift : 2,
url : "http://www.fabulant.com"
},
{
location : "Lima",
shift : -5,
url : "http://www.fabulant.com"
},
{
location : "London",
shift : -0,
url : "http://www.fabulant.com"
},
{
location : "Mexico City",
shift : -6,
url : "http://www.fabulant.com"
},
{
location : "Moscow",
shift : 3,
url : "http://www.fabulant.com"
},
{
location : "New York",
shift : -5,
url : "http://www.fabulant.com"
},

{
location : "Paris",
shift : 1,
url : "http://www.fabulant.com"
},

{
location : "Perth",
shift : 8,
url : "http://www.fabulant.com"
},
{
location : "Rio de Janheiro",
shift : -2,
url : "http://www.fabulant.com"
},
{
location : "San Francisco",
shift : -8,
url : "http://www.fabulant.com"
},
{
location : "Sydney",
shift : 1,
url : "http://www.fabulant.com"
},
{
location : "Tokyo",
shift : 9,
url : "http://www.fabulant.com"
}

]

// height of the scrollerbox (pixels)
var scrollerheight=22

// borderwidth of the scroller (pixels)
var scrollerborder=2

// backgroundcolor of the scroller
var scrollbg="#AAAAAA"

// font attributes of the locationzone (that displays the location such as London, Paris)
var locationzonefont="Arial"
var locationzonefontsize=9
var locationzonecolor="yellow"
var locationzonerollovercolor="#ffffff"
var locationzoneweight="bold"
var locationzonestyle="normal"
var locationzonebackgroundcolor="red"
var locationzonewidth=110
var locationzonealign="left"

// font attributes of the timezone (that displays the time such as 11:45:32)
var timezonefont="Arial"
var timezonefontsize=9
var timezonecolor="red"
var timezoneweight="normal"
var timezonestyle="normal"
var timezonebackgroundcolor="yellow"
var timezonewidth=70
var timezonealign="left"

// standstill time (milliseconds)
var standstill=1000

/////////////////////////////////////////////////////////////////////////////
// CONFIGURATION ZONE ENDS HERE
/////////////////////////////////////////////////////////////////////////////

// Do not edit below this line
var scrollertop=0
var scrollerleft=0

var cliptop=0
var clipbottom=0
var clipleft=0
var clipright=locationzonewidth+timezonewidth

var i_message=0
var mes_joined
var mes_split
var contenttext
var contentbg=""

var step=2
var pause=20
var i_worldtime=0
var thistime
var thisline=""
var shifthours
var localhours
var seconds
var minutes
var hours

function initiate() {
		thistime= new Date()
		hours=thistime.getUTCHours()
		hours=eval(hours)
		shifthours=worldtime[i_worldtime].shift
		localhours=eval(shifthours+hours)
		if (localhours <0) {localhours=24+localhours}
		if (localhours >=24) {localhours=localhours-24}
	
		minutes=thistime.getUTCMinutes()
		seconds=thistime.getUTCSeconds()
	
		if (worldtime[i_worldtime]=='Delhi') {
			minutes=eval(minutes+30)
			if (minutes>=60) {
				minutes=eval(minutes-60)
				localhours=eval(localhours+1)
			}
		}
		if (eval(minutes) < 10) {minutes="0"+minutes}
		if (eval(seconds) < 10) {seconds="0"+seconds}
		if (eval(localhours) < 10) {localhours="0"+localhours}
		thisline+=localhours+":"+minutes+":"+seconds
		
		contenttext="<table cellpadding=2 cellspacing=0 border=0 height="+scrollerheight+">"
		contenttext+="<tr valign=middle>"
		contenttext+="<td class='locationzone'>"
		contenttext+="<a href='"+worldtime[i_worldtime].url+"' class='locationzone'>"
		contenttext+=worldtime[i_worldtime].location
		contenttext+="</a></td>"
		contenttext+="<td class='timezone'>"
		contenttext+=thisline
		contenttext+="</td></tr>"
		contenttext+="</table>"
		
		document.getElementById('scrollertext').innerHTML=contenttext
		document.getElementById('scrollertext').style.top=(scrollertop+scrollerheight)+"px"
		document.getElementById('scrollertext').style.left=scrollerleft+"px"
		document.getElementById('scrollertext').style.clip="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"

scrollin()
}

function scrollin(){
		if (parseInt(document.getElementById('scrollertext').style.top)>scrollertop) {
			clipbottom+=step
			document.getElementById('scrollertext').style.clip="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
			document.getElementById('scrollertext').style.top=(parseInt(document.getElementById('scrollertext').style.top)-step)+"px"
			var timer=setTimeout("scrollin()",pause)
		}
		else {
			clearTimeout(timer)
			var timer=setTimeout("scrollout()",standstill)
		}
}

function scrollout(){
		if (parseInt(document.getElementById('scrollertext').style.top)>(scrollertop-scrollerheight)) {
			cliptop+=step
			document.getElementById('scrollertext').style.clip="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
			document.getElementById('scrollertext').style.top=(parseInt(document.getElementById('scrollertext').style.top)-step)+"px"
			var timer=setTimeout("scrollout()",pause)
		}
		else {
			clearTimeout(timer)
			changemessage()
		}
}

function changemessage(){
		thisline=""
		i_worldtime++
		if (i_worldtime>worldtime.length-1) {i_worldtime=0}
	
		cliptop=0
		clipbottom=0
		
		thistime= new Date()
		hours=thistime.getUTCHours()
		hours=eval(hours)
		shifthours=worldtime[i_worldtime].shift
		localhours=eval(shifthours+hours)
		if (localhours <0) {localhours=24+localhours}
		if (localhours >=24) {localhours=localhours-24}
	
		minutes=thistime.getUTCMinutes()
		seconds=thistime.getUTCSeconds()
	
		if (eval(minutes) < 10) {minutes="0"+minutes}
		if (eval(seconds) < 10) {seconds="0"+seconds}
		if (eval(localhours) < 10) {localhours="0"+localhours}
		thisline+=localhours+":"+minutes+":"+seconds
		
		contenttext="<table cellpadding=2 cellspacing=0 border=0 height="+scrollerheight+">"
		contenttext+="<tr valign=middle>"
		contenttext+="<td class='locationzone'>"
		contenttext+="<a href='"+worldtime[i_worldtime].src+"' class='locationzone'>"
		contenttext+=worldtime[i_worldtime].location
		contenttext+="</a></td>"
		contenttext+="<td class='timezone'>"
		contenttext+=thisline
		contenttext+="</td></tr>"
		contenttext+="</table>"
		
		document.getElementById('scrollertext').innerHTML=contenttext
		document.getElementById('scrollertext').style.top=(scrollertop+scrollerheight)+"px"
		document.getElementById('scrollertext').style.left=scrollerleft+"px"
		document.getElementById('scrollertext').style.clip="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
		scrollin()

}

document.write('<style>')

document.write('.locationzone {')
document.write('font-family:'+locationzonefont+';')
document.write('font-size:'+locationzonefontsize+'pt;')
document.write('color:'+locationzonecolor+';')
document.write('font-weight:'+locationzoneweight+';')
document.write('font-style:'+locationzonestyle+';')
document.write('background-color:'+locationzonebackgroundcolor+';')
document.write('width:'+locationzonewidth+'px;')
document.write('height:'+scrollerheight+'px;')
document.write('text-align:'+locationzonealign+';')
document.write('}')

document.write('A.locationzone {')
document.write('text-decoration:none;')
document.write('color:'+locationzonecolor+';')
document.write('}')

document.write('A.locationzone:visited {')
document.write('color:'+locationzonecolor+';')
document.write('}')

document.write('A.locationzone:hover {')
document.write('text-decoration:none;')
document.write('color:'+locationzonerollovercolor+';')
document.write('}')

document.write('.timezone {')
document.write('font-family:'+timezonefont+';')
document.write('font-size:'+timezonefontsize+'pt;')
document.write('color:'+timezonecolor+';')
document.write('font-weight:'+timezoneweight+';')
document.write('font-style:'+timezonestyle+';')
document.write('background-color:'+timezonebackgroundcolor+';')
document.write('width:'+timezonewidth+'px;')
document.write('height:'+scrollerheight+'px;')
document.write('text-align:'+timezonealign+';')
document.write('}')

document.write('</style>')

if (document.all) {
	document.write('<div id="roof" style="position:relative;width:'+(locationzonewidth+timezonewidth)+'px;height:'+(scrollerheight)+'px;border-style:solid; border-width:'+scrollerborder+'px;background-color:'+scrollbg+';">')
}
else {
	document.write('<div id="roof" style="position:relative;width:'+(locationzonewidth+timezonewidth)+'px;height:'+(scrollerheight)+'px;border-style:solid; border-width:'+scrollerborder+'px;background-color:'+scrollbg+';">')
}
document.write('<div id="scrollertext" style="position:absolute;width:'+(locationzonewidth+timezonewidth)+'px;height:'+scrollerheight+'px;top:-1000px"></div>')
document.write('</div>')

window.onload=initiate
</script>

Step 2: Go to the top lines of the code and configure the locations, the difference to Greenich Mean Time, the font attributes, the colors, the size and the speed of the scroller.