 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / JavaScript / October 2005Being notified as the page downloads
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-+ | dg@cowlark.com | Become immortal or die! | (dg@tao-group.com) | +- www.cowlark.com --+ 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 said: > [quoted text clipped - 3 lines] > 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 | dg@cowlark.com | the end; and I am right, for it is not half over | (dg@tao-group.com) | yet." --- Sir Boyle Roche +- www.cowlark.com --+ David Given said: >-----BEGIN PGP SIGNED MESSAGE----- >Hash: SHA1 [quoted text clipped - 13 lines] >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. [...] > 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 | dg@cowlark.com | the end; and I am right, for it is not half over | (dg@tao-group.com) | yet." --- Sir Boyle Roche +- www.cowlark.com --+ David Given said: >-----BEGIN PGP SIGNED MESSAGE----- >Hash: SHA1 [quoted text clipped - 12 lines] >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. [...] > 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 | dg@cowlark.com | the end; and I am right, for it is not half over | (dg@tao-group.com) | yet." --- Sir Boyle Roche +- www.cowlark.com --+ >| -----BEGIN PGP SIGNED MESSAGE----- >| Hash: SHA1 [quoted text clipped - 20 lines] >| 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. --------------------------------------------------------------- jnorthau@yourpantsyahoo.com.au : Remove your pants to reply --------------------------------------------------------------- [...] > 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 | dg@cowlark.com | the end; and I am right, for it is not half over | (dg@tao-group.com) | yet." --- Sir Boyle Roche +- www.cowlark.com --+ >| -----BEGIN PGP SIGNED MESSAGE----- >| Hash: SHA1 [quoted text clipped - 10 lines] >| >| 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> --------------------------------------------------------------------- --------------------------------------------------------------- jnorthau@yourpantsyahoo.com.au : Remove your pants to reply --------------------------------------------------------------- [...] > 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 | dg@cowlark.com | marmota monax meteriam possit materiari?" --- Henry | (dg@tao-group.com) | Beard +- www.cowlark.com --+ > 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/ |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.