Bali Web Design Studio is a small enthusiast web design studio based in Bali, Jakarta, Indonesia.

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);
}
}

Leave a Reply

bali web design studio Freelance Web Developer Works Bali Web Design Portfolio Get Web Design Quotation RSS Feeds