My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Friday, February 06, 2009

Another experiment inspired by Google Buttons

I found this post from Ajaxian extremely interesting, and I decided to try to create a better version, if it is possible, of Google Buttons 3.1

The result is not perfect, still alpha, and just for fun, but compatibility seems to be great while multiple buttons visualizations (horizontal or vertical) is extremely simple: write links beside each other, or add a couple of rules for vertical version.



States are hover, active, selected, represented via JavaScript events (onmouseover, onmousedown, onmouseup).
As I said this is just an experiment, but I think as is it is not that bad ... maybeI am wrong :D

6 comments:

Ryan said...

Not bad. And your code is a LOT cleaner than Gmail's buttons. I hate how everything in Gmail is a bunch of divs with huge, non-semantic classnames.

Marchino said...

I tried it and it doesn't work correctly on IE6..

Andrea Giammarchi said...

o ... really?
so maybe you could consider to upgrade your browser :P

Marchino said...

I use Firefox :P
I reported that only for cross-browser compatibility of your method..
And as isie6dead.com says, unfortunately IE6 is not dead (yet :) )

Andrea Giammarchi said...

so in this case you can add this nicely greedy "who care" expression after main css
<!--[if IE 6]><style type="text/css">.btn i{width:expression((this.parentNode.offsetWidth-2)+"px")}</style><![endif]-->

The funny stuff is that with IE5.5 is fine

Marchino said...

Thanks for the tip :)
I didn't try it with 5.5 and yes, it's very funny :D