T. J. Steed

T.J.

> First off, in html file A, I have an iframe which will load html B. Html
> file b contains a table. I want the table's header row (and td's) to
> remained fixed, like a freeze pain in Excel.
> So, I have been using the expression(document.documentElement.scrollTop)
> statement in CSS as well as (trying annything to work) setExpression("top",
> "document.documentElement.scrollTop") within javascript. For some reason or
> another it won't work.

Because it is non-standard garbage that only works in Internet Explorer. You
should use a more cross browser oriented approach, and then apply the IE
cludges to get it working in IE.

The good browsers (opera, safari, konqueror, iCab, firefox) should use
position: fixed; to hold the row in the desired position (relative to the
viewport). It is not possible to fix this relative to the table itself (even
if you use position:relative on the table itself, fixed position still
relates to the viewport, and Firefox refuses to make tables into positioned
element containers - grrr), so you will need to ensure you know the exact
position of the table.

This is easiest achieved by setting body, html, and table padding and margin
to 0px. You can then set the margin top on the table to a specific amount to
give you space for the fixed row. Use position:fixed on the row and position
it top-left.

Now, the IE bugs and rubbish. IE does not understand position:fixed so it
needs position:absolute - position:absolute does not remain static as the
page scrolls, so you need the ugly expressions. When an element inside a
table is positioned, IE always positions it relative to the table, even
though there is no positioning on the table itself. The position is then
offset by the margin on the body (that is a freaky bug).

At the moment, it will overlap the table in IE, so you need to add a margin
to the body (and remove it from the table), so that the table moves down,
but the positioned row gets incorrectly offset (to the correct position).
The expression used for top could fail for three reasons.

1. you used document.body.scrollTop - in strict mode you must use
document.documentElement.scrollTop

2. you did not use 'px' but you must in strict mode

3. expressions with scrolling offsets do not update (because of a bug)
unless you assign them to a variable - don't ask why, it just works ;)

I have attached an example - it is ugly, but if you want to get any more
complicated, you may have to resort to a completely DHTML-only solution.
Note that this is tailored to specific IE misbehaviours. I have no idea if
it will work in IE 7. It _should_ work using the same stuff as the other
browsers, but no doubt there will be some bug that makes it fail - probably
the table->container bug that it already suffers from here. You will have to
solve that problem when it occurs.


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

> Now for the fun stuff. Unfortunately, because of the government contract
that we are on, the web application MUST run on IE 6, nothing else matters.

While I know that your government behave beyond reason in that reguard, I
live forever in the hopes that they will one day see the light, and change
to something better ;) When that day comes, good code will not need to be
updated, and will make the transition easier. I always code by that
principle.

> I didn't get the attachments/examples that you sent.

Pasted as email content below - hope this gets through ...

> document.getElementById("text").style.setExpression("top", "(myvar =
(document.documentElement.scrollTop + 100)) + 'px'");

This looks like the most appropriate - I would have expected this to work.

> If I give my iframe an id (let's say "scrollwin"), I can't get the
> iframe's document's scrollTop using the following code (fired using a
> button):
>
> document.getElementById("scrollwin").document.documentElement.scrollTop

hrms - I think IE expects you to use something silly like Document instead
of document (upper case "D") - most other browsers use contentDocument. If
all else fails, give it a name instead of an id, and use:
window.frames["scrollwin"].window.document.documentElement.scrollTop

[source code of demo page]

T.J.

> If I were going to do the same to a column, I would think that it would be
> best to work with the <col> or <colgroup> tags instead of each td, however,
> I can't seem to get it to work.

Unfortunately, the col element is slightly weird. It is not like a real
element at all. In good browsers, it is merely a placeholder sitting behind
the column, and it is not attached to the cell elements themselves. In IE
(and safari/konqueror), it cannot even do that correctly. I think your only
choice will be to do one cell at a time.

> Also, I was wondering if it would work on a TBODY since it would seem
> faster to do it on a TBODY than each individual row? Any ideas.

Assuming you want to use several sequential rows at the same time, yes, that
sounds sensible. Whether it will work or not is up to your experimentation,
but in theory it will.