PDA

Click to See Complete Forum and Search --> : onScroll Event for IE and NN

dinagar
07-31-2003, 01:34 AM
Hi all:)
I am trying to build a table with both hscroll and vscroll. I am finding easy in IE and not in NN. If anyone, know the perfect solution for this please help me out. This is very urgent for my module.

Thanks in advance.

With Regards,
V.Dinagar


Here is the Code Sample which i have tried,


<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>
Fang
07-31-2003, 02:12 AM
Netscape does not support a scroll event, but this article (http://www.siteexperts.com/tips/functions/ts15/page1.asp) may help.
dinagar
07-31-2003, 05:54 AM
Hi Fang,
I have gone through the reference site which you have send me across. But it talks only about the window.scroll event. I need to know is there any event for table scrolling? both vertical and horizotal scrolling bars.

I need help regarding this. If you know any sites which talks about only table scroll bars in side a document and compatible for both IE and NN.

Thanks in advance

With Regards,
V.Dinagar
Fang
07-31-2003, 06:52 AM
Netscape does not support any scroll events.

You have defined functions within a loop, this does not work.

What exactly are you trying to do?
dinagar
07-31-2003, 07:05 AM
Hi Fang,
Thank you for initiating the efforts towards my question. I am just looking for a table with both horizontal and vertical scroll bars. It is used for populating result set from database as we are not going for "Paging" concept or IFrame. So, i have stick with the table concept and look for solution.

When the table content exceeds the size of table it should generate scrollbars both in Netscape and IE.

Thanks in advance

With Regards,
V.Dinagar
Fang
07-31-2003, 07:27 AM
There are scrollbars in IE and NN using your example.
dinagar
07-31-2003, 07:36 AM
Yes fang,
It's there in both IE and NN. But, it's not working with NN. That's why i put a question infront of you. It's working with IE perfectly. But when you try to scroll the same in NN, the side content is not scrolling as it does in IE.

I will explain the functionality, then only you can understand what i am expecting. When you use vertical scroll the table content and left student column will scroll at a time. when you use horizontal scrolling the content in the top navigation also will scroll.

Dinagar.V
Fang
07-31-2003, 09:04 AM
Ok, I see it:

Add onload="HeaderMove();" to the body tag.
Remove onScroll="scrollit()".
Insert this script:

var XposHeader=0;
function HeaderMove() {
if(document.getElementById("DataTab").scrollLeft!=XposHeader) {
XposHeader=document.getElementById("DataTab").scrollLeft;
document.getElementById("HTab").style.left=-XposHeader+"px";
}
setTimeout("HeaderMove()", 10);
}

Netscape has no scroll event (except for the window) so we poll the position of "DataTab" and move "HTab" accordingly, in a timer loop.
dinagar
07-31-2003, 11:15 PM
Thanks fang,
I have tried the script which you have posted. But still the problem with Netscape persists. I don't know still what is the problem. It is working fine with IE, but not with Netscape. Is there any alternate for this?

For checking the functionality i had given an alert inside your function. In IE, the alert comes when you scroll the horizontal bar and when you try the same in Netscape it shows only on LOAD time. Not when you try scroll it.

FYI - I am using IE 6.0.XXXX and Netscape 6.2.3

With Regards,
V.Dinagar
Fang
08-01-2003, 04:17 AM
It works in NN7.0, Mozilla1.0 and Opera7.0, but not in NN6.2
dinagar
08-01-2003, 04:38 AM
Hi Fang,

I am glad to receive your response and thanks for the support. I will get back to you after completing this Compatibility Issue.
dinagar
08-02-2003, 12:43 AM
Hi Fang,

Sorry for questioning you again and again. Is it possible to make it work in Netscape 6.1 or 6.2 version. Because the most of the testing part is on this version. Looking forward to your response.


With Regards,
V.Dinagar
Fang
08-02-2003, 04:04 AM
I think you wil have to use an iframe for your data (id=DataTab).
I did a rough script (only for Netscape 6):

if(window.frames["MyData"].window.pageXOffset!=XposHeader) {
XposHeader=window.frames["MyData"].window.pageXOffset;
document.getElementById("HTab").style.left=-XposHeader+"px";
}

You should be able to adapt it for other browsers.
dinagar
08-03-2003, 11:41 PM
Hi Fang,

Thanks a lot for your support. I am working on the script as per your suggestion. Is there any alternate other than IFrame?


With Regards,
V.Dinagar
dinagar
08-06-2003, 12:24 AM
Hi All,

I am stuck with Table scrolling widget. I have found a way to do the same with one of our friend Fang. But, still the idea of using <div> tag works with NN 7.x and i would like to know in anyway the same could be possible with Netscape 6.x.

As per the requirement, i should not use "IFrame". Any one, who has come across the solution for this feel free to put the idea here.

With Regards,

V.Dinagar