Simple Javascript Growl clone

Small, short code snippets that other people may find useful. Do you have a good regex that you would like to share? Share it! Even better, the code can be commented on, and improved.

Moderator: General Moderators

Simple Javascript Growl clone

Postby pickle » Wed Oct 13, 2010 5:13 pm

What is Growl

Wrote this for an app I'm building that needed a simple, non-intrusive feedback to the user when an AJAX event finished. I've found it incredibly useful so I thought I'd share. It does require jQuery 1.4+

Basic usage:
Syntax: [ Download ] [ Hide ]
Notify.show('This is the message the user will see');


By default, each notification is displayed for 2000 milliseconds, and the hiding animation takes 750 milliseconds. That can be changed just like changing any other Javascript object variable:
Syntax: [ Download ] [ Hide ]
Notify.displayFor = 1000;
Notify.animationDuration:100;
though, if you're changing those numbers globally, you might as well just edit the object code directly.

Usable example: Copy this to a local HTML file & open it
Syntax: [ Download ] [ Hide ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>
            Notify example
        </title>
        <style type = "text/css">
            #notify-wrapper{
                position:fixed;
                right:0;
                top:0;
                width:200px;
                padding:5px;
            }
                #notify-wrapper .notification{
                    -moz-border-radius:5px;
                    -webkit-border-radius:5px;
                    border-radius:5px;
                    background-color:#000;
                    background-color:rgba(0,0,0,0.7);
                    color:#FFF;
                    padding:5px;
                    cursor:pointer;
                    margin-bottom:5px;
                }
        </style>
    </head>
    <body>
        <div>
            Type something, then "Enter" <input type = "text" id = "textfield" />
        </div>
        <script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type = "text/javascript">
            //<![CDATA[

           var Notify = {
                   displayFor:2000,
                   animationDuration:750,
                   show:function(text){
                           if($("#notify-wrapper").length == 0)
                                   $('body').append('<div id = "notify-wrapper"></div>');
                           
                            var notification = $("<div>",{
                                    "class":"notification",
                                    "text":text,
                                    "click":function(){ Notify.hide($(this)); }
                                    }).appendTo($("#notify-wrapper"));
                           
                            setTimeout(function(){Notify.hide(notification);},this.displayFor);
                    },
                    hide:function(notification){
                            notification.slideUp(this.animationDuration,function(){ $(this).remove(); });
                    }
            };
           
           
            $(document).ready(function(){
                $("#textfield")
                    .focus()
                    .keyup(function(e){
                        if(e.keyCode == 13)
                        {
                            Notify.show($(this).val());
                            $(this).val('');
                        }
                });
            });
            //]]>
        </script>
    </body>
</html>
 

Notify object
Syntax: [ Download ] [ Hide ]
var Notify = {
        displayFor:2000,
        animationDuration:750,
        show:function(text){
                if($("#notify-wrapper").length == 0)
                        $('body').append('<div id = "notify-wrapper"></div>');
               
                var notification = $("<div>",{
                        "class":"notification",
                        "text":text,
                        "click":function(){ Notify.hide($(this)); }
                        }).appendTo($("#notify-wrapper"));
               
                setTimeout(function(){Notify.hide(notification);},this.displayFor);
        },
        hide:function(notification){
                notification.slideUp(this.animationDuration,function(){ $(this).remove(); });
        }
}


Relevant CSS This can be changed to suit your application of course.
Syntax: [ Download ] [ Hide ]
#notify-wrapper{
    position:fixed;
    right:0;
    top:0;
    width:200px;
    padding:5px;
}
    #notify-wrapper .notification{
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        background-color:#000;
        background-color:rgba(0,0,0,0.7);
        color:#FFF;
        padding:5px;
        cursor:pointer;
        margin-bottom:5px;
    }
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
pickle
Briney Mod
 
Posts: 6418
Joined: Mon Jan 19, 2004 7:11 pm
Location: 53.01N x 112.48W

Re: Simple Javascript Growl clone

