PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sat Nov 22, 2014 6:37 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 10 posts ] 
Author Message
PostPosted: Wed Oct 13, 2010 5:13 pm 
Offline
Briney Mod
User avatar

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6433
Location: 53.01N x 112.48W
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.


Top
 Profile  
 
PostPosted: Wed Oct 13, 2010 5:34 pm 
Offline
Site Admin
User avatar

Joined: Tue Dec 23, 2003 3:10 am
Posts: 11470
Location: Toronto
Examples please.


Top
 Profile  
 
PostPosted: Wed Oct 13, 2010 5:58 pm 
Offline
Briney Mod
User avatar

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6433
Location: 53.01N x 112.48W
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.


Top
 Profile  
 
PostPosted: Wed Oct 13, 2010 10:06 pm 
Offline
Site Admin
User avatar

Joined: Tue Dec 23, 2003 3:10 am
Posts: 11470
Location: Toronto
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.


Top
 Profile  
 
PostPosted: Wed Oct 13, 2010 10:23 pm 
Offline
Site Administrator
User avatar

Joined: Sun May 19, 2002 10:24 pm
Posts: 6874
Me too please!

_________________
Image


Top
 Profile  
 
PostPosted: Thu Oct 14, 2010 2:41 am 
Offline
Moderator
User avatar

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


Top
 Profile  
 
PostPosted: Thu Oct 14, 2010 9:57 am 
Offline
Briney Mod
User avatar

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6433
Location: 53.01N x 112.48W
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.


Top
 Profile  
 
PostPosted: Thu Oct 14, 2010 2:48 pm 
Offline
DevNet Master
User avatar

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

_________________
Image
http://openfmi.net/projects/flattc/ Linux is better :)


Top
 Profile  
 
PostPosted: Thu Oct 14, 2010 9:47 pm 
Offline
Site Admin
User avatar

Joined: Tue Dec 23, 2003 3:10 am
Posts: 11470
Location: Toronto
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


Top
 Profile  
 
PostPosted: Fri Oct 15, 2010 10:17 am 
Offline
Briney Mod
User avatar

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6433
Location: 53.01N x 112.48W
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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 10 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group