Cross-Browser.com

xTHF Ajaxified!

xTableHeaderFixed Ajax Demo

Adapting xTHF to an Ajax App

Select tables from the menubar.

Status

04May2011 - Experimenting with zoom.

Code & Docs

xTableHeaderFixed - view source code, documentation and revision history.

Demos

The S demos simulate collapsed borders by having border-collapse:separate and border-spacing:0 in the CSS, and cellspacing='0' in the HTML, and setting only right and bottom borders on the TDs and THs. The tables in demos S1 and S2 have different styling so an xTableHeaderFixed object is instantiated for each table. Table 2 in the S3 demo uses the "header no-hide" feature (yOffset=0).

  • Demo S1 - The container is the window object.
  • Demo S2 - Multiple tables in a scrollable DIV container.
  • Demo S3 - Each table has its own scrollable DIV as a container.
  • Demo S4 - This is similar to demo S1 but has a position:fixed horizontal bar at the top of the viewport.

The C demos have border-collapse:collapse and do not have border-spacing:0 in the CSS, and do not have cellspacing='0' in the HTML, and they have complete borders on the TDs and THs. The tables in demos C1 and C2 have the same styling so only one xTableHeaderFixed object is instantiated. Table 2 in the C3 and Ajax demos uses the "header no-hide" feature (yOffset=0).

  • Demo C1 - The container is the window object.
  • Demo C2 - Multiple tables in a scrollable DIV container.
  • Demo C3 - Each table has its own scrollable DIV as a container.
  • Ajax Demo - The container is a scrollable DIV. The tables are served via Ajax.

Here's the demo that started it all:

  • Demo 0 - the original "catfish" version.

Zoom!

Previously, theseeker asked about zoom support. Now shutter also asked about it. So now I'm experimenting with zoom support on this page. View the source of this page to see my experiments.

11May2011: My idea is to detect a zoom event and then repaint all xthf objects on the page - to allow them to adapt to the new zoom setting. This works fairly well (with no changes to xTableHeaderFixed) when you use ctrl+, ctrl-, ctrl0 and ctrl+mousewheel to zoom - but not in IE7 which did not implement zoom as completely as IE8+. It looks like listening for the window resize event might be a better way to detect zoom changes. But that doesn't appear to work in IE7.

Discussions

There are many threads on xTableHeaderFixed at the X Forums.

Here's the old thread at Site Point, which began on December 1, 2006.