HedgerWow

Some folks wrote to me and asked me why I seemed stop posting new stuffs recently.
My short answer is that I had been developing JAVA applications for months and not really had much to continue my JS/CSS/HTML exploration.

The web is evolving, and I am always interested in “fixing” it.

BTW, I will attend the Designer and Developer Summit in Beijing, China in April 26, 2008 as one of the speaker, which I guess it’s a good time for me to show some fun stuffs to broader audience.
Hedger.

1.download IE8 http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/Install.htm

2.test this page with IE8
http://www.hedgerwow.com/360/bugs/ie8.beta.layout.bug.html

I tried to do something across browsers like this :

const FOO = ‘bar’;

(function(){

alert( ‘before >> ‘ + FOO  ); //expected -> bar
FOO = ‘Opera 9.5 sucks’;
alert( ‘after >> ‘ +FOO  ); //expected -> bar, but Opera 9.5 will fail me.

})();

It seems that declaring a constant in IE is a lot easier than other browsers for me.

http://www.hedgerwow.com/360/dhtml/js_constant.html

FBJS really did the right simple thing to put JavaScript into sandbox, and here’s my raw prototype:

http://www.hedgerwow.com/360/dhtml/fbjs/demo.php

I did this for my co-worker, though it’s a rarely used function.

http://www.hedgerwow.com/360/dhtml/dom-ie7-zoom-detector.html

Let’s fix this and see no more  [BUTTON] tags , [input type=image /] or dirty CSS /HTML / JS for this simple lovely button.
http://www.hedgerwow.com/360/dhtml/ui-css-input-replacement/demo.php

BTW, what’s the difference between Link and Button?
( one of my interview question for interaction designer)

Are we really ready for this?
http://www.hedgerwow.com/360/dhtml/css-layout-multiple-view/demo.php

one of my co-workers asked the way to deploy grid-like layout for list-item with nice alignment and visual treatment.
Apparently a more flexible design and layout will make this better and old school CSS solution such as “float:left” won’thelp in the case.

I had a very simple prototype on :
http://www.hedgerwow.com/360/dhtml/css-inline-block-layout.php

you may try to adjust the font-size, window-size and see how this fluid layout adjust to your best-view-size and still keeps the UI looks nice and aligned well.

BTW, in case you may not notice the very inconvenient truth. Some might think that block Element s such as DIV does not get display:inline-block on Internet Explorer. This may not be true.

Here’s how do I implement display:inline-block across browsers:
‹style›
div{

width:100px;
height:100px;
background:red;
margin:1px;

display:-moz-inline-stack;/*Firefox need this to simulate display:inline-block*/
display:inline-block; /*IE does not apply this to Block Element, and Firefox does not render this, too*/
_overflow:hidden;/*fix IE6 to expanded content*/
zoom:1;/*trigger hasLayout*/
*display:inline;/*once hasLayout is true, set display:inline to block element will make display:inline behave like display:inline-block*/
}

‹/style›

‹div›1‹/div›
‹div›2‹/div›

One of the layout which designers love most and developers hate most is something looks like this:
http://www.hedgerwow.com/360/dhtml/css-layout-gridview.html

No time for documentation, just keep it simple for future usage.

It’s better than checking window.XmlHttpRequest
( and I thought I should have finished this article in two lines instead of explaining it)

http://www.hedgerwow.com/360/dhtml/dom-detect-ie7.html