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

Post Reply
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Simple Javascript Growl clone

Post by pickle »

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:

Code: Select all

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:

Code: Select all

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

Code: Select all

<!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

Code: Select all

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.

Code: Select all

#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
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: Simple Javascript Growl clone

Post by John Cartwright »

Examples please.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Simple Javascript Growl clone

Post by pickle »

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
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: Simple Javascript Growl clone

Post by John Cartwright »

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.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: Simple Javascript Growl clone

Post by Benjamin »

Me too please!
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Simple Javascript Growl clone

Post by Weirdan »

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
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Simple Javascript Growl clone

Post by pickle »

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
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Simple Javascript Growl clone

Post by VladSun »

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
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: Simple Javascript Growl clone

Post by John Cartwright »

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
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Simple Javascript Growl clone

Post by pickle »

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.
Post Reply