Wednesday, May 13, 2009

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:

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

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;
09.return 0;
11.dynamicLayout: function () {
12.var defaultFontSize = fluidLayout.myFontSize * 100;
13.var browserWidth = fluidLayout.getBrowserWidth(); = (defaultFontSize * browserWidth / 100000) + "%";
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] );
25.init: function(fontSize) {
26.this.myFontSize = fontSize;
27.this.addEvent(window, 'load', this.dynamicLayout);
28.this.addEvent(window, 'resize', this.dynamicLayout);

Embedding(import) your own fonts on the web

Embedding your own fonts on the web

The CSS @font-face rule allows you to specify & upload a font that will be downloaded to the clients machine, so the web page will be rendered exactly as you expected it to be, no matter where!

A huge step forward for typography on the web. Mozilla finally announced that its new Firefox 3.5 (download beta) will support the @font-face CSS rule. Opera is supposed to do the same with the next 10 version. It’s worth to know that this feature is working already on Safari (3.1 +) using webkit. Internet Explorer (4.0+) Supports this too, but with .eot or .ote font file extensions only.

Since May 1998 in the CSS 2 specification, every one was interested in being able to embed your own fonts on any web page using @font-face rule. It would help you make sure that your visitors will see your design just as you created it. however this was not implemented on every browser, so it was later removed from the recommendation is CSS 2.1.

The copyright issues! using this method means that any one can go through your code and download the font you are using. This arises a problem since there are many fonts you are not allowed to re-distribute. There should be a way of encoding font files or otherwise we will have to stick with open source fonts, which can’t be the answer!

On the other way, the use of sIFR (In-line Flash & Javascript text replacement) was the only other reliable way I know around this, It allows you to embed your font on any browser that supports Flash and Javascript. Beside the fact that it prevent stealing, It is easy, reliable, and it validates.

Using @font-face property

@font-face {
font-family: your-font-family-name;
src: url-to-the-font-file;

font-family:'Myriad Pro';
src: url('') format('opentype');
font-family:'Myriad Pro', georgia;

HTML code:
<h2>This is Myriad Pro font Example.</h2>

powered by:

CSS Image Preloader

A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: "". Whenever the images are referenced throughout your pages they will now be loaded from cache.

#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();

powered by:

min-height for IE (and all other browsers)

/* for browsers that don't suck */
.container {
height:auto !important;

/* for Internet Explorer */
* html .container {
height: 8em;

min-height for IE (and all other browsers)

/* for browsers that don't suck */
.container {
height:auto !important;

/* for Internet Explorer */
* html .container {
height: 8em;