PDA

Click to See Complete Forum and Search --> : How to handle Table Scroll Bars both in IE and NN

dinagar
07-31-2003, 01:19 AM
Hi All,
I am new to Web designing. I am facing a problem with scroll event. This has to work both in IE and NN. So, anyone has the idea or sample code like this pass it on to me.

Thanks in advance.

For your kind reference, here is the code sample which i have written

<html>
<head>
<title>Scroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">


<TABLE >

<TR>
<TD>
<!-- TOP-LEFT CORNER -->
<div style="top:0px; left:0px;width:990px;
height:100px;position:absolute; clip:rect( 0px 300px auto 0px); ">
<div id="letftop" style="top:0px; left:0px; height:100px; position:absolute">
<TABLE bgcolor=green border='1' width=80>
<TR>
<TD>Students</TD>
</TR>
</TABLE>
</div>
</div>

</TD>
<TD>
<!-- RIGHT TOP COLUMN HEADER -->
<div style="top:0px; left:70px;width:300px;
height:100px;position:absolute; clip:rect( 0px 300px auto 0px);
overflow:hidden;">
<div id="HTab" style="top:0px; left:0px; position:absolute ">
<table bgcolor=gray width=500 border="1" >
<tr>
<td style="width:100" nowrap>subject 1</td>
<td style="width:100" nowrap>subject 2</td>
<td style="width:100" nowrap>subject 3</td>
<td style="width:100" nowrap>subject 4</td>
<td style="width:100" nowrap>subject 5</td>
</tr>
</table>
</div>
</div>
</TD>
</TR>
<TR>
<TD>
<!-- LEFT BOTTOM ROW HEADER -->

<!-- <div id="DataTab" style="position:absolute; top:30px;
left:65px;height:300px; width:300px; overflow:scroll"
onScroll="scrollit()"> -->


<div style="position:absolute; top:30px;
left:0px;height:300px; width:90px; overflow:hidden;">
<div id="leftbottom" style="top:0px; left:0px; height:100px; position:absolute">
<TABLE bgcolor=pink border='1' >
<TR>
<TD>Student1</TD>
</TR>
<TR>
<TD>Student2</TD>
</TR>
<TR>
<TD>Student3</TD>
</TR>
<TR>
<TD>Student4</TD>
</TR>
<TR>
<TD>Student5</TD>
</TR>
<TR>
<TD>Student6</TD>
</TR>
<TR>
<TD>Student7</TD>
</TR>
<TR>
<TD>Student8</TD>
</TR>
<TR>
<TD>Student9</TD>
</TR>
<TR>
<TD>Student10</TD>
</TR>
<TR>
<TD>Student11</TD>
</TR>
<TR>
<TD>Student12</TD>
</TR>
<TR>
<TD>Student13</TD>
</TR>
<TR>
<TD>Student14</TD>
</TR>
<TR>
<TD>Student15</TD>
</TR>
<TR>
<TD>Student16</TD>
</TR>
<TR>
<TD>Student17</TD>
</TR>
<TR>
<TD>Student18</TD>
</TR>
<TR>
<TD>Student19</TD>
</TR>
<TR>
<TD>Student20</TD>
</TR>
<TR>
<TD>Student21</TD>
</TR>
<TR>
<TD>Student22</TD>
</TR>
<TR>
<TD>Student23</TD>
</TR>
<TR>
<TD>Student24</TD>
</TR>
<TR>
<TD>Student25</TD>
</TR>
<TR>
<TD>Student26</TD>
</TR>
<TR>
<TD>Student27</TD>
</TR>
<TR>
<TD>Student28</TD>
</TR>
<TR>
<TD>Student29</TD>
</TR>
<TR>
<TD>Student30</TD>
</TR>
</TABLE>
</div>
</div>
<!-- <div id="ausgabe1" style="position:absolute;top:500px">
</div> -->
</TD>
<TD>
<!-- RIGHT BOTTOM DATA -->
<div id="DataTab" style="position:absolute; top:30px;
left:70px;height:320px; width:320px; overflow:scroll"
onScroll="scrollit()">

<table width=500 border="1" >
<tr>
<td style="width:100" nowrap>eins</td>
<td style="width:100" nowrap>zwei</td>
<td style="width:100" nowrap>drei</td>
<td style="width:100" nowrap>vier</td>
<td style="width:100" nowrap>fuenf</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td nowrap>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div id="ausgabe" style="position:absolute;top:0px">
</div>
</TD>
</TR>
</TABLE>



<script language="JavaScript">

if(navigator.appName == "Microsoft Internet Explorer")
{
function scrollit()
{
eldata=document.getElementById("DataTab");
elheader=document.getElementById("HTab");
elleft=document.getElementById("leftbottom");
x=eldata.scrollLeft;
y=eldata.scrollTop;
elheader.style.left=-eldata.scrollLeft;

leftbottom.style.top=-eldata.scrollTop;
}
}
else
{
alert("Netscape");
function callit()
{
eldata1=document.getElementById("DataTab");
elheader1=document.getElementById("HTab");
elleft1=document.getElementById("leftbottom");
x=eldata1.pageXOffset;
y=eldata1.pageYOffset;
elheader1.left=-eldata1.pageXOffset;
leftbottom.top=-eldata1.pageYOffset;
}
}
</script>
</body>
</html>


With Regards
V.Dinagar
Khalid Ali
07-31-2003, 09:02 PM
looks likeit should work..whats the error if any?
dinagar
07-31-2003, 11:20 PM
Hi Khalid,

Thanks for the interest initiated by you. I have problem with Netscape and not with IE. It will work fine with IE and not with NN. Please check this wiht both IE and NN and tell me is there any solution for it.

With Regards,

V.Dinagar