Good Notification Plugin For Jquery?

Question

I am looking at pines notify(http://pines.sourceforge.net/pnotify/) and it looks good but it seems to have little actual documentation so I am wondering is there anything more established and worked on out there?

Like I don't want to spend time trying to figure out how to use pines and then find out it is missing some feature that I needed a few months later that I needed to change to a different plugin.

This happened to me with tablesorter 2.0 I was using it then I needed the filtering but theirs kinda sucked so I found datatables what had such a bigger api and developed more.

So I am wondering if there is something like datatables(in terms of development and features) just for notifications instead.

Edit

So I am looking at jgrowl and kinda confused with how to use the theme roller with it.

So I took once of the example files and stripped it down with everything I thought was junk.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" debug="true">
    <head>
        <title>jGrowl meet Twitter</title>
        <link rel="stylesheet" href="../jquery.jgrowl.css" type="text/css"/>
        <link type="text/css" href="css/le-frog/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
        <script type="text/javascript">
            $(function(){
                $('.ui-state-default').hover(
                    function(){$(this).addClass('ui-state-hover');},
                    function(){$(this).removeClass('ui-state-hover');}
                )
                .mousedown(function(){$(this).addClass('ui-state-active');})
                .mouseup(function(){$(this).removeClass('ui-state-active');})
                .mouseout(function(){$(this).removeClass('ui-state-active');});
            });
        </script>

        <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
        <script type="text/javascript" src="../jquery-1.3.2.js"></script>
        <script type="text/javascript" src="../jquery.jgrowl.js"></script>
        <script type="text/javascript">

            $(document).ready(function(){
                // This value can be true, false or a function to be used as a callback when the closer is clciked
                $.jGrowl.defaults.closer = function() {
                    console.log("Closing everything!", this);
                };

                $.jGrowl("Sticky notification with a header", 
                    { 
                        header: 'A Header', 
                        sticky: true,
                    });
            });

        </script>
    </head>
    <body>
    <div id="trdevtool_contain" class="ui-widget ui-widget-content ui-corner-all">
        <div class="ui-widget-header ui-corner-top">
            <h1>jQuery UI ThemeRoller <span>Developer Tool</span></h1>
        </div>
    </div>

    </body>
</html>

I don't understand what this is for

    <script type="text/javascript">
        $(function(){
            $('.ui-state-default').hover(
                function(){$(this).addClass('ui-state-hover');},
                function(){$(this).removeClass('ui-state-hover');}
            )
            .mousedown(function(){$(this).addClass('ui-state-active');})
            .mouseup(function(){$(this).removeClass('ui-state-active');})
            .mouseout(function(){$(this).removeClass('ui-state-active');});
        });
    </script>

It seems to have nothing to do with applying the themes. I took it away and the theme was still applied. Also if you look at my jgrow

$.jGrowl("Sticky notification with a header", 
    { 
        header: 'A Header', 
        sticky: true,
    });

I make no mention of theme yet it still some how used the theme. Why is it taking the theme?

score 17 · Answer 1 · answered Jul 20 '12 at 17:26

17

I'd like to add my 2cents by linking to my favourite, toastr.

http://codeseven.github.com/toastr/

answered Jul 20 '12 at 17:26

hrdwdmrbl

4,814
2
32
41

I think it took me 5 minutes after reading this answer to download, update my webpage & see the notifications working exactly as I wanted. so +1 in 2016 – Charles L. Jan 07 '16 at 04:12
I used `toastr` but **Two more** to check 1. [pnotify](https://sciactive.com/pnotify/) 2. [Bootstrap Alert using NotifyJs](http://www.jqueryscript.net/other/Creating-Growl-Notifications-with-jQuery-Bootstrap-Notify-js.html) – Shaiju T Apr 05 '17 at 10:19

score 9 · Accepted Answer · edited Sep 03 '14 at 12:52

9

There are bunches of these out there, I'd checkout the jQuery plugins site, specifically the plugins classified under the notification category :)

Here are just a few:

edited Sep 03 '14 at 12:52

webcoder

129
1
10

answered Jun 12 '10 at 18:15

Nick Craver

623,446
136
1,297
1,155

Ya I see a bunch I am trying to figure out which one is the most used and most in development. – chobo2 Jun 12 '10 at 18:18
2

@chobo2 -They all have slightly different styles/flavors, pick which best fits your site and required feature set I'd say (e.g. do you need queuing?), they're all pretty lightweight – Nick Craver Jun 12 '10 at 18:19
[here](http://stackoverflow.com/questions/2983899/does-jquery-have-a-plugin-to-display-a-message-bar-like-the-twitter-wrong-pas) is another answer written by you to **show notfcation messages top of page** – Shaiju T Jun 23 '16 at 13:58

Ken Redler · Answer 3 · 2010-06-12T18:38:26.500

1

Personally I use jGrowl. But here are a few others.

Edit: In response to the comment below, here's the jGrowl site. What does it do better? It's easy to use, and it works well. The others can achieve the same thing, but my experience is the same as Funka's: tried it, it worked, it was easy, done.

edited Jun 12 '10 at 18:38

answered Jun 12 '10 at 18:16

Ken Redler

23,863
8
57
69

Ya I saw that but I can't find there home page. What does it do better? – chobo2 Jun 12 '10 at 18:18
I used jGrowl recently on a project; I didn't have much time to look around and it was the first one I found, but it was so easy to setup and quick to get running that I had no need to look further. – Funka Jun 12 '10 at 18:25
Hmm I am looking at jGrowl but I am wondering(and this might go for all of them). What is the best way to populate them with ajax? Like I am going to be send message from the server and want those to popup in the notification. How best to send it and then how to populate the notifications? – chobo2 Jun 13 '10 at 04:48
Can you also maybe explain how I use the theme roller with this. See my edit. – chobo2 Jun 13 '10 at 05:08
Just call $.jGrowl('your_message') in the success callback of your $.ajax() call. – Ken Redler Jun 13 '10 at 05:26
Hmm. But I mean I am getting a list of stuff back so just a for loop looping around that jGrowl call? – chobo2 Jun 13 '10 at 18:22
Yes, something like that -- assuming you want a separate alert box for each item in that list. – Ken Redler Jun 13 '10 at 20:13

Vicky Chijwani · Answer 4 · 2012-12-13T13:35:17.823

I might be late with this answer, but if anybody comes here looking for a simple, light, minimalist, and unobtrusive notification plugin, I've made an open source jQuery notification plugin that can be integrated seamlessly with web apps, called jNotifyOSD. You can see a demo on that link. I've tried to keep the API clean and dead simple to use. Here's an example:

$.notify_osd.create({
  'text'        : 'Hi!',             // notification message
  'icon'        : 'images/icon.png', // icon path, 48x48
  'sticky'      : false,             // if true, timeout is ignored
  'timeout'     : 6,                 // disappears after 6 seconds
  'dismissable' : true               // can be dismissed manually
});

You can also set global defaults for all future notifications (can be overridden on a per-notification basis):

$.notify_osd.setup({
  'icon'        : 'images/default.png',
  'sticky'      : false,
  'timeout'     : 8
});

It includes a very nice default theme with transparency on hover (meaning that notifications get more and more translucent as the mouse pointer approaches), but the theme can be changed very easily just by putting in a CSS file which specifies styles for some defined classes. I'm working to include more features, so you should keep an eye on the GitHub repository.

UPDATE [13th Dec, 2012]:

It's been some time, but I've finally implemented support for multiple visible notifications using a queue system. So for example:

$.notify_osd.setup({
  // ... config ...
  'visible_max' : 5                  // max 5 notifications visible simultaneously
  'spacing'     : 30                 // spacing between consecutive notifications
});

You can see a demo here. I think the plugin is now flexible enough to handle a good variety of use-cases.

Good Notification Plugin For Jquery?

4 Answers4

Linked