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.getEle mentById("table _container_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 11 10566
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
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.getEle mentById("table _container_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.getEle mentById() 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
Hey Matt,
thanks for your reply: 2. Your document.getEle mentById() 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
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
>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
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
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.
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:relati ve;
top:expression(
this.parentElem ent.parentEleme nt.parentElemen t.scrollTop);
}
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="scrollTa ble">
<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>aaaaaaaaaaa aaa</td>
<td>bbbbbbb</td>
<td>ccccccccccc ccccccccc</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.
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.or g/>
PointedEars This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
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 has almost all of it public methods Java synchronized:
>
>
http://cvs.sourceforge.net/viewcvs.py/jython/jython/org/python/core/PyStringMap.
|
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
error:
Deleting data in a linked table is not supported by this ISAM.
From what I understand, indexed sequential access method (ISAM) drivers are
used to update "non-Microsoft" file formats. So why doesn't Access
|
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 amount of columns as rows.
row headers and column headers are just numbers, and the actual data
again is just numbers.
|
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 headers to stay in place
because you might have a lot of rows that need to scroll.
I would like to do that same thing in ASP.NET. Does anyone have any
suggestions about the best way to do this?
|
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 able to take all of the data from the second column (B) of each
worksheet and append that raw data to an access table. The columns in
the spreadsheet do not have headers for use as field names (it's my
assumption that my table should have a...
| |
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 form is created; the Excel spreadsheet
object and a button to "Edit Pivot Table" The code for the button executes
Me!PivotTable.Verb = acOLEVerbOpen
Me!PivotTable.Action = acOLEActivate
Is there a way to refresh the pivot table? Each time I...
|
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 for database programming to pull large
volume data (hundred M or even several Gs) out of large database and
do data manipulation and reporting ? if yes, how is the speed and
efficiency ?
|
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:
1) export to excel button exports the visible columns from the
datagridview to excel (this works fine)
|
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
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |