Wednesday, April 15th, 2009
FluidLayout; Having fun with ‘em
Category: CSS
Check out the test page and resize the browser to see the layout and font size change before your eyes.
You use the framework via a little 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>
-
The work is done by:
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);
-
}
-
}
-
Related Content:
2.2 rating from 36 votes
It seems to break all usability / accessibilty features of my browser (Firefox 3). Try CTRL + to zoom in (or CTRL – to zoom out) and you’ll see that ‘fluid layout’ breaks the feature.
Hi,
Yes you’re right but it’s not a bug… It’s working like this. When you change font-size my codes rechange it for display whole window.
It would be good if the line-height property was fluid too – or are they static by design?
It’s good idea but I don’t need to do anything. You may set line-height in css.
I changed function calling like this at last version:
fluidLayout.init(yourFontSize);
as a sample:
fluidLayout.init(85); // 85%
What is the point of this?
It is the job of the user to pick the font size that works for their resolution.
Not working on Chrome 2 beta
The image resize part of the library is cool. I would rather let users set their own font size though.
@wilq32 – the demo works for me in Chrome 2.0.169.1
First of all thanks for all remarks.
To Darkimmortal:
Just you set, only once, desired font size for your design. For example if you work 1024 px resolution, developed your site 1024px and set desired font site as a percent value. If a user has 1280px resolution, your site will be displayed at 1280px full window size or if a user use 800px resolution, your site will be displayed at 800 px full window size. If you change window size by draging from corners or change “Display Settings”, site will be displayed at full window without horizontal scroll bar.
To Wilq32:
It works at Chrome 2 too. My solution is for displayed any site at full window as explain above. Normally, when changed font-size with browser menu options, my solution reset it to suitable font-size for display at full window. But this is not working only Chrome 2 Beta and Lunascape 5 Beta. Everything is normal at other browsers.
This is a neat proof of concept, but it’s also a usability nightmare. Please don’t do this to your users.
I guess you have never tried iPhone and Android WebKit based mobile browsers …
I’m a bit late to the party but I just had to comment on this…
Font size changes based on a window size via javascript is a huge no-no as far as I’m concerned. For one, it results in a jarring repositioning of text when the code resizes the font. More importantly, as people pointed out, it breaks usability. If you wish to give people control over font-size through your site (instead of browser controls) then just use the standard “increase/decrease font” buttons.
What’s more, this works against the idea of liquid (or fluid, or flexible, or what have you) layout. The way I see it, liquid layout is about using all the available space to show as much content as possible without scrolling, and while maintaining good, readable design. If you’re gonna increase font size with window you won’t be able to show more content.
Looks like your whole site is using only italics for text.
And lots of mystery meat nav and other bad usability stuff too.