Being notified as the page downloads

[David Given]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Say I have a piece of Javascript that transforms the HTML on a page. (In
order to work around CSS bugs.)

I could invoke this from the BODY onload event handler. However, this means
that for a large page on a slow link, the user's going to have to sit and
watch the untransformed page come in --- and then once it's finished,
there'll be a pause, and then the page will change to the transformed
version. This is suboptimal.

What I'd like to do is to run the transformer on each chunk of HTML as it
arrives from the server. Naturally, I'd only be able to do this for
complete DOM nodes.

The obvious approach is to:

(a) set a timer that runs every 500ms
(b) keep track of how far we've got
(c) when the timer fires, look to see if any new nodes have arrived,
process them, and return

This is a bit fiddly, and will also fail if the browser places complete
nodes in the DOM tree (and I don't know if any do).

An alternate approach would be to put an onLoad handler on every HTML
element that needs transforming, but this requires a lot of work by the
author of the page (which I'd like to avoid).

Does anyone have any suggestions?

- --
+- David Given --McQ-+
| [e-mail] | Become immortal or die!
| ([e-mail]) |
+- www.cowlark.com --+
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.2 (GNU/Linux)

iD8DBQFDXjjmf9E0noFvlzgRAr8AAJ4rs60djRuldMw0D0NYcy JXZKE36ACgg5up
fPv2rI5f3MZtAfMNLAeZLTk=
=0moV
-----END PGP SIGNATURE-----

[Lee]

David Given said:

Say I have a piece of Javascript that transforms the HTML on a page. (In
order to work around CSS bugs.)

That's an awful lot of work on the client side to do what would
be simple on the server side. Use the right tool for the job.

[David Given]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

In article <dj*********@drn.newsguy.com>,
Lee <RE**************@cox.net> writes:

David Given said:

Say I have a piece of Javascript that transforms the HTML on a page. (In
order to work around CSS bugs.)

That's an awful lot of work on the client side to do what would
be simple on the server side. Use the right tool for the job.

Yes, I love you too.

I need to transform the HTML because (a) only the client knows how to do it
(because how I'm transforming it depends on the client state --- for
example, the browser window width), and (b) why should I use my server's
precious CPU cycles when the client's got lots to spare?

- --
+- David Given --McQ-+ "I concluded from the beginning that this would be
| [e-mail] | the end; and I am right, for it is not half over
| ([e-mail]) | yet." --- Sir Boyle Roche
+- www.cowlark.com --+
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.2 (GNU/Linux)

iD8DBQFDXmWdf9E0noFvlzgRArlEAKCFjofWviF7T82A8E42bQ +qsO1uXACgk96N
QU0jtG7VGaPdjFV7su2G2ik=
=ztYq
-----END PGP SIGNATURE-----

[Lee]

David Given said:

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

In article <dj*********@drn.newsguy.com>,
Lee <RE**************@cox.net> writes:

David Given said:

Say I have a piece of Javascript that transforms the HTML on a page. (In
order to work around CSS bugs.)

That's an awful lot of work on the client side to do what would
be simple on the server side. Use the right tool for the job.

Yes, I love you too.

I need to transform the HTML because (a) only the client knows how to do it
(because how I'm transforming it depends on the client state --- for
example, the browser window width), and (b) why should I use my server's
precious CPU cycles when the client's got lots to spare?

You can easily query the client's browser to find out all that you
need to know, then send the customized page. The reasons for doing
it on the server instead of on the client should be obvious.
If not, you're in way over your head.

[David Given]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

In article <dj*********@drn.newsguy.com>,
Lee <RE**************@cox.net> writes:
[...]

You can easily query the client's browser to find out all that you
need to know, then send the customized page. The reasons for doing
it on the server instead of on the client should be obvious.
If not, you're in way over your head.

As far as I can tell, the reasons for doing it on the server are that it
would (a) increase my server load; (b) increase my server setup complexity,
because it requires dynamic HTML generation; (c) increase my bandwidth
load, because, again, it requires uncacheable dynamic load generation; and
(d) make the whole setup more fragile, because it requires multiple
back-and-forths to the client in order to handshake before I can even start
to serve pages. Wait --- how are these valid reasons, again?

By doing the transformation on the *client*, it means that my server setup
can be a simple, robust, efficient, cacheable static page delivery system.
And also, doing the transformation on the client is the right place to
solve this particular problem --- I want to work around markup issues that
CSS isn't sophisticated enough to solve.

- --
+- David Given --McQ-+ "I concluded from the beginning that this would be
| [e-mail] | the end; and I am right, for it is not half over
| ([e-mail]) | yet." --- Sir Boyle Roche
+- www.cowlark.com --+
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.2 (GNU/Linux)

iD8DBQFDX1BLf9E0noFvlzgRAiCXAKC3+9w/0SmlI620dNCuTHVjiJ4VtACcCLDg
Y+B78rgxYq154B++g2YLBPs=
=410u
-----END PGP SIGNATURE-----

[Lee]

David Given said:

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

In article <dj*********@drn.newsguy.com>,
Lee <RE**************@cox.net> writes:
[...]

You can easily query the client's browser to find out all that you
need to know, then send the customized page. The reasons for doing
it on the server instead of on the client should be obvious.
If not, you're in way over your head.

As far as I can tell, the reasons for doing it on the server are that it
would (a) increase my server load; (b) increase my server setup complexity,
because it requires dynamic HTML generation; (c) increase my bandwidth
load, because, again, it requires uncacheable dynamic load generation; and
(d) make the whole setup more fragile, because it requires multiple
back-and-forths to the client in order to handshake before I can even start
to serve pages. Wait --- how are these valid reasons, again?

Lousy.

Have you forgotten that you haven't even been able to figure out a way
to do this on the client side? You're thinking about increasing the
complexity of your system by a large factor to even try to perform this
work on the client. Most production web sites are at least partially
generated. It's a model that works.

I haven't even mentioned that a well designed page should be independent
of the user's display size, etc. Then there's the fact that by making
your page rendering depend on the visitor's run-time environment, you're
staking your results on a completely unknown quantity as opposed to a
server that you can control and test thoroughly. It's a fairly basic
principle that you should do as much of the processing as possible on
the server.

[David Given]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

In article <dj*********@drn.newsguy.com>,
Lee <RE**************@cox.net> writes:
[...]

Have you forgotten that you haven't even been able to figure out a way
to do this on the client side?
I *do* have a way of doing it. I want to know if there's a *better* way of
doing it.

[...] I haven't even mentioned that a well designed page should be independent
of the user's display size, etc.

See my earlier comment on wanting to do markup that CSS can't handle. Given
that what I need to do depends on bits of client state that may change at
any moment, doing the transformation on the server would require me to
redownload the page every time the user's browser window resizes --- not
acceptable.

I do have valid reasons for dong this, and I'm really not interested in
arguing about it.

- --
+- David Given --McQ-+ "I concluded from the beginning that this would be
| [e-mail] | the end; and I am right, for it is not half over
| ([e-mail]) | yet." --- Sir Boyle Roche
+- www.cowlark.com --+
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.2 (GNU/Linux)

iD8DBQFDX6axf9E0noFvlzgRArXxAJ9pukfMlRi2ZWSDq9zHMm 3egYPDwgCfQF39
iyuBnn8lHrhBa5F4tKBUvW4=
=dZSS
-----END PGP SIGNATURE-----

[Jeff North]

On Wed, 26 Oct 2005 15:55:13 GMT, in comp.lang.javascript
[e-mail] (David Given) wrote:

| -----BEGIN PGP SIGNED MESSAGE-----
| Hash: SHA1
|
| In article <dj*********@drn.newsguy.com>,
| Lee <RE**************@cox.net> writes:
| [...]
| > Have you forgotten that you haven't even been able to figure out a way
| > to do this on the client side?
|
| I *do* have a way of doing it. I want to know if there's a *better* way of
| doing it.
|
| [...]
| > I haven't even mentioned that a well designed page should be independent
| > of the user's display size, etc.
|
| See my earlier comment on wanting to do markup that CSS can't handle. Given
| that what I need to do depends on bits of client state that may change at
| any moment, doing the transformation on the server would require me to
| redownload the page every time the user's browser window resizes --- not
| acceptable.
|
| I do have valid reasons for dong this, and I'm really not interested in
| arguing about it.

David, you haven't given anyone an example of what you are trying to
achieve. Maybe post a url with images of what is happening and what
you want to happen.
---------------------------------------------------------------
jn******@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------

[Joshie Surber]

> I want to know if there's a *better* way of doing it.

Use CSS hacks instead of JavaScript to control you presentation. Easier
to use and more better symantics to boot. A good list of CSS hacks is
available at http://centricle.com/ref/css/filters/

[David Given]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

In article <vi********************************@4ax.com>,
Jeff North <jn******@yahoo.com.au> writes:
[...]

David, you haven't given anyone an example of what you are trying to
achieve. Maybe post a url with images of what is happening and what
you want to happen.

I don't have anything specific in mind; I'm really just thinking about the
technology.

One possible application is to fix some of the holes in a table layout. For
example, say I want a three-column layout where the first column is 100px
wide, the second column occupies 75% of what's left, and the third column
occupies the rest of the space but may be no narrower than any of its
fixed-size children.

I'm not a CSS expert, but I don't believe this kind of thing is at all
possible using stock CSS --- you can only use fixed values in CSS; you
can't say anything like 'element X should be narrower than element Y but
wider than element Z'. But this kind of thing is trivial for a chunk of
Javascript; it just needs to examine the size of the screen and the size of
the various interesting elements, do some simple arithmetic, and set it.

- --
+- David Given --McQ-+ "I concluded from the beginning that this would be
| [e-mail] | the end; and I am right, for it is not half over
| ([e-mail]) | yet." --- Sir Boyle Roche
+- www.cowlark.com --+
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.2 (GNU/Linux)

iD8DBQFDYlSlf9E0noFvlzgRAoVrAJ9/RblwPjNki2Ny46jsDwfKNarv8ACfc3Er
C8VisXjeEO6XYYB8ZUzkv4U=
=kpbI
-----END PGP SIGNATURE-----

[Jeff North]

On Fri, 28 Oct 2005 16:38:19 GMT, in comp.lang.javascript
[e-mail] (David Given) wrote:

| -----BEGIN PGP SIGNED MESSAGE-----
| Hash: SHA1
|
| In article <vi********************************@4ax.com>,
| Jeff North <jn******@yahoo.com.au> writes:
| [...]
| > David, you haven't given anyone an example of what you are trying to
| > achieve. Maybe post a url with images of what is happening and what
| > you want to happen.
|
| I don't have anything specific in mind; I'm really just thinking about the
| technology.
|
| One possible application is to fix some of the holes in a table layout.
Don't use tables, in this instance, as they'll cause you nothing but
grief. The table layout engine is a law unto itself. Any table width
definitions are only a guideline for the layout engine and nothing
more.
| For example, say I want a three-column layout where the first column is 100px
| wide, the second column occupies 75% of what's left, and the third column
| occupies the rest of the space but may be no narrower than any of its
| fixed-size children.
What you are describing here is 3 column liquid/fluid layout. This
topic is discussed almost daily in the
comp.infosystems.www.authoring.stylesheets (ciwas) newsgroup
| I'm not a CSS expert, but I don't believe this kind of thing is at all
| possible using stock CSS --- you can only use fixed values in CSS; you
| can't say anything like 'element X should be narrower than element Y but
| wider than element Z'. But this kind of thing is trivial for a chunk of
| Javascript; it just needs to examine the size of the screen and the size of
| the various interesting elements, do some simple arithmetic, and set it.

While you are correct about the calculations but you can set an onLoad
function to readjust the page once it has finished loading.

Have a look at the following. I've added colour borders just to
highlight the different areas.

It's the 3rd column that is going to cause you problems because of its
width and location (it will move under column 2 if the screen isn't
wide enough).

If you want to pursue the CSS path you might want to ask this question
in the ciwas newsgroup.

---------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>3 Column Layout</title>
<style type="text/css">
/* make level playing field for all browswers */
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}

/* set container for whole page */
#Container{
border-bottom: 5px solid #DDDDDD;
border-left: 5px solid #DDDDDD;
border-right: 5px solid #DDDDDD;
border-top: 5px solid #DDDDDD;
float: left;
width: 99%;
margin: 0;
padding: 0;
}

