Hi all--
I'm trying to implement a freeze-pane in NS 6.2 (e.g. an area of the
screen remains stationary while another area is scrolled-- this is most
often seen in spread sheet applications.) Currently, my approach is to
create a two-column table. The first column contains a <DIV> with its
height set to 200 px and its overflow set as 'hidden'. This column serves
as the freeze pane. The second column also contains a <DIV> with its height
set to 200 px, its width to 400 px and its overflow set as 'scroll'. This
column serves as the scrollable area. This works as anticipated for the
horizontal scrolling--that is, when the 2nd column is scrolled horizontally,
the 1st column remains stationary.
The problem occurs when I try to scroll the 2nd column vertically. In
this case, I need the 1st column to scroll with the 2nd so the right
hand-side remains in sync with the left-hand side. Because they are in
different DIV's, however, I don't get this automatically. Instead, I need
to write some script to maintain the vertical sync. This isn't a problem in
IE 5.5/6.0, because I can simply trap the onScroll event on the second DIV,
and in the event handler, match up the first DIV with the second, using the
following JavaScript function:
function onScroll()
{
var oEl = document.getElementById("chart")
var oEl2 = document.getElementById("paneList")
oEl2.scrollTop = oEl.scrollTop;
}
This presents two problems in NS6.2 that I'm hoping you all can help me out
with:
(1) I'm not sure how to trap the onScroll event-- does a NS6.2 DIV even
generate the scroll event? If so, I'd imagine I could trap it using the
'addEventListener' function, but if not, does anyone have any alternative
approaches?
(2) in the onScroll() function above, I use the scrollTop property of the
DIV to do the match-up. This property, however, is not available in NS6.2.
So, how else could I perform the DIV match-up?
Of course, if anyone has a completely different approach to implementing the
freeze-pane, I'd be open for suggestions, though I am trying to avoid using
Framesets or IFrames here.
If you want to play around with what I've done, I appended some example HTML
below.
Thanks for your help,
Scott
----------------------------------------------------------------------------
-----------------------------
<html>
<head>
<title> Test Layout </title>
<script>
function onScroll()
{
var oEl = document.getElementById("chart")
var oEl2 = document.getElementById("paneList")
oEl2.scrollTop = oEl.scrollTop;
}
</script>
</head>
<body>
<table border='0'>
<tr bgcolor=Silver>
<td align='middle'> Pane </td>
<td colspan='20' align='middle'> Chart </td>
</tr>
<tr align='top'>
<td align='top'>
<div id='paneList' STYLE='height:200;overflow:hidden'>
<table border=0 bgcolor='gray'>
<tr ><td>Row 0</td></tr><tr ><td>Row
1</td></tr><tr ><td>Row 2</td></tr>
<tr ><td>Row 3</td></tr><tr ><td>Row
4</td></tr><tr ><td>Row 5</td></tr>
<tr ><td>Row 6</td></tr><tr ><td>Row
7</td></tr><tr ><td>Row 8</td></tr>
<tr ><td>Row 9</td></tr><tr ><td>Row
10</td></tr><tr ><td>Row 11</td></tr>
<tr ><td>Row 12</td></tr><tr ><td>Row
13</td></tr><tr ><td>Row 14</td></tr>
<tr ><td>Row 15</td></tr><tr ><td>Row
16</td></tr><tr ><td>Row 17</td></tr>
<tr ><td>Row 18</td></tr><tr ><td>Row
19</td></tr><tr height='15px'><td></td></tr>
</table>
</div>
</td>
<td align='top'>
<div id='chart'
STYLE='height:200;width:400;overflow:scroll' onscroll='onScroll()'>
<table id='chartTable' border=0 bgcolor='Orange' >
<tr >
<td nowrap>0 x 0</td><td nowrap>0 x
1</td><td nowrap>0 x 2</td><td nowrap>0 x 3</td><td nowrap>0 x 4</td>
<td nowrap>0 x 5</td><td nowrap>0 x
6</td><td nowrap>0 x 7</td><td nowrap>0 x 8</td><td nowrap>0 x 9</td>
<td nowrap>0 x 10</td><td nowrap>0 x
11</td><td nowrap>0 x 12</td><td nowrap>0 x 13</td><td nowrap>0 x 14</td>
<td nowrap>0 x 15</td><td nowrap>0 x
16</td><td nowrap>0 x 17</td><td nowrap>0 x 18</td><td nowrap>0 x 19</td>
</tr>
<tr >
<td nowrap>1 x 0</td><td nowrap>1 x
1</td><td nowrap>1 x 2</td><td nowrap>1 x 3</td><td nowrap>1 x 4</td>
<td nowrap>1 x 5</td><td nowrap>1 x
6</td><td nowrap>1 x 7</td><td nowrap>1 x 8</td><td nowrap>1 x 9</td>
<td nowrap>1 x 10</td><td nowrap>1 x
11</td><td nowrap>1 x 12</td><td nowrap>1 x 13</td><td nowrap>1 x 14</td>
<td nowrap>1 x 15</td><td nowrap>1 x
16</td><td nowrap>1 x 17</td><td nowrap>1 x 18</td><td nowrap>1 x 19</td>
</tr>
<tr >
<td nowrap>2 x 0</td><td nowrap>2 x
1</td><td nowrap>2 x 2</td><td nowrap>2 x 3</td><td nowrap>2 x 4</td>
<td nowrap>2 x 5</td><td nowrap>2 x
6</td><td nowrap>2 x 7</td><td nowrap>2 x 8</td><td nowrap>2 x 9</td>
<td nowrap>2 x 10</td><td nowrap>2 x
11</td><td nowrap>2 x 12</td><td nowrap>2 x 13</td><td nowrap>2 x 14</td>
<td nowrap>2 x 15</td><td nowrap>2 x
16</td><td nowrap>2 x 17</td><td nowrap>2 x 18</td><td nowrap>2 x 19</td>
</tr>
<tr >
<td nowrap>3 x 0</td><td nowrap>3 x
1</td><td nowrap>3 x 2</td><td nowrap>3 x 3</td><td nowrap>3 x 4</td>
<td nowrap>3 x 5</td><td nowrap>3 x
6</td><td nowrap>3 x 7</td><td nowrap>3 x 8</td><td nowrap>3 x 9</td>
<td nowrap>3 x 10</td><td nowrap>3 x
11</td><td nowrap>3 x 12</td><td nowrap>3 x 13</td><td nowrap>3 x 14</td>
<td nowrap>3 x 15</td><td nowrap>3 x
16</td><td nowrap>3 x 17</td><td nowrap>3 x 18</td><td nowrap>3 x 19</td>
</tr>
<tr >
<td nowrap>4 x 0</td><td nowrap>4 x
1</td><td nowrap>4 x 2</td><td nowrap>4 x 3</td><td nowrap>4 x 4</td>
<td nowrap>4 x 5</td><td nowrap>4 x
6</td><td nowrap>4 x 7</td><td nowrap>4 x 8</td><td nowrap>4 x 9</td>
<td nowrap>4 x 10</td><td nowrap>4 x
11</td><td nowrap>4 x 12</td><td nowrap>4 x 13</td><td nowrap>4 x 14</td>
<td nowrap>4 x 15</td><td nowrap>4 x
16</td><td nowrap>4 x 17</td><td nowrap>4 x 18</td><td nowrap>4 x 19</td>
</tr>
<tr >
<td nowrap>5 x 0</td><td nowrap>5 x
1</td><td nowrap>5 x 2</td><td nowrap>5 x 3</td><td nowrap>5 x 4</td>
<td nowrap>5 x 5</td><td nowrap>5 x
6</td><td nowrap>5 x 7</td><td nowrap>5 x 8</td><td nowrap>5 x 9</td>
<td nowrap>5 x 10</td><td nowrap>5 x
11</td><td nowrap>5 x 12</td><td nowrap>5 x 13</td><td nowrap>5 x 14</td>
<td nowrap>5 x 15</td><td nowrap>5 x
16</td><td nowrap>5 x 17</td><td nowrap>5 x 18</td><td nowrap>5 x 19</td>
</tr>
<tr >
<td nowrap>6 x 0</td><td nowrap>6 x
1</td><td nowrap>6 x 2</td><td nowrap>6 x 3</td><td nowrap>6 x 4</td>
<td nowrap>6 x 5</td><td nowrap>6 x
6</td><td nowrap>6 x 7</td><td nowrap>6 x 8</td><td nowrap>6 x 9</td>
<td nowrap>6 x 10</td><td nowrap>6 x
11</td><td nowrap>6 x 12</td><td nowrap>6 x 13</td><td nowrap>6 x 14</td>
<td nowrap>6 x 15</td><td nowrap>6 x
16</td><td nowrap>6 x 17</td><td nowrap>6 x 18</td><td nowrap>6 x 19</td>
</tr>
<tr >
<td nowrap>7 x 0</td><td nowrap>7 x
1</td><td nowrap>7 x 2</td><td nowrap>7 x 3</td><td nowrap>7 x 4</td>
<td nowrap>7 x 5</td><td nowrap>7 x
6</td><td nowrap>7 x 7</td><td nowrap>7 x 8</td><td nowrap>7 x 9</td>
<td nowrap>7 x 10</td><td nowrap>7 x
11</td><td nowrap>7 x 12</td><td nowrap>7 x 13</td><td nowrap>7 x 14</td>
<td nowrap>7 x 15</td><td nowrap>7 x
16</td><td nowrap>7 x 17</td><td nowrap>7 x 18</td><td nowrap>7 x 19</td>
</tr>
<tr >
<td nowrap>8 x 0</td><td nowrap>8 x
1</td><td nowrap>8 x 2</td><td nowrap>8 x 3</td><td nowrap>8 x 4</td>
<td nowrap>8 x 5</td><td nowrap>8 x
6</td><td nowrap>8 x 7</td><td nowrap>8 x 8</td><td nowrap>8 x 9</td>
<td nowrap>8 x 10</td><td nowrap>8 x
11</td><td nowrap>8 x 12</td><td nowrap>8 x 13</td><td nowrap>8 x 14</td>
<td nowrap>8 x 15</td><td nowrap>8 x
16</td><td nowrap>8 x 17</td><td nowrap>8 x 18</td><td nowrap>8 x 19</td>
</tr>
<tr >
<td nowrap>9 x 0</td><td nowrap>9 x
1</td><td nowrap>9 x 2</td><td nowrap>9 x 3</td><td nowrap>9 x 4</td>
<td nowrap>9 x 5</td><td nowrap>9 x
6</td><td nowrap>9 x 7</td><td nowrap>9 x 8</td><td nowrap>9 x 9</td>
<td nowrap>9 x 10</td><td nowrap>9 x
11</td><td nowrap>9 x 12</td><td nowrap>9 x 13</td><td nowrap>9 x 14</td>
<td nowrap>9 x 15</td><td nowrap>9 x
16</td><td nowrap>9 x 17</td><td nowrap>9 x 18</td><td nowrap>9 x 19</td>
</tr>
<tr >
<td nowrap>10 x 0</td><td nowrap>10 x
1</td><td nowrap>10 x 2</td><td nowrap>10 x 3</td><td nowrap>10 x 4</td>
<td nowrap>10 x 5</td><td nowrap>10 x
6</td><td nowrap>10 x 7</td><td nowrap>10 x 8</td><td nowrap>10 x 9</td>
<td nowrap>10 x 10</td><td nowrap>10 x
11</td><td nowrap>10 x 12</td><td nowrap>10 x 13</td><td nowrap>10 x 14</td>
<td nowrap>10 x 15</td><td nowrap>10 x
16</td><td nowrap>10 x 17</td><td nowrap>10 x 18</td><td nowrap>10 x 19</td>
</tr>
<tr >
<td nowrap>11 x 0</td><td nowrap>11 x 1</td><td
nowrap>11 x 2</td><td nowrap>11 x 3</td><td nowrap>11 x 4</td>
<td nowrap>11 x 5</td><td nowrap>11 x 6</td><td
nowrap>11 x 7</td><td nowrap>11 x 8</td><td nowrap>11 x 9</td>
<td nowrap>11 x 10</td><td nowrap>11 x
11</td><td nowrap>11 x 12</td><td nowrap>11 x 13</td><td nowrap>11 x 14</td>
<td nowrap>11 x 15</td><td nowrap>11 x
16</td><td nowrap>11 x 17</td><td nowrap>11 x 18</td><td nowrap>11 x 19</td>
</tr>
<tr >
<td nowrap>12 x 0</td><td nowrap>12 x
1</td><td nowrap>12 x 2</td><td nowrap>12 x 3</td><td nowrap>12 x 4</td>
<td nowrap>12 x 5</td><td nowrap>12 x
6</td><td nowrap>12 x 7</td><td nowrap>12 x 8</td><td nowrap>12 x 9</td>
<td nowrap>12 x 10</td><td nowrap>12 x
11</td><td nowrap>12 x 12</td><td nowrap>12 x 13</td><td nowrap>12 x 14</td>
<td nowrap>12 x 15</td><td nowrap>12 x
16</td><td nowrap>12 x 17</td><td nowrap>12 x 18</td><td nowrap>12 x 19</td>
</tr>
<tr >
<td nowrap>13 x 0</td><td nowrap>13 x 1</td><td
nowrap>13 x 2</td><td nowrap>13 x 3</td><td nowrap>13 x 4</td>
<td nowrap>13 x 5</td><td nowrap>13 x 6</td><td
nowrap>13 x 7</td><td nowrap>13 x 8</td><td nowrap>13 x 9</td>
<td nowrap>13 x 10</td><td nowrap>13 x
11</td><td nowrap>13 x 12</td><td nowrap>13 x 13</td><td nowrap>13 x 14</td>
<td nowrap>13 x 15</td><td nowrap>13 x
16</td><td nowrap>13 x 17</td><td nowrap>13 x 18</td><td nowrap>13 x 19</td>
</tr>
<tr >
<td nowrap>14 x 0</td><td nowrap>14 x 1</td><td
nowrap>14 x 2</td><td nowrap>14 x 3</td><td nowrap>14 x 4</td>
<td nowrap>14 x 5</td><td nowrap>14 x 6</td><td
nowrap>14 x 7</td><td nowrap>14 x 8</td><td nowrap>14 x 9</td>
<td nowrap>14 x 10</td><td nowrap>14 x
11</td><td nowrap>14 x 12</td><td nowrap>14 x 13</td><td nowrap>14 x 14</td>
<td nowrap>14 x 15</td><td nowrap>14 x
16</td><td nowrap>14 x 17</td><td nowrap>14 x 18</td><td nowrap>14 x 19</td>
</tr>
<tr >
<td nowrap>15 x 0</td><td nowrap>15 x 1</td><td
nowrap>15 x 2</td><td nowrap>15 x 3</td><td nowrap>15 x 4</td>
<td nowrap>15 x 5</td><td nowrap>15 x 6</td><td
nowrap>15 x 7</td><td nowrap>15 x 8</td><td nowrap>15 x 9</td>
<td nowrap>15 x 10</td><td nowrap>15 x 11</td><td
nowrap>15 x 12</td><td nowrap>15 x 13</td><td nowrap>15 x 14</td>
<td nowrap>15 x 15</td><td nowrap>15 x 16</td><td
nowrap>15 x 17</td><td nowrap>15 x 18</td><td nowrap>15 x 19</td>
</tr>
<tr >
<td nowrap>16 x 0</td><td nowrap>16 x 1</td><td
nowrap>16 x 2</td><td nowrap>16 x 3</td><td nowrap>16 x 4</td>
<td nowrap>16 x 5</td><td nowrap>16 x 6</td><td
nowrap>16 x 7</td><td nowrap>16 x 8</td><td nowrap>16 x 9</td>
<td nowrap>16 x 10</td><td nowrap>16 x 11</td><td
nowrap>16 x 12</td><td nowrap>16 x 13</td><td nowrap>16 x 14</td>
<td nowrap>16 x 15</td><td nowrap>16 x 16</td><td
nowrap>16 x 17</td><td nowrap>16 x 18</td><td nowrap>16 x 19</td>
</tr>
<tr >
<td nowrap>17 x 0</td><td nowrap>17 x 1</td><td
nowrap>17 x 2</td><td nowrap>17 x 3</td><td nowrap>17 x 4</td>
<td nowrap>17 x 5</td><td nowrap>17 x 6</td><td
nowrap>17 x 7</td><td nowrap>17 x 8</td><td nowrap>17 x 9</td>
<td nowrap>17 x 10</td><td nowrap>17 x 11</td><td
nowrap>17 x 12</td><td nowrap>17 x 13</td><td nowrap>17 x 14</td>
<td nowrap>17 x 15</td><td nowrap>17 x 16</td><td
nowrap>17 x 17</td><td nowrap>17 x 18</td><td nowrap>17 x 19</td>
</tr>
<tr >
<td nowrap>18 x 0</td><td nowrap>18 x 1</td><td
nowrap>18 x 2</td><td nowrap>18 x 3</td><td nowrap>18 x 4</td>
<td nowrap>18 x 5</td><td nowrap>18 x 6</td><td
nowrap>18 x 7</td><td nowrap>18 x 8</td><td nowrap>18 x 9</td>
<td nowrap>18 x 10</td><td nowrap>18 x 11</td><td
nowrap>18 x 12</td><td nowrap>18 x 13</td><td nowrap>18 x 14</td>
<td nowrap>18 x 15</td><td nowrap>18 x 16</td><td
nowrap>18 x 17</td><td nowrap>18 x 18</td><td nowrap>18 x 19</td>
</tr>
<tr >
<td nowrap>19 x 0</td><td nowrap>19 x 1</td><td
nowrap>19 x 2</td><td nowrap>19 x 3</td><td nowrap>19 x 4</td>
<td nowrap>19 x 5</td><td nowrap>19 x 6</td><td
nowrap>19 x 7</td><td nowrap>19 x 8</td><td nowrap>19 x 9</td>
<td nowrap>19 x 10</td><td nowrap>19 x 11</td><td
nowrap>19 x 12</td><td nowrap>19 x 13</td><td nowrap>19 x 14</td>
<td nowrap>19 x 15</td><td nowrap>19 x 16</td><td
nowrap>19 x 17</td><td nowrap>19 x 18</td><td nowrap>19 x 19</td>
</tr>
<tr height='1px'><td></td></tr>
</table>
</div>
<td>
</tr>
</table>
</body>
</html>
