Scrolling Table - Which browsers support this code

johkar

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="JavaScript" type="text/javascript">
function fix(){
test.obj = headerTR;
test.obj.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: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;}
..header {position:relative;}
</style>
</head>
<body>
<div id="test" class="reportView" 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>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>

</table>
</div>
</body>
</html>

Jul 20 '05 #1

Subscribe Post Reply

6199

Lasse Reichstein Nielsen

"johkar" <no********@link.net> writes:

I only have IE 6 and dial-up. Can you help me determine which browsers
support this code?
IE does, and pretty much only IE.
<script language="JavaScript" type="text/javascript">
function fix(){
test.obj = headerTR;
Neither "test" nor "headerTR" are global variables in most other
browsers. To access an element of a page, you can add:

var test = document.getElementById('test');
var headerTR = document.getElementById('headerTR');

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

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

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

Jul 20 '05 #2

johkar

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" <lr*@hotpop.com> wrote in message
news:u1**********@hotpop.com...

"johkar" <no********@link.net> writes:
Thank you both for your answers. Are you saying that the latest Netscape browser would not work?

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 - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Jul 20 '05 #3

johkar wrote:

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="JavaScript" type="text/javascript">
function fix(){
test.obj = headerTR;
This won't work in non-MSIE browsers.
test.obj.style.top = test.scrollTop + "px";
This won't work either in non-MSIE browsers.
}
</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;}
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.
..header {position:relative;}
</style>
</head>
<body>
<div id="test" class="reportView" 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>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>

</table>
</div>
</body>
</html>

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/doctorunc...bleInMSIE.html

http://www10.brinkster.com/doctorunc...rflowAuto.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/doctorunc...e7Section.html

Jul 20 '05 #4

HikksNotAtHome

In article <bi**********@news.eusc.inter.net>, DU <dr*******@hotREMOVEmail.com>
writes:

http://www10.brinkster.com/doctorunc...ScrollingTable

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

Jul 20 '05 #5

johkar

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="JavaScript" type="text/javascript">
var IE;
if(document.all)
IE=true;

function fix(){
var test = document.getElementById('test');
var headerTR = document.getElementById('headerTR');

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:relative;}
</style>
</head>
<body>
<script language="JavaScript" type="text/javascript">
if(IE)
document.write('<div id="test" class="reportView" 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="JavaScript" type="text/javascript">
if(IE)
document.write('</div>');
</script>
</body>
</html>

Jul 20 '05 #6

HikksNotAtHome

In article <7b****************@newsread4.news.pas.earthlink.n et>, "johkar"
<no********@link.net> writes:

<script language="JavaScript" type="text/javascript">
var IE;
if(document.all)

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.layers)
{alert('I think you are using MSIE but I could still be wrong')}
--
Randy

Jul 20 '05 #7

Csaba2000

> 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 ....
John

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:1in">
<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>

Jul 20 '05 #8

HikksNotAtHome wrote:

In article <bi**********@news.eusc.inter.net>, DU <dr*******@hotREMOVEmail.com>
writes:

http://www10.brinkster.com/doctorunc...ScrollingTable

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.

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/doctorunc...e7Section.html

Jul 20 '05 #9

johkar

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

John

"HikksNotAtHome" <hi************@aol.com> wrote in message
news:20***************************@mb-m23.aol.com...

In article <7b****************@newsread4.news.pas.earthlink.n et>, "johkar"
<no********@link.net> writes:
<script language="JavaScript" type="text/javascript">
var IE;
if(document.all)
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.layers)
{alert('I think you are using MSIE but I could still be wrong')}
--
Randy

Jul 20 '05 #10

Similar topics

Opera 6 & 7 scrolling.

by: Pete | last post by:

I'm working (playing) on a mouse following script. Yes, the sort no one likes but I'm having great fun tinkering with it - sad. Anyway, if there's enough page content to cause scrolling and I...

Javascript

How to do a <table> with <div> tag

by: Toby Austin | last post by:

I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will...

HTML / CSS

Variable length scrolling <div> or <iframe>?

by: Jim M | last post by:

I have had great success with using <iframe> with overflow-y set to auto. I can get a similar look with the <iframe> tag. BUT... In all cases I need to have fixed heights. Is there a way to...

.NET Framework

Making table rows visible/invisible in Netscape

by: Harry Gould | last post by:

To all, I'm a newbie here, so please bear with me. I develop web pages for a company intranet where Internet Explorer 6 is the standard. Now I must develop a public internet website that is...

Javascript

Scrolling in non-IE browsers.

by: Marc Jennings | last post by:

When editing a DataGrid that is about halfway down a scrollable page, ideally, when the edit link is clicked I would like to be taken to the control that I am editing. With Internet Explorer this...

ASP.NET

need help on editing existing script for scrolling tables

by: Jon Paal | last post by:

an excellent working solution for scrolling tables appears at this link http://www.litotes.demon.co.uk/example_scripts/tableScroll.html author has no contact page, but I have a question about...

Javascript

need help looking for a cross-browsers vertical scrolling script

by: P2P | last post by:

Hi I am wondering if someone know of a free cross-browsers vertical scrolling script that - is cross cross-browsers - will call the scrolling content from an external html page or from a...

Javascript

CSS with XSL & XML: Scrolling Table ... almost there!

by: asearle | last post by:

Dear all, I have been working to implement a scrolling table into an xml / xsl interface and so far have managed to put together an acceptable version using <thead> and <tbody> syntax. Indeed for...

HTML / CSS

Scrolling table different behaviour in 3 browsers

by: beary | last post by:

I'm trying to make a table with fixed header but scrolling body. The page is here Here's the summary of what happens in the browsers: FF3: Works almost perfectly. Scrolls as desired. Annoying...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++