473,226 Members | 1,518 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 software developers and data experts.

Locking Table Headers (like Excel)

Hello Javascript enthusiasts!

I need to lock a TABLE HEADER vertically, so when you scroll up/down,
the content moves but the header is always visible, like you can do in
Excel.

It is for an intranet app, and only has to work in IE6 (and future
releases).

I have a working example at:

http://c.1asphost.com/giggy/locked_h...in/default.htm

which relies on this CSS hack applied to the TH:
{
top:expression(document.getElementById("table_cont ainer_1").scrollTop-0);
}

This example is seamless and solid -- and simple! -- but the problem is
it is too resource intensive on tables more than 100 rows or so... it
slows _EVERYTHING_ down on the page. Some of these tables are 1000
rows and more!

Anyone have any solutions that are less processor-expensive?

Thanks,
Ann

Apr 6 '06 #1
11 10521
A couple caveats:

1. Only has to work in IE6 and later
2. Resource Inexpensive
3. The header data is dynamically populated, but Wraps
4. The content is dynamically populated, but Nowraps
**3 and 4 means that the width of the widest data column determines the
width of each column, including the header for that column...
5. I cannot use fixed widths for the columns -- they must be determined
by the width of the dynamic data they display.

Basically, if you look at the example in the URL above, _THAT_ is what
I want in every way, except it is too slow/resource expensive...

Thanks,
Ann

Apr 6 '06 #2
Giggle Girl wrote:
I need to lock a TABLE HEADER vertically, so when you scroll up/down,
the content moves but the header is always visible, like you can do in
Excel.
Search the archives of this group for heated discussions of this topic ;)
It is for an intranet app, and only has to work in IE6 (and future
releases).
That is a good thing. It's easier to support either IE or Firefox(and others
that support a scrollable tbody) but not both.

One similar IE-only solution I have done is:
http://www.mattkruse.com/temp/floating_header.html

This is especially useful when there are multiple long tables on a page, and
you want to scroll the page like normal yet have the header rows "stick".
I've used this method many times and everyone seems to like it.
I have a working example at:
http://c.1asphost.com/giggy/locked_h...in/default.htm
which relies on this CSS hack applied to the TH:
{
top:expression(document.getElementById("table_cont ainer_1").scrollTop-0);
}
There are two main problems:
1. Expressions get evaluated constantly, with every mouse move, even if your
user interaction doesn't impact the expression evaluation. This is bad
design by IE, IMO.
2. Your document.getElementById() call is going to be slow. There's no need
to do it - instead use offsetParent[*] to find the scrollable container,
which should speed things up quite a bit.

Also, you should consider adding the rule to the TR rather than each TH.
Anyone have any solutions that are less processor-expensive?


Another option is to ditch expressions and instead have a javascript
function specific to the table that sets the "top" value of the TR when the
container is scrolled. This way expressions aren't evaluated constantly.

Of course, keep in mind that if your table contains select elements they are
going to show through your headers. Also, if your table has any cell
spacing, the data will bleed through that as well.

I've not tested any of these solutions on IE7, so I don't know how
forward-compatible they are.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Apr 6 '06 #3
Hey Matt,
thanks for your reply:
2. Your document.getElementById() call is going to be slow.
There's no need to do it - instead use offsetParent[*] to find the
scrollable container, which should speed things up quite a bit.


Could you supply me with the correct code for this, that I can plug
right in? (I have never used offsetParent and don't know where to put
it...)

And yes, I had searched the archives befoer posting and saw many
threads doing stuff similar, and some posts by you, as well. Nothing
was quite what I wanted (that I have seen so far.)

Regarding the sample you provided, it won't work for my purposes. No
offense, but it is too clunky, the way it jiggles, IMO. One thing I
loved about the example I provided was how "solid" it was; no jiggle.

Thanks so much for your reply! (Yay, Matt Kruse replied -- one of the
stars here!)

Thanks,
Ann

