What would be the best way to replicate the Meebo Bar UI? Before jumping to the conclusion of saying its {position: absolute; bottom: 0; width: 100%; }, I want to bring up the fact that it works on all browsers including IE6. The alpha transparency works, there is no flicker, things are smooth.

They're doing a bunch of rendering via Javascript of which some are UI specific. It, even perhaps, looks up your browser resolution and set the width of the modules. The whole Javascript itself is about 22,000 lines of code.

I'm looking more at just replicating the Visual UI part of it, working from IE6 onwards and on all modern browsers. Help appreciated.

Example of Meebo Bar on http://mashable.com/

3 answers

danwellman 5600

Use firebug to take a look at the elements that make it up, for example, the outer meebo container is actually position:fixed; bottom:0;

There is a lot of different functionality in the meebo bar, including the actions of the different tools. There's also a lot of other unrelated JS on the page too. Most of the JS has been minified/obfuscated so it won't be easy to go through it to see which bits you need; you're probably best of writing your own script to handle the behaviour of the bar. There may even be a plugin for it...

Answered about 8 years ago by danwellman

Well, position: fixed; don't exist in IE6, it will likely be rendered as position:static; the best we can do is a position: absolute;

The best I've found so far is to use the IE expression (not understood and thus ignored by other browsers)

position:absolute; bottom:auto; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); }

However, my query is to find the best possible solution where Javascript is likely the tool to do a dynamic rendering of even the styles according to the browser. And meebo bar have done it flawlessly.

Answered about 8 years ago by Brajeshwar

The first time I saw this look was on Google Friends Connect bar: (example). A look in firebug should give clues.

Answered about 8 years ago by Divya Manian