Postby John Cartwright » Wed Oct 13, 2010 5:34 pm

Examples please.
Code: Select all
if ($toBe || $notToBe) echo 'That is the question'; 

NEW HERE?: Please read the Forum Rules, and take the Forum Tour before posting!
User avatar
John Cartwright
Site Admin
 
Posts: 11470
Joined: Tue Dec 23, 2003 3:10 am
Location: Toronto

Re: Simple Javascript Growl clone

Postby pickle » Wed Oct 13, 2010 5:58 pm

I've got an example of basic usage right at the top. Did you need it in context?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
pickle
Briney Mod
 
Posts: 6418
Joined: Mon Jan 19, 2004 7:11 pm
Location: 53.01N x 112.48W

Re: Simple Javascript Growl clone

Postby John Cartwright » Wed Oct 13, 2010 10:06 pm

I was just lazy and was hoping you had a live example. I understand the concept of your script so it's not a big deal, but I'll certainly look at it soon for a couple projects.
Code: Select all
if ($toBe || $notToBe) echo 'That is the question'; 

NEW HERE?: Please read the Forum Rules, and take the Forum Tour before posting!
User avatar
John Cartwright
Site Admin
 
Posts: 11470
Joined: Tue Dec 23, 2003 3:10 am
Location: Toronto

Re: Simple Javascript Growl clone

Postby Benjamin » Wed Oct 13, 2010 10:23 pm

Me too please!
Image
User avatar
Benjamin
Site Administrator
 
Posts: 6861
Joined: Sun May 19, 2002 10:24 pm

Re: Simple Javascript Growl clone

Postby Weirdan » Thu Oct 14, 2010 2:41 am

It could be interesting to add support for desktop notifications using, for example, window.webkitNotifications in Chromium: http://dev.chromium.org/developers/desi ... cification
User avatar
Weirdan
Moderator
 
Posts: 5864
Joined: Mon Nov 03, 2003 7:13 pm
Location: Odessa, Ukraine

Re: Simple Javascript Growl clone

Postby pickle » Thu Oct 14, 2010 9:57 am

I added a full HTML document you can open & run as a workable example.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
pickle
Briney Mod
 
Posts: 6418
Joined: Mon Jan 19, 2004 7:11 pm
Location: 53.01N x 112.48W

Re: Simple Javascript Growl clone

Postby VladSun » Thu Oct 14, 2010 2:48 pm

I use Saki's Toast extension in ExtJS:

Source:
http://extjs.eu/docs/source/Ext.ux.Toas ... t.ux.Toast


Sorry, no demo :( but it does exactly the same
User avatar
VladSun
DevNet Master
 
Posts: 4294
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Simple Javascript Growl clone

Postby John Cartwright » Thu Oct 14, 2010 9:47 pm

I ran the example and it looks great. It even perform really well under high notification volume.

A couple of suggestions:

-setting to determine the position of notification box
-setting to determine whether new notifications appear above or below existing notifications
-setting to determine duration of opening notification animation
Code: Select all
if ($toBe || $notToBe) echo 'That is the question'; 

NEW HERE?: Please read the Forum Rules, and take the Forum Tour before posting!
User avatar
John Cartwright
Site Admin
 
Posts: 11470
Joined: Tue Dec 23, 2003 3:10 am
Location: Toronto

Re: Simple Javascript Growl clone

Postby pickle » Fri Oct 15, 2010 10:17 am

Glad to hear it performs well.

The position can be modified with CSS if you want all your notifications to be elsewhere. It appends each notification to a wrapper div, so putting different notifications in different spots on the screen would require a re-think of how that's done.

There is no opening animation, it's just appended to the wrapper.

Adding before/after would be trivial enough - you just set a flag to determine whether to use appendTo() or prependTo().
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
pickle
Briney Mod
 
Posts: 6418
Joined: Mon Jan 19, 2004 7:11 pm
Location: 53.01N x 112.48W


Return to Code Snippets

Who is online

Users browsing this forum: No registered users and 1 guest