side menu?

Goku529 · Post by **Goku529** » Fri Nov 28, 2003 8:24 pm

i wanna put a menu here inside the circle:

so that the buttons i make for it are on the right of the comic page
i know how 2 do it but its not working x_x this is what i have, maybe i gotta put it somewhere else cuz i got alot of stuff in it x_X

Code: Select all

<html>
<head>

<SCRIPT language=JavaScript>
//Alter nothing below! Alignments will be lost!
<!-- Script supplied by Hypergurl http://www.hypergurl.com -->
<!-- hide this stuff from other browsers
dCol='000000';//date colour.
fCol='000000';//face colour.
sCol='000000';//seconds colour.
mCol='000000';//minutes colour.
hCol='000000';//hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;


d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
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.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
 var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
 F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
 F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
 }
for (i=0; i < H.length; i++){
 var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
 HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
 HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
 }
for (i=0; i < M.length; i++){
 var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
 ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
 ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
 }
for (i=0; i < S.length; i++){
 var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
 SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
 SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
 }
for (i=0; i < D.length; i++){
 var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
 DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
 DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
 }
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
if (ns||ie)window.onload=Delay;
// end the hiding comment -->
</SCRIPT>

<meta http-equiv="Page-Enter"
content="revealTrans(Duration=3.0,Transition=23)">
<meta http-equiv="Page-Exit"
content="revealTrans(Duration=3.0,Transition=23)">

<script language="JavaScript">
/* This is dodo's flash title script */
/* Taken from http://regretless.com/dodo/newworld/ */

var dodosflashtitle1='*. Chris V Presents... .*';	// put frame 1 text
var dodosflashtitle2='.* Chris V Presents... *.';	// put frame 2 text
var dodosduration = 500;	// duration high = slower animation


step=0
function dodosflashtitle()
    {
      step++
      if (step==3) {step=1}
      if (step==1) {document.title=dodosflashtitle1}
      if (step==2) {document.title=dodosflashtitle2}
      setTimeout("dodosflashtitle()", dodosduration);
    }
dodosflashtitle()
</script>
<title>Chris V Presents...</title>


<STYLE type="text/css"> 
BODY { background-image: url(http://chrisvpresents.keenspace.com/images/background.gif); background-repeat: no-repeat; background-position: top} 
</style> 


</head>
<body bgcolor = #333399>
***advertisement***<br>
***short_month*** ***day_of_the_month***, ***the_year***<br>
***first_day*** ***previous_day*** ***next_day*** ***last_day***<br>
***todays_comics***
***calendar***

<body text=#FFFF00>

<p align=right>Christopher Villanueva

Faub · Post by **Faub** » Fri Nov 28, 2003 10:04 pm

Simple enough. I assume your comic page is a specific size, right? We'll say it's 600 pixels wide because I don't have the exact figures. Your logo is, let's say, 200 pixels tall. Given a margin of 10 pixels around each image, that puts the top left corner of the block you circled at 620x220.

Code: Select all

<div style="position:absolute; top:220px; left:620px;">
<p>Put your menu here.  The arrangement of this block is almost unimportant since the bulk of the work is being done by the div.  A group of links or images separated by line breaks would be enough.</p>
</div>

Goku529 · Post by **Goku529** » Sat Nov 29, 2003 12:20 pm

thanx i'll try it after playing halo @_@

Faub · Post by **Faub** » Sat Nov 29, 2003 4:14 pm

no NO! now! Do it now! 8)

Goku529 · Post by **Goku529** » Sat Nov 29, 2003 9:13 pm

oops

i played halo first but im not sure what to do x_x

Code: Select all

<div style="position:absolute; top:220px; left:620px;"> 
<br>
<a href="lastpage1.htm">
<img border="0" src="buttonnext1.gif" width="65" height="38">
</a>
</br>
<br>
<a href="lastpage2.htm">
<img border="0" src="buttonnext2.gif" width="65" height="38">
</a>
</br>
<br>
<a href="lastpage3.htm">
<img border="0" src="buttonnext3.gif" width="65" height="38">
</a>
</br>
</div>

so is that how its done?
and where in the html code do i put it?

Plothole · Post by **Plothole** » Sat Nov 29, 2003 9:45 pm

I think I can anwser that.

Just put the code somewhere in-between the body tags. It should work just fine.

Goku529 · Post by **Goku529** » Sat Nov 29, 2003 10:21 pm

gah its not working x_x

Code: Select all

<html>
<head>

<SCRIPT language=JavaScript>
//Alter nothing below! Alignments will be lost!
<!-- Script supplied by Hypergurl http://www.hypergurl.com -->
<!-- hide this stuff from other browsers
dCol='000000';//date colour.
fCol='000000';//face colour.
sCol='000000';//seconds colour.
mCol='000000';//minutes colour.
hCol='000000';//hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;


d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","

FRIDAY","SATURDAY");
m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","

JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" 

"+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a

+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a

+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>'

);
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 

