cross browser alternative to Webkit /Html Notification

Question

What are cross browser alternative to Webkit /Html Notification preferably in jquery/css. I basically want something that can popup from the bottom right of the page like the webkit notification

From the bottom right of the page or from the bottom right of the desktop? And you're actually talking about HTML 5 notifications, like described in [this question](http://stackoverflow.com/q/3003857/258127)? — Marcel Korpel, Jun 03 '11 at 18:06
i mean bottom right of the page/browser. I dont think so second one is possible — aWebDeveloper, Jun 03 '11 at 18:16

score 1 · Accepted Answer · answered Jun 03 '11 at 18:38

1

Here is a little demo that may give you some ideas...

Demo: http://jsfiddle.net/wdm954/XEHZw/

Basically I'm using a fixed position div to create a small box that slides into view on the page triggered by some event (on click in this example).

answered Jun 03 '11 at 18:38

wdm

7,121
1
27
29

the problem with "growl-like" solutions is that they only show inside the page when the real usefulness is in having the browser in a second plane while the user is using another (probably desktop) tool and have the non intrusive notification – Sebastian Sastre Jun 26 '12 at 21:10

tester · Answer 2 · 2011-06-03T19:06:57.050

function notify(msg, delay) {
    var box = document.createElement('DIV');
    box.id = 'notification';
    // you should just style #notification in css, but w/e
    box.style.position = 'fixed';
    box.style.bottom = '10px';
    box.style.right = '10px';
    box.style.width = '200px';

    box.innerHTML = msg;
    document.body.appendChild(box);
    setTimeout(function() {
        box.parentNode.removeChild(box);
    }, delay);
}

use it like:

notify('sup dude', 1000);

Edit: Jquery Version:

function notifyJquery(msg, delay) {
    $("body").append('<div id="notification" />').css({
        'display': 'none',
        'position': 'fixed',
        'bottom': '10px',
        'right': '10px'
    }).text(msg).fadeIn(400).delay(delay).fadeOut(400);
}

notifyJquery('sup dude', 1000);

cross browser alternative to Webkit /Html Notification

2 Answers2