Apr 6 '06 #4
Giggle Girl wrote:
Could you supply me with the correct code for this, that I can plug
right in? (I have never used offsetParent and don't know where to put
it...)
That's custom consulting work, which I don't do :) Actually, it would take
time to inspect your code and html and time is something I don't have much
of, sorry.

I did pull this example out of my archives, though, which might help:
http://www.mattkruse.com/temp/grid.html
Regarding the sample you provided, it won't work for my purposes. No
offense, but it is too clunky, the way it jiggles, IMO. One thing I
loved about the example I provided was how "solid" it was; no jiggle.


True, they are different approaches. When I run mine, it doesn't "jiggle" at
all. It just floats nicely to the top of the page. Perhaps a different in
machine performance? I don't know. The benefit of the example I provided is
that it works well for any number of tables on a page, and allows the user
to scroll through a long page like normal, rather than having a small
separate "window" view of a table. I think both approaches do have their
merits.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Apr 6 '06 #5
>That's custom consulting work, which I don't do :)

No problem. Sorry, I thought it was just one line of code to replace
my little CSS hack...

One other "thinking outside the box" idea I have is this:

1. Put table "Headers" in its own table
2. Have an iframe below it, containing the Table Data (in its own
table)
3. Somehow set the Column width of the Headers table by detecting the
width of the Iframe's/Data columns...

I am not sure if it is possible to retrieve and set table column widths
like this, but I am looking into it...

Any other ideas anyone?

Thanks,
Ann

Apr 6 '06 #6
Giggle Girl wrote:
One other "thinking outside the box" idea I have is this:

1. Put table "Headers" in its own table
2. Have an iframe below it, containing the Table Data (in its own
table)
3. Somehow set the Column width of the Headers table by detecting the
width of the Iframe's/Data columns... ....
Any other ideas anyone?


One issue with your idea is that either of the two subtables may be
dictating the widths of the columns in the original table. Also, if
you get the widths at the outset and get your two subtables to align
horizontally, the user may then adjust the screen size and everything
will have to be recomputed. Well, it might work with an onresize event
handler.

I had another idea along these lines. Duplicate the underlying table
(by cloning it). Insert the cloned table into a div with no scroll
that is sized to be exactly the width and height of the header row.
Right under this div (and top aligned with it) is a second div that
scrolls, containing the original table. A variation on this idea is
that the second div is immediately below the first div and it clips the
top part of the included table. Don't know if either one is possible.
These also mandate an onresize handler, which I'm thinking would be
easier, if the ideas work at all, that is.

Csaba Gabor from Vienna

Apr 6 '06 #7
Csaba Gabor wrote:
<snip>
I had another idea along these lines. Duplicate the
underlying table (by cloning it). Insert the cloned
table into a div with no scroll that is sized to be exactly
the width and height of the header row. Right under this div
(and top aligned with it) is a second div that scrolls,
containing the original table. A variation on this idea is
that the second div is immediately below the first div and
it clips the top part of the included table. Don't know if
either one is possible. These also mandate an onresize handler,
which I'm thinking would be easier, if the ideas work at all,
that is.


That is possible, and it works (in some senses of the word):-

<URL: http://www.litotes.demon.co.uk/examp...bleScroll.html >

Indeed it is an approach that handles things like the user choosing to
re-size the displayed text without everything falling apart, or the
programmer having to continually measure the size of all the columns and
rows all the time and compensate for such changes themselves.

