PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.		  
Loading
It is currently Wed Jan 23, 2019 5:53 am

View unanswered posts | View active topics


Board index » Programming » Code Snippets

All times are UTC - 5 hours




Post new topic Reply to topic  Page 1 of 1
  [ 7 posts ] 
  Previous topic | Next topic 
Author Message
pickle
 Post subject: jQuery Growl clone
PostPosted: Tue Apr 27, 2010 5:47 pm 
Offline
Briney Mod
User avatar

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6445
Location: 53.01N x 112.48W
Hi All,

I wanted a Growl-like notification system for an app I'm building, but.. for some reason I can't think of right now I didn't like jGrowl - likely the styling options.

Anyway, I rolled my own. This isn't a proper jQuery plugin, but it does use jQuery to simplify specifying elements & doing animations.

Edit: After some input from ~pytrin, I've posted some cleaner updated code below.

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 date = new Date();
                var id = "notifier-"+date.valueOf()+'-'+text.replace(/\W/g,'_');
                $("#notify-wrapper").append('<div id = '+id+' class = "notification">'+text+'</div>');
                $("#"+id).click(function(){ Notify.hide($(this).attr('id')); });
                setTimeout("Notify.hide('"+id+"')",this.displayFor);
        },
        hide:function(id){
                $("#"+id).slideUp(this.animationDuration,function(){ $(this).remove(); });
        }
}


Accompanying CSS
Syntax: [ Download ] [ Hide ]
/* This is the container the notifications get placed into */
#notify-wrapper{
        position:fixed;
        right:0;
        top:0;
        width:200px;
        padding:5px;
}
/* Each "Growl"/notification gets the .notification class */
#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;
}


Usage
Syntax: [ Download ] [ Hide ]
Notify.show('Record deleted');

_________________
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Top
 Profile  
 
Eran
 Post subject: Re: jQuery Growl clone
PostPosted: Tue Apr 27, 2010 6:08 pm 
Offline
DevNet Master
User avatar

Joined: Fri Jan 18, 2008 1:36 am
Posts: 3549
Location: Israel, ME
Nice snippet. If I may suggest an improvement, there is no need for generating a unique ID for each notification
Syntax: [ Download ] [ Hide ]
show:function(text){
        var self = this;
        if($("#notify-wrapper").length == 0) {
                $('body').append('<div id="notify-wrapper"></div>');
        }
        var notification = $('<div class="notification">' + text + '</div>').appendTo('#notify-wrapper');
        notification.click(function() {self.hide(this);});
        window.setTimeout(function(){self.hide(notification);},this.displayFor);
},
hide:function(notification){
        $(notification).slideUp(this.animationDuration,function(){ $(this).remove(); });
}
Top
 Profile  
 
pickle
 Post subject: Re: jQuery Growl clone
PostPosted: Wed Apr 28, 2010 9:51 am 
Offline
Briney Mod
User avatar

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6445
Location: 53.01N x 112.48W
Actually, I think there is. In Firefox (and in most of the examples of setTimeout() I've seen online), the first argument to setTimeout() must be a string. Therefore the argument passed to hide() must be representable by a string.

Substituting the first argument to setTimeout() for a function like you've done apparently doesn't work in IE.

_________________
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Top
 Profile  
 
Eran
 Post subject: Re: jQuery Growl clone
PostPosted: Wed Apr 28, 2010 11:12 am 
Offline
DevNet Master
User avatar

Joined: Fri Jan 18, 2008 1:36 am
Posts: 3549
Location: Israel, ME
I've been using this approach for a long time now, and I'm confident it works in all browsers. You can pass a string, but using a callback is also possible
https://developer.mozilla.org/en/DOM/window.setTimeout

Did you try it? I tested it and it worked fine for me.
Top
 Profile  
 
pickle
 Post subject: Re: jQuery Growl clone
PostPosted: Wed Apr 28, 2010 11:25 am 
Offline
Briney Mod
User avatar

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6445
Location: 53.01N x 112.48W
I didn't test it because all I'd seen led me to believe what I wrote above. Plus, testing it requires me to fire up a Windows box (blech).

However, you are certainly write - it works. Below is the updated code. I made a couple changes from what you wrote. Namely, I don't use "self", use the new jQuery 1.4 syntax for creating elements, and don't wrap "notification" in another $() wrapper, as it's already a jQuery object.

Thanks for the advice - it does clean up the code a bit.

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(); });
        }
}

_________________
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.


Last edited by pickle on Wed Apr 28, 2010 2:39 pm, edited 1 time in total.
wrapped "this" in the click function with $()


Top
 Profile  
 
Eran
 Post subject: Re: jQuery Growl clone
PostPosted: Wed Apr 28, 2010 11:31 am 
Offline
DevNet Master
User avatar

Joined: Fri Jan 18, 2008 1:36 am
Posts: 3549
Location: Israel, ME
Quote:
I don't use "self"

self is a reference for the container object. Just in case you decide to rename 'Notify' you don't have to update explicit references to it. It's proven useful in my experience, but it's just my preference of course
Quote:
and don't wrap "notification" in another $() wrapper, as it's already a jQuery object.

Notice that inside the click event, 'this' is the HTML element and not a jQuery object, so you'd have to wrap it there instead if you remove it from the hide() function
Top
 Profile  
 
pickle
 Post subject: Re: jQuery Growl clone
PostPosted: Wed Apr 28, 2010 2:39 pm 
Offline
Briney Mod
User avatar

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6445
Location: 53.01N x 112.48W
pytrin wrote:
Quote:
and don't wrap "notification" in another $() wrapper, as it's already a jQuery object.

Notice that inside the click event, 'this' is the HTML element and not a jQuery object, so you'd have to wrap it there instead if you remove it from the hide() function


Duh - of course. Code has been updated.

_________________
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  Page 1 of 1
  [ 7 posts ] 

Board index » Programming » Code Snippets

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 4 guests

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