Javascript and HTML Table

samesale · Mar 21, 2004

I have created the following program. One column shows html and the other javascript. It works except the Javascript side (the right column)starts output in the middle row of the column. I would like it to start at point where the sell start in the left column. Please help.

<htmt>
<head>
<title> SALEBYYOU.COM</title>
</head>
<BODY onLoad="scrollit(100)">
<table border="0" bgcolor="white" width="100%">
<tr>
<td>
<div align="left">

<font color="red" size="4">copyright 2004 &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp You can </font>
</div>
</td>
</tr>
</table>

<table width ="100%" border="0" >
<tr>
<td>
<font color="red" size="4"><b>ON THIS WEBSITE, YOU CAN:</b></font>
<b>
</td></tr></table>
<table width="100%"><tr><td width="60%">
<font color="blue" FACE="Helvertica" size="4"><b>
<dir>
<li/> Sell
</dir>
CLICK ONE OF THE LINKS BELOW:<br>
<A HREF="salesbyyou.com/sale.html">Sublease <br></A>
<A HREF="salesbyyou.com/buy.html">o Buy <br></A><br></b>
</font>
</td>
<td>
<script language="javascript">

//Vertical Scroller v1.2- by Brian of

http://www.ScriptAsylum.com

//Updated for bug fixes
//Visit JavaScript Kit (

http://javascriptkit.com)

for script

//ENTER CONTENT TO SCROLL BELOW.
var content='<b> <p> <font color="#FF1493"> You can site.</font> </p><p><font color="#FF00FF" > You can free.</font> </p><p><font color="#483D8B" > You can a photo.</font> </p><p><font color="#0000FF"> You can below</font> .</p></b> ';

var boxheight=150; // BACKGROUND BOX HEIGHT IN PIXELS.
var boxwidth=200; // BACKGROUND BOX WIDTH IN PIXELS.
var boxcolor="white"; // BACKGROUND BOX COLOR.
var speed=30; // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
var pixelstep=2; // PIXELS "STEPS" PER REPITITION.
var godown=false; // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE

// DO NOT EDIT BEYOND THIS POINT

var outer,inner,elementheight,ref,refX,refY;
var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
var txt='';
if(ns4){
txt+='<table cellpadding=0 cellspacing=0 border=0 height='+boxheight+' width='+boxwidth+'><tr><td>';
txt+='<ilayer name="ref" bgcolor="'+boxcolor+'" width='+boxwidth+' height='+boxheight+'></ilayer>';
txt+='</td></tr></table>'
txt+='<layer name="outer" bgcolor="'+boxcolor+'" visibility="hidden" width='+boxwidth+' height='+boxheight+'>';
txt+='<layer name="inner" width='+(boxwidth-4)+' height='+(boxheight-4)+' visibility="hidden" left="2" top="2" >'+content+'</layer>';
txt+='</layer>';
}else{
txt+='<div id="ref" style="position:relative; width:'+boxwidth+'; height:'+boxheight+'; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'; height:'+boxheight+'; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
txt+='<div id="inner" style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'; overflow:hidden; cursor:default;">'+content+'</div>';
txt+='</div>';
}
document.write(txt);

function getElHeight(el){
if(ns4)return (el.document.height)? el.document.height : el.clip.bottom-el.clip.top;
else if(ie4||ie5)return (el.style.height)? el.style.height : el.clientHeight;
else return (el.style.height)? parseInt(el.style.height)

arseInt(el.offsetHeight);
}

function getPageLeft(el){
var x;
if(ns4)return el.pageX;
if(ie4||w3c){
x = 0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
x+=el.offsetLeft;
return x;
}}

function getPageTop(el){
var y;
if(ns4)return el.pageY;
if(ie4||w3c){
y=0;
while(el.offsetParent!=null){
y+=el.offsetTop;
el=el.offsetParent;
}
y+=el.offsetTop;
return y;
}}

function scrollbox(){
if(ns4){
inner.top+=(godown)? pixelstep: -pixelstep;
if(godown){
if(inner.top>boxheight)inner.top=-elementheight;
}else{
if(inner.top<2-elementheight)inner.top=boxheight+2;
}}else{
inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
if(godown){
if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
}else{
if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
}}}

window.onresize=function(){
if(ns4)setTimeout('history.go(0)', 500);
else{
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
}}

window.onload=function(){
outer=(ns4)?document.layers['outer']

ie4)?document.all['outer']:document.getElementById('outer');
inner=(ns4)?outer.document.layers['inner']

ie4)?document.all['inner']:document.getElementById('inner');
ref=(ns4)?document.layers['ref']

ie4)?document.all['ref']:document.getElementById('ref');
elementheight=getElHeight(inner);
if(ns4){
outer.moveTo(getPageLeft(ref),getPageTop(ref));
outer.clip.width=boxwidth;
outer.clip.height=boxheight;
inner.top=(godown)? -elementheight : boxheight-2;
inner.clip.width=boxwidth-4;
inner.clip.height=elementheight;
outer.visibility="show";
inner.visibility="show";
}else{
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
inner.style.top=((godown)? -elementheight : boxheight)+'px';
inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
outer.style.visibility="visible";
}
setInterval('scrollbox()',speed);
}
</script>

</td></td></table>
</body>
</html>

tviman · Mar 21, 2004

I don't think it can be done with this scroll script and the table setup you have. Maybe if youpulled the scroll fucntion out of the table completely and place it in it's own div you might be able to position it over the table and in line with SELL.

There's always a better way. The fun is trying to find it!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Javascript and HTML Table

samesale

Programmer

tviman

Programmer

Similar threads

Part and Inventory Search

Sponsor