/* first column definition */
#Column1 {
float: left;
width: 100px;
border: 2px solid red;
margin: 0;
padding: 0;
}

/* 2nd column definition */
#Column2 {
float: left;
width: 75%;
border: 2px solid lime;
margin: 0;
padding: 0, 6px, 0 6px;
}

/* 3rd column definition */
#Column3 {
float: left;
border: 2px solid blue;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="Container">
<div id="Column1">Column1 Column1 Column1 Column1 Column1 Column1
Column1 </div>
<div id="Column2">Column2 Column2 Column2 Column2 Column2 Column2
Column2 </div>
<div id="Column3">Column3 Column3 Column3 Column3 Column3 Column3
Column3 </div>
</div>
</body>
</html>
---------------------------------------------------------------------
---------------------------------------------------------------
jn******@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------

[David Given]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

In article <ip********************************@4ax.com>,
Jeff North <jn******@yahoo.com.au> writes:
[...]

While you are correct about the calculations but you can set an onLoad
function to readjust the page once it has finished loading.
Yes. I know this.

The problem with adjusting the page once the page has finished loading is
that the page is *only* adjusted once the page has finished loading, which
on a slow connection looks bad.

Given that, ideally, I need to recalculate the layout whenever any of the
state that controls the layout changes --- browser window resize, font
change, etc --- it would make sense to also recalculate the layout whenever
more data arrives from the server; I'm trying to determine if this is
possible.

[...] If you want to pursue the CSS path you might want to ask this question
in the ciwas newsgroup.

No, I don't. It was just an example... here's a better one: I want to have
a column layout where the number of columns depends on the width available.
In other words, the columns have a fixed width, and I want to fit in as
many columns as the browser window has space for. This is much the same
behaviour as Windows Explorer windows.

But note that I don't want to solve this *particular* problem. I want to
solve the *class* of problems that this is an instance of; having to do
programmatic layout.

- --
+- David Given --McQ-+ "Quantum materiae materietur marmota monax si
| [e-mail] | marmota monax meteriam possit materiari?" --- Henry
| ([e-mail]) | Beard
+- www.cowlark.com --+
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.2 (GNU/Linux)

iD8DBQFDZg1Jf9E0noFvlzgRAjDSAJ9rG84yaP30Qdcwck4MYI hKY75/mgCgsdGc
xrkyH/68EttgHqFmLkdaCas=
=bJVk
-----END PGP SIGNATURE-----