Sexy non-intrusive Message/Notification box...

[jasondeegan]

I have searched for the best notification box to alert users to success / failure / new email / messages / etc that disappears without user interaction, but I can only come up with this one which is pretty common in extjs (below). Does anyone have a better box - I have problems with knowing how to get this one to show up in the bottom right, instead of the top; it's not always "on top" of everything else; sometimes it moves the whole web page, but if I do a postion:absolute it loses it's animation; the one from the QwikiDesktop app is solid, but I'm not smart enough to figure out how to "strip" it.

Thanks!

Deegan

This is the best one I've come up with (from ext.messagebox):

var msgCt;

    function createBox(t, s){
        return ['<div class="msg" style="position:absolute;z-index:99;">',
                '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
                '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>',
                '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
                '</div>'].join('');
    }
    return {
        msg : function(title, format){
            if(!msgCt){
                msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
            }
            msgCt.alignTo(document, 't-t');
            var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
            var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
            m.slideIn('t').pause(1).ghost("t", {remove:true});
        },

    };

[chalu]

Have you taken a look at this

[jasondeegan]

But as indicated in that thread, it's not "clean" when it scrolls up in FF. Curious. It's pretty much exactly what I'd want to have if it didn't "stutter" while scrolling.

[jasondeegan]

I could be happy with the default messagebox if I could just figure out how to make it on TOP of everything else (z-index). I've tried monkeying with the outer DIV adding position:absolute and z-index:99, but that removes my FX.

Anybody have any ideas?

JD

[jasondeegan]

Having done more research, this is what I'm looking for:

Ext.ux.Notification

I've tried some forum and website searches but can't seem to find this. Any ideas?!?

[jasondeegan]

Chalu was right on the money! It just took me several more hours of research to come around to realizing it. (At least I learned something)

Thanks.

J