Scrolling Table - Which browsers support this code

**Lasse Reichstein Nielsen** · Jul 20 '05, 09:52 AM

Re: Scrolling Table - Which browsers support this code

"johkar" <nosendjunk@lin k.net> writes:
[color=blue]
> I only have IE 6 and dial-up. Can you help me determine which browsers
> support this code?[/color]

IE does, and pretty much only IE.
[color=blue]
> <script language="JavaS cript" type="text/javascript">
> function fix(){
> test.obj = headerTR;[/color]

Neither "test" nor "headerTR" are global variables in most other
browsers. To access an element of a page, you can add:

var test = document.getEle mentById('test' );
var headerTR = document.getEle mentById('heade rTR');

To still support older/ancient browsers (in particular IE 4) you need
more complicated code, using document.all as an alternative.
[color=blue]
> overflow-Y:scroll;[/color]

This is not CSS, but again an IE proprietary code.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

**johkar** · Jul 20 '05, 09:53 AM

Re: Scrolling Table - Which browsers support this code

Right you are. ;- I need to download Netscape to test, but I believe I
have read that it supports tbody set to a fixed height and overflow to auto.
I was just looking for confirmation, but I will do some research.

Thanks again, John
"Lasse Reichstein Nielsen" <lrn@hotpop.com > wrote in message
news:u183i99w.f sf@hotpop.com.. .[color=blue]
> "johkar" <nosendjunk@lin k.net> writes:
>[color=green]
> > Thank you both for your answers. Are you saying that the latest[/color][/color]
Netscape[color=blue][color=green]
> > browser would not work?[/color]
>
> The browser works fine. Your code wouldn't work in it :)
>
> The newest Netscape browser is 7.1, which is based on Mozilla 1.4 (IIRC).
> Your code won't work in any Mozilla based browser.
>
> /L
> --
> Lasse Reichstein Nielsen - lrn@hotpop.com
> Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
> 'Faith without judgement merely degrades the spirit divine.'[/color]

DU · Jul 20 '05, 09:53 AM

Re: Scrolling Table - Which browsers support this code

johkar wrote:
[color=blue]
> I only have IE 6 and dial-up. Can you help me determine which browsers
> support this code?
>
> Thanks, John
>
> <html>
> <head>
> <title>Fixed Table Headers</title>
> <script language="JavaS cript" type="text/javascript">
> function fix(){
> test.obj = headerTR;[/color]

This won't work in non-MSIE browsers.
[color=blue]
> test.obj.style. top = test.scrollTop + "px";[/color]

This won't work either in non-MSIE browsers.
[color=blue]
> }
> </script>
> <style type="text/css">
> body {font-size:10pt}
> ..reportView{
> margin-left:1em;
> background-color:white;
> margin-top:8em;
> width:459px;
> height:190px;
> overflow-Y:scroll;
> border:solid 1pt black;
> }
> table {
> background-color:white;
> width:440px;
> }
>
> th {
> text-align:left;
> background-color:blue;
> color:white;
> }
> td {
> border:1pt solid blue;
> vertical-align:top;
> }
> tbody {overflow:auto; }[/color]

In order to make a scrolling table, you need to set height dimension to
the tbody...which is going to be the element scrolling obviously.
You're implementing something different here.
[color=blue]
> ..header {position:relat ive;}
> </style>
> </head>
> <body>
> <div id="test" class="reportVi ew" onscroll="fix() ">
> <table class="table">
> <tr id ="headerTR" class="header">
> <th>ID</th>
> <th>Quadrant</th>
> <th>Status</th>
> <th>Item</th>
> </tr>
> <tr><td>190</td><td>NorthWes t</td><td>good</td><td>Rocking
> Horse</td></tr>
> <tr><td>410</td><td>NorthEas t John Ester
> sjdkfj</td><td>naughty</td><td>Coal</td></tr>
> <tr><td>932</td><td>SouthWes t</td><td>good</td><td>Chemistr y
> Set</td></tr>
> <tr><td>556</td><td>NorthWes t</td><td>good</td><td>Tuba</td></tr>
> <tr><td>410</td><td>MidWest</td><td>good</td><td>Puppy</td></tr>
> <tr><td>932</td><td>SouthEas t</td><td>naughty</td><td>Coal</td></tr>
> <tr><td>652</td><td>SouthEas t</td><td>good</td><td>Turbo
> Track</td></tr>
> <tr><td>868</td><td>NorthWes t</td><td>good</td><td>Doll</td></tr>
> <tr><td>187</td><td>MidWest</td><td>good</td><td>Magic
> Set</td></tr>
> <tr><td>196</td><td>SouthEas t</td><td>naughty</td><td>Coal</td></tr>
> <tr><td>615</td><td>MidWest</td><td>good</td><td>Fraggle
> Rock</td></tr>
>
> </table>
> </div>
> </body>
> </html>
>
>[/color]

You should not have any onscroll event for such page or any scroll event
association. All you need is either a scrollable (overflow:auto +
height:nnpx) tbody or 2 tables.

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/ScrollingTableInMSIE.html

http://www10.brinkster.com/doctorunclear/BrowserBugsSection/Opera7Bugs/Opera7BugTbodyOverflowAuto.html

DU
--
Javascript and Browser bugs:

http://www10.brinkster.com/doctorunclear/

- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x

http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

**HikksNotAtHome** · Jul 20 '05, 09:54 AM

Re: Scrolling Table - Which browsers support this code

In article <bijmui$cjv$1@n ews.eusc.inter. net>, DU <drunclear@hotR EMOVEmail.com>
writes:
[color=blue]
>
>http://www10.brinkster.com/doctorunc...ScrollingTable[/color]
InMSIE.html

Perhaps defining the width in the top table (the header table) to the width of
the "scrolling" table? When I view it in IE6, the only way the header area is
the same width of the table is if I max the screen :( OT but a though.
--
Randy

**johkar** · Jul 20 '05, 09:54 AM

Re: Scrolling Table - Which browsers support this code

Ok, I am opening a can of worms. What if I just want to make sure it works
in the latest IE and Netscape browsers. Anything wrong with doing the code
below...it works for me (I realize I would have to do more to limit just to
those browsers)? Netscape's implementation of a scrollable body element is
ideal. No lining up columns with script and two tables. I like the IE
solution below for the same reason. Perfect matching of header columns to
scrollable body columns. I have tried the 2 table solutions successfully
before, but it is problematic when bringing back data from a database when
you can't set widths fixed. Plus you have to set it all up for printing
too.

John

<html>
<head>
<title>Fixed Table Headers</title>
<script language="JavaS cript" type="text/javascript">
var IE;
if(document.all )
IE=true;

function fix(){
var test = document.getEle mentById('test' );
var headerTR = document.getEle mentById('heade rTR');

if(IE)
headerTR.style. top = test.scrollTop + "px";
}
</script>
<style type="text/css">
body {font-size:10pt}
..reportView{
margin-left:1em;
background-color:white;
margin-top:8em;
width:457px;
height:190px;
overflow:scroll ;
overflow-X:hidden;
overflow-Y:auto;
border:solid 1pt black;
}

table {
background-color:white;
width:440px;
}

th {
text-align:left;
background-color:blue;
color:white;
}
td {
border:1pt solid blue;
vertical-align:top;
}
#IE {overflow:auto; }
#NS {overflow:auto; height:190px}
..header {position:relat ive;}
</style>
</head>
<body>
<script language="JavaS cript" type="text/javascript">
if(IE)
document.write( '<div id="test" class="reportVi ew" onscroll="fix() ">');
</script>
<table class="table">
<tbody id="IE">
<tr id="headerTR" class="header">
<th>ID</th>
<th>Quadrant</th>
<th>Status</th>
<th>Item</th>
</tr>
<tbody id="NS">
<tr>
<td>190</td>
<td>NorthWest </td>
<td>good</td>
<td>Rocking Horse</td>
</tr>
<tr>
<td>410</td>
<td>NorthEast John Ester sjdkfj</td>
<td>naughty</td>
<td>Coal</td>
</tr>
<tr>
<td>932</td>
<td>SouthWest </td>
<td>good</td>
<td>Chemistry Set</td>
</tr>
<tr>
<td>556</td>
<td>NorthWest </td>
<td>good</td>
<td>Tuba</td>
</tr>
<tr>
<td>410</td>
<td>MidWest</td>
<td>good</td>
<td>Puppy</td>
</tr>
<tr>
<td>932</td>
<td>SouthEast </td>
<td>naughty</td>
<td>Coal</td>
</tr>
<tr>
<td>652</td>
<td>SouthEast </td>
<td>good</td>
<td>Turbo Track</td>
</tr>
<tr>
<td>868</td>
<td>NorthWest </td>
<td>good</td>
<td>Doll</td>
</tr>
<tr>
<td>187</td>
<td>MidWest</td>
<td>good</td>
<td>Magic Set</td>
</tr>
<tr>
<td>196</td>
<td>SouthEast </td>
<td>naughty</td>
<td>Coal</td>
</tr>
<tr>
<td>615</td>
<td>MidWest</td>
<td>good</td>
<td>Fraggle Rock</td>
</tr>
</tbody>
</tbody>
</table>
<script language="JavaS cript" type="text/javascript">
if(IE)
document.write( '</div>');
</script>
</body>
</html>

**HikksNotAtHome** · Jul 20 '05, 09:54 AM

Re: Scrolling Table - Which browsers support this code

In article <7bx3b.7578$Jh2 .205@newsread4. news.pas.earthl ink.net>, "johkar"
<nosendjunk@lin k.net> writes:
[color=blue]
><script language="JavaS cript" type="text/javascript">
> var IE;
>if(document.al l)[/color]

language attribute is deprecated

That is a very bad way to try to detect IE.

Opera, in MSIE spoof-mode, will pass it. The page isn't broken in Opera, just
doesn't render the same (which may be acceptable to you).

if (document.all && !window.opera && !document.layer s)
{alert('I think you are using MSIE but I could still be wrong')}
--
Randy

**Csaba2000** · Jul 20 '05, 09:55 AM

Re: Scrolling Table - Which browsers support this code

> Ok, I am opening a can of worms. What if I just want to make sure it works[color=blue]
> in the latest IE and Netscape browsers. Anything wrong with doing the code
> below...it works for me (I realize I would have to do more to limit just to[/color]
....[color=blue]
>
> John[/color]

Well, you have opened a can of worms. There is evidently a lot I don't
understand about Netscape and overflow. I thought it just plain didn't work
and then I tried your example and it works fine for me, too.

Let's start with something simple. Every time I click on a scroll bar up or down
arrow in the single cell table below in NN 6.1, the cell does not scroll, but expands
to the right a bit. After 3 clicks on the down arrow or 4 clicks on the up arrow,
the scroll bar disappears and I have a two line table showing the entire text.
This is not my idea of what scrolling is about.

Furthermore, in Opera 7.01, you get the scrolling, but the only way I see the
phrase "designed to" is to scroll to the bottom and then click once on the
up arrow. At least we get something akin to scrolling in this case.

On my Win 2K Pro / IE 5.5 it's working fine.

Puzzled from New York,
Csaba Gabor
PS. The width:100% did not affect any of my tests.
Essential part of http://Csaba.org/Demos/miniScroll.htm follows:

<table border=1>
<tr>
<td style="width:1i n">
<div style="overflow :auto;width:100 %;height:2.46em ">
This is a long line of text designed to kick in the overflow handling
</div>
</td>
</tr>
</table>

DU · Jul 20 '05, 09:55 AM

Re: Scrolling Table - Which browsers support this code

HikksNotAtHome wrote:
[color=blue]
> In article <bijmui$cjv$1@n ews.eusc.inter. net>, DU <drunclear@hotR EMOVEmail.com>
> writes:
>
>[color=green]
>>http://www10.brinkster.com/doctorunc...ScrollingTable[/color]
>
> InMSIE.html
>
> Perhaps defining the width in the top table (the header table) to the width of
> the "scrolling" table? When I view it in IE6, the only way the header area is
> the same width of the table is if I max the screen :( OT but a though.[/color]

Thank you very much for your excellent feedback. That was an old file
which still needed a bit of work. I updated it and made the changes you
proposed.

DU
--
Javascript and Browser bugs:

http://www10.brinkster.com/doctorunclear/

- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x

http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

**johkar** · Jul 20 '05, 09:56 AM

Re: Scrolling Table - Which browsers support this code

Thanks for the info Randy...and everyone else too. I should be able to
make it foolproof for our intranet now.

John

"HikksNotAtHome " <hikksnotathome @aol.com> wrote in message
news:2003082823 2229.02537.0000 0260@mb-m23.aol.com...[color=blue]
> In article <7bx3b.7578$Jh2 .205@newsread4. news.pas.earthl ink.net>, "johkar"
> <nosendjunk@lin k.net> writes:
>[color=green]
> ><script language="JavaS cript" type="text/javascript">
> > var IE;
> >if(document.al l)[/color]
>
> language attribute is deprecated
>
> That is a very bad way to try to detect IE.
>
> Opera, in MSIE spoof-mode, will pass it. The page isn't broken in Opera,[/color]
just[color=blue]
> doesn't render the same (which may be acceptable to you).
>
> if (document.all && !window.opera && !document.layer s)
> {alert('I think you are using MSIE but I could still be wrong')}
> --
> Randy[/color]

Scrolling Table - Which browsers support this code

Scrolling Table - Which browsers support this code

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment