Prev: Cujo 1.4 review
Next: Obfuscated code
From: Sean Kinsey on 6 May 2010 11:10
On May 6, 5:04 pm, Scott Sauyet <scott.sau...(a)gmail.com> wrote:
> 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?

Set the height using css (hint 100%) and make sure that the parent
containers do the same.
No need to involve js at any step here.
From: Richard Cornford on 6 May 2010 11:13
On May 6, 3:41 pm, Scott Sauyet wrote:
<snip>
> 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.
<snip>

Although styles applied directly to an element have the highest
specificity, and so override nearly everything else, you could
try using CSS's - !important - rule modifier in the print style
sheet. That has worked for me in similar situations.

Richard.
From: Thomas 'PointedEars' Lahn on 6 May 2010 11:24
Scott Sauyet wrote:

> Does anyone have experience with adding and removing a large number of
> style elements?

Mu.

> [...]
> 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.

ISTM you can lose the wrapper-DIV, see <http://PointedEars.de/es-matrix>.
Of course, the headers will not be fixed where a scrollable TBODY is not
supported either way; unless you use two tables, one for the headers and
one for the data, which would not be semantic. As a workaround, you can
repeat the headers when the TBODY is not scrollable; that is what I do.

> 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.

That does not sound like an idea being thought through.

> 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.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Do not do that, then.

> 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.

You do not need to do this.

> I know the techniques to do this, but I'm wondering if this
> is asking for trouble.

An interface to do that (implemented as document.styleSheets) already
exists, so ...


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
From: Scott Sauyet on 6 May 2010 11:39
Sean Kinsey wrote:
> 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?
>
> Set the height using css (hint 100%) and make sure that the parent
> containers do the same.
> No need to involve js at any step here.

I tried that several times with no success. Perhaps I'm simply doing
it wrong. There is some fixed-pixel height chrome above the table
(logos, etc) and that seemed to stop this technique from working.
I'll try again, though, as this seems to be the simplest possibility,
outside Richard's suggestion.

-- Scott
From: Scott Sauyet on 6 May 2010 11:40
Richard Cornford wrote:
> On May 6, 3:41 pm, Scott Sauyet wrote:
> <snip>> 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.
>
> Although styles applied directly to an element have the highest
> specificity, and so override nearly everything else, you could
> try using CSS's - !important - rule modifier in the print style
> sheet. That has worked for me in similar situations.

I'm wondering if I simply didn't do this to everything that needed to
be done. I did try this, as that was the first thing to come to
mind. I'll go back and check it again.

Thanks,

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