(On the other hand Matt doesn't seem to like that approach much ;)

Richard.
Apr 7 '06 #8
Giggle,

I took a similar approach for a "non-jiggly" scroll table but am doing
the CSS "lock" on the TR tag of the header rather than the individual
TH tags. I am wondering if my approach may be faster in the sense that
the expression is only evaluated on one tag rather than a multiple.
Here is my CSS:

DIV.scrollTable {
border:1px solid #B3C0C9;
width:100%;
height:150px;
overflow:auto;
}
DIV.scrollTable TABLE {
width:100%;
}
DIV.scrollTable TR.fixed {
position:relative;
top:expression(
this.parentElement.parentElement.parentElement.scr ollTop);
}
DIV.scrollTable TH {
border-bottom:1px solid #264a6f;
border-right:1px solid #909090;
background-color:#B7D1E1;
font-weight:normal;
padding:1px 3px;
text-align:left;
color:#264a6f;
white-space:nowrap;
}

And the HTML:

<p>Table One</p>
<div class="scrollTable">
<table cellpadding=2 cellspacing=0>
<tr class="fixed">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
</tr>
<tr>
<td>aaaaaaaaaaaaaa</td>
<td>bbbbbbb</td>
<td>cccccccccccccccccccc</td>
<td>ddddddddddd</td>
<td>eeeeeee</td>
<td>fff</td>
</tr>
<! --- Repeat the above TR ad nauseum -- ->
</table>
</div>

Note that I hacked my "CSS hack" a bit further by using parentElements
to reference the DIV rather than needing to identify it by ID. The
advantage of this approach (if we ignore the disadvantages of using
expression in the first place) is that I can easily create a second
table on the page without needing to make additional copies of the
original CSS definitions. Just use the same class names and you are
good to go.

For what it's worth,
Yukky.

Apr 7 '06 #9
Yukky Korpulent wrote:
^^^^^^^^^^^^^^^
Is this supposed to be some kind of fake-troll? (The similarity to the
name of Jukka "Yucca" K. Korpela, a well-known Web development specialist
from Finland, is obvious.) If yes, I suggest you change name at once.
[...]
border:1px solid #B3C0C9;
[...]
DIV.scrollTable TH {
border-bottom:1px solid #264a6f;
border-right:1px solid #909090;
background-color:#B7D1E1;
Neither color is Web-safe.
[...]
<! --- Repeat the above TR ad nauseum -- ->


This is not a Valid "comment declaration".

<URL:http://validator.w3.org/>
PointedEars
Apr 7 '06 #10
Thomas Lahn wrote:
Is this supposed to be some kind of fake-troll?
No.
Neither color is Web-safe.
The example set forth was to illustrate locking table rows, not colors.
This is not a Valid "comment declaration".


Clearly, that line is informational only.

Apr 7 '06 #11
Good stuff, Yukky!

I will plug this into some of the massive tables I am working with and
let you know how much better the performance hit is compared to what I
had!

And no jiggles!

Thanks,
Ann

Apr 8 '06 #12

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Michael Chermside | last post by:
Ype writes: > For the namespaces in Jython this 'Python internal thread safety' > is handled by the Java class: > > http://www.jython.org/docs/javadoc/org/python/core/PyStringMap.html > > which...
5
by: deko | last post by:
How to run action query against linked table? I have an Access 2003 mdb with an Excel 2003 Workbook as a linked table. When I attempt to run an action query against the linked table I get this...
1
by: Bodi | last post by:
Hi, I'd like some suggestions on a db design. The data source is pretty simple. I'll be importing from an excel spreadsheet. There could be 4 to 12 rows, and there will always be the same...
1
by: Peter Rilling | last post by:
You know in Excel you have the ability to lock certain rows such that the rows under it allow you to scroll but the locked rows say on the screen. This is especially useful when dealing you want...
6
by: syvman | last post by:
Hi everyone... I am pulling my hair out trying to do this, and was wondering if someone could give me some assistance... I have an Excel spreadsheet containing several worksheets. I'd like to be...
0
by: salad | last post by:
I have A97 and A2003. I created a form using the Pivot Table wizard. This creates an unbound form with an embedded OLE object containing a Pivot table in Excel. There are 2 controls when the...
2
by: Wensui Liu | last post by:
Dear all, is there a way to create a 2-dimension-table-like object such that I can reference a whole column directly using something like : mytable.column1 ? by the way, can python be used...
1
by: TG | last post by:
Hi! I have an application in which I have some checkboxes and depending which ones are checked those columns will show in the datagridview from sql server or no. After that I have 2 buttons:...
7
by: TG | last post by:
hi! I am trying to create a sql server table from an excel sheet. Here is the code I have: 'This procedure the xlsx file and dumps it to a table in SQL Server
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.