Change position for analog clock

[Wind]

I have used the Analog Clock http://dynamicdrive.com/dynamicindex6/analog.htm on my own website, but I would like to change the position for the clock. I don't want it to be down in the right corner. How do I change the code so that I can place the clock anywhere I like?

Wind

[jscheuer1]

That's a little complicated and I notice that this script needs updating for compatibility with possible DOCTYPE usage. Use this updated script, it allows you to position the clock virtually anywhere and is compatible with basic DOCTYPEs or no DOCTYPE:

<script type="text/javascript">

//Analog clock script- By Kurt (kurt.grigg@virgin.net)
//Script featured on Dynamic Drive
//Visit http://www.dynamicdrive.com for this script and more.
//Updated for modern DOCTYPEs and any position on the page
//by jscheuer1 in http://www.dynamicdrive.com/forums
//This credit must remain for legal use.

var fCol='#444444'; //face color
var sCol='#FF0000'; //seconds color
var mCol='#444444'; //minutes color
var hCol='#444444'; //hours color

var Ybase=30; //Clock height
var Xbase=30; //Clock width

var Vbase='top' //position relative to 'top' or 'bottom' of page
var Hbase='left' //position relative to 'left' or 'right' of page

var Voff=20  //offset of vertical position, can be negative (for default use 20)
var Hoff=20  //offset of horizontal position, can be negative (for default use 20)

///////////////////////Stop Editing///////////////

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
NS4=(document.layers);
NS6=(document.getElementById&&!document.all);
IE4=(document.all);
Ypos=0;
Xpos=0;
dots=12;
Split=360/dots;
if (NS6){
for (i=1; i < dots+1; i++){
document.write('<div id="n6Digits'+i+'" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:arial;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px;">'+i+'</div>');
}
for (i=0; i < M.length; i++){
document.write('<div id="Ny'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
}
for (i=0; i < H.length; i++){
document.write('<div id="Nz'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
}
for (i=0; i < S.length; i++){
document.write('<div id="Nx'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
}
}
if (NS4){
dgts='1 2 3 4 5 6 7 8 9 10 11 12';
dgts=dgts.split(' ')
for (i=0; i < dots; i++){
document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>');
}
for (i=0; i < M.length; i++){
document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < H.length; i++){
document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < S.length; i++){
document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>');
}
}
if (IE4){
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=1; i < dots+1; i++){
document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++){
document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++){
document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++){
document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
}
document.write('</div></div>')
}



function clock(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;

if (NS6){
Ypos=Vbase=='bottom'? window.pageYOffset+window.innerHeight-Ybase-5-Voff : window.pageYOffset+20+Voff;
Xpos=Hbase=='right'? window.pageXOffset+window.innerWidth-Xbase-10-Hoff : window.pageXOffset+Hoff+20;
for (i=1; i < dots+1; i++){
 document.getElementById("n6Digits"+i).style.top=Ypos-15+Ybase*Math.sin(-1.56 +i *Split*Math.PI/180)+'px'
 document.getElementById("n6Digits"+i).style.left=Xpos-15+Xbase*Math.cos(-1.56 +i*Split*Math.PI/180)+'px'
 }
for (i=0; i < S.length; i++){
 document.getElementById("Nx"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(sec)+'px';
 document.getElementById("Nx"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(sec)+'px';
 }
for (i=0; i < M.length; i++){
 document.getElementById("Ny"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(min)+'px';
 document.getElementById("Ny"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(min)+'px';
 }
for (i=0; i < H.length; i++){
 document.getElementById("Nz"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(hrs)+'px';
 document.getElementById("Nz"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(hrs)+'px';
 }
}
if (NS4){
Ypos=Vbase=='bottom'? window.pageYOffset+window.innerHeight-Ybase-Voff-5 : window.pageYOffset+Voff+20;
Xpos=Hbase=='right'? window.pageXOffset+window.innerWidth-Xbase-10-Hoff : window.pageXOffset+Hoff+20;
for (i=0; i < dots; ++i){
 document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045 +i*Split*Math.PI/180)
 document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045 +i*Split*Math.PI/180)
 }
for (i=0; i < S.length; i++){
 document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec);
 document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec);
 }
for (i=0; i < M.length; i++){
 document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min);
 document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min);
 }
for (i=0; i < H.length; i++){
 document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs);
 document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs);
 }
}

if (IE4){
Ypos=Vbase=='bottom'? iecompattest().scrollTop+window.iecompattest().clientHeight-Ybase-Voff : iecompattest().scrollTop+Voff+20;
Xpos=Hbase=='right'? iecompattest().scrollLeft+window.iecompattest().clientWidth-Xbase-Hoff : iecompattest().scrollLeft+Hoff+20;
for (i=0; i < dots; ++i){
 ieDigits[i].style.top=Ypos-15+Ybase*Math.sin(-1.045 +i *Split*Math.PI/180)+'px'
 ieDigits[i].style.left=Xpos-15+Xbase*Math.cos(-1.045 +i *Split*Math.PI/180)+'px'
 }
for (i=0; i < S.length; i++){
 x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec);
 x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec);
 }
for (i=0; i < M.length; i++){
 y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min);
 y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min);
 }
for (i=0; i < H.length; i++){
 z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs);
 z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs);
 }
}
setTimeout('clock()',100);
}
clock();

</script>

[Wind]

Thanx, I have used your suggestion, and it seems to work fine.

- Wind