From: Scott Sauyet on
Does anyone have experience with adding and removing a large number of
style elements? I'm considering that as a solution to a thorny little
problem and was curious to hear of successes or failures along those
lines. Basically I'm thinking about adding and removing a style
element that assigns the height of a single element on resize.
(Perhaps I can just change its text?)

I'd also love to hear of other solutions to my conundrum, so here's
the problem:

For a small intranet app (no more than a few dozen users, targeting
Firefox, but would like to have it work in IE7/8 as well) that I'm
starting to modify, one requirement is that the main tables that are
the only substantial content on several pages need to keep the headers
visible when the user scrolls. I've done this several times with no
issues by wrapping the table in some fixed-height div with overflow
hidden and then making the TBODY have overflow-x hidden, overflow-y
auto, and with a height somewhat smaller than the wrapper div. Since
this is the only substantive content on the page, I also run a script
on re-size to adjust the height of the TBODY and the wrapper DIV.
There are several other tweaks to the CSS for the table, but nothing
particularly difficult.

The problem is that they also print this page frequently. With the
fixed heights assigned to the elements' styles, the printed version is
cut short at that height. It's easy enough in the print stylesheet to
override the relevant heights when they are assigned via a general
stylesheet, but not when the element itself has a height assigned.

So what I'm thinking of doing on re-size is to simply replace or
overwrite a STYLE element that determines the heights of those
elements. I know the techniques to do this, but I'm wondering if this
is asking for trouble. I will do some sort of debouncing to prevent
it from happening on every pixel of reusize, of course, but it's still
going to happen fairly frequently.

Of course I have considered other solutions, and perhaps I will end up
with one of those. I could use two separate tables with the same
column definitions and make the headers position:fixed. Or I could
add a "Print" button that displayed an alternate version of my table.
I've never liked the first one, but it may be my best bet. If I do
it, though, the headers will not appear on every page of the printed
output -- uggh! The second one is probably my last fallback as the
users are used to just printing from the browser's controls and would
not want the change.

So, does anyone have advice about changing stylesheets as frequently
as proposed?

Or do you have other good suggestions about how to get a page where
the table headers don't scroll away but the whole page prints easily?

Thanks,

--
Scott
From: Scott Sauyet on
On May 6, 10:41 am, Scott Sauyet <scott.sau...(a)gmail.com> wrote:

> For a small intranet app (no more than a few dozen users, targeting
> Firefox, but would like to have it work in IE7/8 as well) that I'm
> starting to modify, one requirement is that the main tables that are
> the only substantial content on several pages need to keep the headers
> visible when the user scrolls.

Okay, if I bring that sentence in for a fitting, perhaps it can be
shortened by Wednesday? :-)

More simply:

I'm taking over the maintenance and enhancements of a small intranet
application. It has fewer than 50 users, all of whom usually use
Firefox for it. I would prefer that it also works in IE7/8, though.
Several pages have no significant content beyond a single large
table. On those pages, the users would like to have the headers
visible as they scroll the page. But they also want the standard
repeating header behavior when the page is printed.

Okay, it's actually lengthened, but maybe those sentences aren't quite
as dense!

-- Scott
From: Sean Kinsey on
On May 6, 4:48 pm, Scott Sauyet <scott.sau...(a)gmail.com> wrote:
> On May 6, 10:41 am, Scott Sauyet <scott.sau...(a)gmail.com> wrote:
>
> > For a small intranet app (no more than a few dozen users, targeting
> > Firefox, but would like to have it work in IE7/8 as well) that I'm
> > starting to modify, one requirement is that the main tables that are
> > the only substantial content on several pages need to keep the headers
> > visible when the user scrolls.
>
> Okay, if I bring that sentence in for a fitting, perhaps it can be
> shortened by Wednesday?  :-)
>
> More simply:
>
> I'm taking over the maintenance and enhancements of a small intranet
> application.   It has fewer than 50 users, all of whom usually use
> Firefox for it.  I would prefer that it also works in IE7/8, though.
> Several pages have no significant content beyond a single large
> table.  On those pages, the users would like to have the headers
> visible as they scroll the page.  But they also want the standard
> repeating header behavior when the page is printed.
>
> Okay, it's actually lengthened, but maybe those sentences aren't quite
> as dense!
>
>   -- Scott

Short answer, use CSS instead of javascript(or ECMAScript for those of
you who don't know the word) for resizing the table.
From: Scott Sauyet on
On May 6, 10:59 am, Sean Kinsey <okin...(a)gmail.com> wrote:
> Short answer, use CSS instead of javascript(or ECMAScript for those of
> you who don't know the word) for resizing the table.

In a sense, that's what I'm thinking of doing, in a round-about way.
Do you have a simpler method than of replacing a style sheet on re-
size?

--
Scott
From: Scott Sauyet on
Scott Sauyet wrote:
> Sean Kinsey wrote:
>
>> Short answer, use CSS instead of javascript(or ECMAScript for those of
>> you who don't know the word) for resizing the table.
>
> In a sense, that's what I'm thinking of doing, in a round-about way.
> Do you have a simpler method than of replacing a style sheet on re-
> size?

I can't, for instance, set the size of the table wrapper to a percent
of the page height, as there is some fixed-size chrome at the top of
the page. I wish I could; as that might make all the problems go
away.

--
Scott
 |  Next  |  Last
Pages: 1 2 3 4 5 6
Prev: Cujo 1.4 review
Next: Obfuscated code