Javascript fluid design, new approach to fluid design

Got this from ajaxian, a cool approach of implementing fluid design using javascript, a small javascript library by Yusuf Akyol. Check out the demo page and resize the browser to see the layout and font size changes. This done by a small CSS and:

HTML

<script type="text/javascript"><!--
fluidLayoutinit(yourFontSize, yourScreenSize);
// yourFontSize is a hundred percent value at yourScreenSize
// yourScreenSize is a pixel value for yourFontSize
// --></script>

Javascript
view sourceprint?
01.var fluidLayout = {
02.myFontSize: 100,
03.getBrowserWidth: function() {
04.if (document.documentElement && document.documentElement.clientWidth != 0) {
05.return document.documentElement.clientWidth;
06.} else if (document.body) {
07.return document.body.clientWidth;
08.}
09.return 0;
10.},
11.dynamicLayout: function () {
12.var defaultFontSize = fluidLayout.myFontSize * 100;
13.var browserWidth = fluidLayout.getBrowserWidth();
14.document.body.style.fontSize = (defaultFontSize * browserWidth / 100000) + "%";
15.},
16.addEvent: function (obj, type, fn) {
17.if (obj.addEventListener) {
18.obj.addEventListener( type, fn, false );
19.} else if (obj.attachEvent) {
20.obj["e"+type+fn] = fn;
21.obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); }
22.obj.attachEvent( "on"+type, obj[type+fn] );
23.}
24.},
25.init: function(fontSize) {
26.this.myFontSize = fontSize;
27.this.addEvent(window, 'load', this.dynamicLayout);
28.this.addEvent(window, 'resize', this.dynamicLayout);
29.}
30.}