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
var fluidLayout = {
myFontSize: 100,
getBrowserWidth: function() {
if (document.documentElement && document.documentElement.clientWidth != 0) {
return document.documentElement.clientWidth;
} else if (document.body) {
return document.body.clientWidth;
}
return 0;
},
dynamicLayout: function () {
var defaultFontSize = fluidLayout.myFontSize * 100;
var browserWidth = fluidLayout.getBrowserWidth();
document.body.style.fontSize = (defaultFontSize * browserWidth / 100000) + "%";
},
addEvent: function (obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener( type, fn, false );
} else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
},
init: function(fontSize) {
this.myFontSize = fontSize;
this.addEvent(window, 'load', this.dynamicLayout);
this.addEvent(window, 'resize', this.dynamicLayout);
}
}




