...

View Full Version : How to change position of clock?



Kibtwane
11-03-2010, 08:11 AM
I want to add a clock to my forum. I'd like it to be on the same line as "The Christian Identity Forum" link and aligned to the right so it's sitting just above "Unread Posts" in "Generally Speaking".


http://www.thechristianidentityforum.net/smf/index.php

I can get it on the same line as the navigation buttons without a problem, but if I try to place it where I want it, I get two clocks instead of one. Is there a way around this?

Many thanks!

NB: I removed the clock from my board, as it was expanding the header, being on the same line as the nav buttons.

I've attached my index template with the clock code.

This is the clock code itself.


<script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj=new Object;obj.clockfile="5001-red.swf";obj.TimeZone="PST";obj.width=240;obj.height=20;obj.Place="";obj.DateFormat="YYYY-MM-DD";obj.wmode="transparent";showClock(obj);</script>

abduraooft
11-03-2010, 11:32 AM
NB: I removed the clock from my board, as it was expanding the header, being on the same line as the nav buttons.
Please add it and update the online version, so that we may be able position it using firebug (http://getfirebug.com) at our end.

Kibtwane
11-08-2010, 11:11 AM
Thanks for your reply.

I've uploaded the modified file as requested.


http://www.thechristianidentityforum.net/smf/index.php

Kibtwane
11-10-2010, 03:41 AM
I've decided to do without the clock, so consider this issue resolved.

tpeck
11-10-2010, 03:59 AM
Fair enough. I find the graphic clocks a bit distracting but there are dozens of date and time scripts out there, This is a nice one I use a bit and it shouldn't slow you down by linking to another site:



<script>
var thedate;
var day_array = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var month_array = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function show_time()
{
thedate = new Date();
day = day_array[thedate.getDay()];
maand = month_array[thedate.getMonth()];
minutes = thedate.getMinutes();
seconds = thedate.getSeconds();
year = thedate.getFullYear();
if (minutes < 10 ) {minutes = "0" + minutes;}
if (seconds < 10) {seconds = "0" + seconds;}
obj_table_time = document.getElementById("table_time");
obj_table_time.innerHTML = day + ",&nbsp;&nbsp;" + thedate.getDate() + "&nbsp;" + maand + "&nbsp;&nbsp;" + year + ",&nbsp;&nbsp;" + thedate.getHours() + ":" + minutes +":" + seconds;
setTimeout("show_time()",1000);
}
</script>


In the body of your page put this div:



<div align="right" id="table_time"></div>


You can put it where you like and pretty it up with a class.

stefanraj
11-10-2010, 01:44 PM
<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>

try to use this one..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum