Menu
Greetings friends,
This code will draw a circle in the left pane. I wish to center it within that div,
So far, my efforts to push it over have failed. What is going on, why does it refuse to budge over??
[code=html]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<HTML>
<HEAD><TITLE>TanCosSin</TITLE>
<META http-equiv=Content-Type content=”text/html; charset=UTF-8″>
<STYLE type=text/CSS>
#plotT{background:black;position:relative;height:405px;width:405px;color:white}
#plotSC{background:black;position:relative;height:405px;width:405px;;color:white;overflow:hidden}
.tan{height:3px;width:3px;background-color:lime;font-size:1px;position:absolute;}
.tand{background-color:#eeffee;width:40px;overflow:hidden;text-align:center}
.cos{height:3px;width:3px;background-color:red;font-size:1px;position:absolute;}
.cosd{background-color:#FFEEEE;width:40px;overflow:hidden;text-align:center}
.sin{height:3px;width:3px;background-color:blue;font-size:1px;position:absolute;}
.sind{background-color:#EEEEFF;width:40px;overflow:hidden;text-align:center}
.but{font-size:10px;background:black;color:white;width:25px;height:20px}
</STYLE>
<SCRIPT type=”text/javascript”> var tans=”; var coss=”; var sins=”; var tants=”;
function getX(t,z,j){ t=t.split(‘,’); z=t[1];j=t[2];t=t[0]
zz=(z-90)*(Math.PI/180); x=(t*Math.cos(zz))+t; y=(t*Math.sin(zz))+t*2;
tans+= zz='<span style=”left:’+x+’px;top:’+y+’px;height:3px;width:3px;background-color:lime;font-size:1px;position:absolute;” title=”‘+z+'”></span>’
document.getElementById(‘plotT’).innerHTML=zz+”
cx=(Math.cos(z*(Math.PI/180))*t)+t*2;
coss+=czx='<span class=”cos” style=”left:’+j+’px;top:’+cx+’px;” title=”‘+z+'”></span>’;
sx=(Math.sin(z*(Math.PI/180))*t)+t*2;
sins+=szx='<span class=”sin” style=”left:’+j+’px;top:’+sx+’px;” title=”‘+z+'”></span>’;
tx=(Math.tan(z*(Math.PI/180))*t)+t*2;
tants+=tzx='<span class=”tan” style=”left:’+j+’px;top:’+tx+’px;” title=”‘+z+'”></span>’;
document.getElementById(‘plotSC’).innerHTML=czx+szx+tzx
}
var ct=0; var tim;
function circ(r){ var slc=document.getElementById(‘slc’);
if(r){ tans=coss=sins=tants=”; ct=0}
if(ct<slc.options.length-1 ){ ct++ ; slc.selectedIndex=ct;getX(slc.value)}
else{clearTimeout(tim);writeCirc();return}
tim=setTimeout(“circ()”,20)
}
function writeCirc(){ document.getElementById(‘plotT’).innerHTML=tans; document.getElementById(‘plotSC’).innerHTML=coss+sins+tants; }
</SCRIPT>
<META content=”MSHTML 6.00.2900.2963″ name=GENERATOR></HEAD>
<BODY scroll=”auto”>
<TABLE border=1 style=”border-collapse:collapse; table-layout:fixed;”><TR>
<TD valign=top><div id=”plotT”></div></TD>
<TD valign=top><div id=”plotSC”></div></TD>
<TD>
<div style=”white-space:pre”><B>Deg</B> <span class=”tand”>Tan</span> <span class=”cosd”>Cos</span> <span class=”sind”>Sin</span></div>
<SCRIPT type=”text/javascript”>
var dim=100;
var t='<select size=24 onchange=”getX(this.value);clearTimeout(tim)” id=”slc” style=”width:180px”>’;
for(i=1,j=0,g=0;i<361;i++,j+=1,g++){
d=i*(Math.PI/180);
t+='<option value=”‘+dim+’,’+i+’,’+j+'”>’+i+’°_’+Math.tan(d).toFixed(3)+’ ‘+Math.cos(d).toFixed(3)+’ ‘+Math.sin(d).toFixed(3)+'</option>’;}
document.write(t+'</select>’)
document.getElementById(‘plotT’).style.height=document.getElementById(‘plotSC’).style.height=dim*4
document.getElementById(‘plotT’).style.width=(dim*2)+5+’px’
document.getElementById(‘plotSC’).style.width=(dim*4)-35+’px’
</SCRIPT>
</TD></TR></TABLE>
<button onclick=”circ(‘refresh’)”>go</button> <button onclick=”clearTimeout(tim);writeCirc()”>stop</button>
</BODY></HTML>