New Cross-browser Liquidized Layers

[Marlboro]

Well here it is, play with it, cut it up, tear it apart, complain like a pro about its shortcomings or just enjoy. I've decided to post my code for liquidizing DIVs for IE5/IE5.5 and NS6.

This awesome script allows you to reflow and resize layers (divs only!) regardless of where and how the divs are positioned OR WHAT RESOLUTION/WINDOW SIZE THE USER HAS - and the really cool thing - it works!

take a look at http://www.i-81.net/marlboro/autoresize.asp and tear it apart guys (and gals).

Dont ask for support though its hard enuff for me to understand the code and i wrote it! But in nutshell, you need to know the dimensions of the layers you want and how you want them to behave (I did a little extra and demonstrate stopping the resize when the page is less than 530 pixels in width (to force the user to scroll -could come in handy)).

Each div examines either the height and/or width of the div above and/or aside of it for logic, it then dynamically resizes accordingly.

If you use it in your site - please let me know (and be so kind as to reference me as the author)

So visit the page, resize your window and adjust the height and width of your window and watch, is this a peice of work or what.

enjoy

[Dr. Web]

I guess I dont understand what that accomplished that a table structure couldn't have?

[Marlboro]

Well its more correct to use DIVS for layout control - tables are overused as a page structure tool. Tables were not designed to become the layout tool they are today.

One advantage that comes to mind is in the ease of layout. I'm sure you've tried to place two tables side-by-side (on the same horizontal plane) and not have one or the other try and 'slip under' the other. 'Bout the only way to accomplish this is to place those 2 tables in another table (single row 2 column) which increases the rendering time. I know its a simple illustration, but if there is no need other than layout structure or control for tables, its a waste of resources imho.

Tables are for tabluation of data - hence the w3c specs recommend this and want developers to use CSS for positioning not tables.

Now dont get me wrong - the are still instances where nothing but a table will do what you need - but used in moderation and intelligently a better design and better coding is the result.

Break on through to the other side.

ps: My dear Dr - the are VERY few things that cant be done identically for IE and NS via CSS, its just a matter of knowing the limitations and the workarounds.

[Ian]

Just had to go and look at it in NS4 to see what happens. LOL, what a mess :)

[Marlboro]

Originally posted by Ian
Just had to go and look at it in NS4 to see what happens. LOL, what a mess :)

Yep! a true mess to say the least.

I 'almost' had it working in NS4.x but I changed something that broke it and I cant recall what I did to make it work LOL.

I think it has something to do with presetting the Div dimension vars to a interger before calc'ing the layout and then resizing based on the rendered content...

but as you can see, the code gets more complex with more the offsets and divs there are. I'm working on simplifing this somewhat, but my knowledge of arrays and JS is somewhat limited in this respect.

but on the bright side i never said it worked in ns4.x



[Edited by Marlboro on 03-16-2001 at 07:33 AM]

[Dr. Web]

Just had to go and look at it in NS4 to see what happens. LOL, what a mess :)


I 'almost' had it working in NS4.x but I changed something that broke it and I cant recall what I did to make it work.


Almost had it working. rrrrrrrrrrrright. Tables are easy to use, backward...forward, and sideways compatible. And you were talking about render time for tables? Uhm......OK. If that were a problem, and its not, I am sure that this forum would have seen its share of...."Why do my web pages render slowly when I use tables for layout?"

The w3c specs recommend this (CSS positioning) and want developers to use CSS for positioning not tables.

Tell you what I have learned since I started developing:
Keep it simple.
Don't fix it if it isn't broken.

[Marlboro]

Originally posted by Dr. Web
<snip>
Uhm......OK. If that were a problem, and its not, I am sure that this forum would have seen its share of...."Why do my web pages render slowly when I use tables for layout?"
<snip>


Well, if you dont have something to compare it to - then how can one tell if something is slow? I've worked on intranets where every second (or less!) of rendering time is crucial (service level agreements) and did a lot of performance testing for various browsers - and it is becoming more evident nowadays. There are several good articles out there from major reference sites (webreference, sitebuilder etc) that are currently making statements like "stop using lots of tables, they're slowing you down". I've known this for years - but until you actually compare the difference is really apparent. And no, there won't be much difference in render speed if the page only uses a few tables - we're talking you'll need multiple nested undefined tables to see a major increase in performance when converted to CSS.

Fear not though- there are ways to improve the speed of tabled pages and if you look at http://www.webreference.com/authoring/languages/html/optimize/4.html you'll see some interesting information (i learned from it).

But on the other hand - our debate is almost moot point, with broadband and 1Ghz machines whats 1/2 sec diff in rendering time?

Your serve - ;-)

[Dr. Web]

Nested tables. Didn't I tell you what I learned.......

Keep it simple.
Don't fix it if it isn't broken.

Nested tables defeat the whole "keep it simple" theme. I guess I could have said that the less moving parts you have, the less your invention will break. OK. Tables. easy to use. Backward, forward, sideways compatible. Chant it with me.

As for tables rendering slow......if you specify your height/ widths.....shouldn't have a problem.

I am sure the guy who puts 12 nested tables (with the help of frontpage) will have a slow downloading site. He probably also used Imageready to slice up 50 pictures for the illustrations too. Nested tables are a problem, not a solution. And until CSS gets figured out so that layout is simple, do it once, works with all browsers..old and new...its not going to catch on.



[Edited by Dr. Web on 03-19-2001 at 01:42 PM]