height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i

]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 

height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i

]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 

height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i

]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0

px;left:0px"><div style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0

px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[

i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0

px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0

px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+

Face[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Oh" style="position:absolute;top:0

px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours" style="position:absolute;width:

16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+

';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0

px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes" style="position:

absolute;width:16px;height:16px;font-family:Arial;font-size:16

px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</

div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0

px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds" style="position:

absolute;width:16px;height:16px;font-family:Arial;font-size:16

px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</

div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):

event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
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.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes

())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
 var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
 F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)

+scrll;
 F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
 }
for (i=0; i < H.length; i++){
 var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
 HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
 HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
 }
for (i=0; i < M.length; i++){
 var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
 ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
 ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
 }
for (i=0; i < S.length; i++){
 var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
 SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
 SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
 }
for (i=0; i < D.length; i++){
 var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
 DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.

PI/180)+scrll;
 DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.

PI/180);
 }
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
if (ns||ie)window.onload=Delay;
// end the hiding comment -->
</SCRIPT>

<meta http-equiv="Page-Enter"
content="revealTrans(Duration=3.0,Transition=23)">
<meta http-equiv="Page-Exit"
content="revealTrans(Duration=3.0,Transition=23)">

<script language="JavaScript">
/* This is dodo's flash title script */
/* Taken from http://regretless.com/dodo/newworld/ */

var dodosflashtitle1='*. Chris V Presents... .*';	// put 

frame 1 text
var dodosflashtitle2='.* Chris V Presents... *.';	// put 

frame 2 text
var dodosduration = 500;	// duration high = slower 

animation


step=0
function dodosflashtitle()
    {
      step++
      if (step==3) {step=1}
      if (step==1) {document.title=dodosflashtitle1}
      if (step==2) {document.title=dodosflashtitle2}
      setTimeout("dodosflashtitle()", dodosduration);
    }
dodosflashtitle()
</script>
<title>Chris V Presents...</title>


<STYLE type="text/css"> 
BODY { background-image: url(http://chrisvpresents.keenspace.com/

images/background.gif); background-repeat: no-repeat; background-

position: top} 
</style> 


</head>
<body bgcolor = #333399>
***advertisement***<br>
***short_month*** ***day_of_the_month***, ***the_year***<br>
***first_day*** ***previous_day*** ***next_day*** ***last_day***

<br>
***todays_comics***
***calendar***

<body text=#FFFF00>

<p align=right>Christopher Villanueva

Plothole · Post by **Plothole** » Sat Nov 29, 2003 10:58 pm

It worked with the code you originally supplied.

It looks like your javascript got a little messed up. There are numerus line breaks that shouldn't be where they are. For example, starting on line 19:

Code: Select all

d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","

FRIDAY","SATURDAY");

should be:

Code: Select all

d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");

You could attempt to remove these line breaks, but it would probably be easier to just copy the code from your first post and work from there.

And just to be safe, turn off word-wrap in the program your using.

Goku529 · Post by **Goku529** » Sun Nov 30, 2003 9:40 am

it worked thanx. there r just really big spaces between them o.o

Faub · Post by **Faub** » Sun Nov 30, 2003 11:51 am

If you go here: http://validator.w3.org/ you will get a list of problems with the page based on which version of HTML you're trying to use. Keenspace defaults to XHTML 1.0 Transitional, but it appears that you removed any DOCTYPE statements from the file. While most browsers work fine with invalid HTML, there is something to be said for adhering to standards. It everyone did it, it would save the programmers a lot of headaches.

It also doesn't help that Autokeen doesn't generate valid XHTML 1.0.