jQuery 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:

jQuery Growl clone

Post by pickle »

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.

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

Code: Select all

/* 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

Code: Select all

Notify.show('Record deleted');
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: jQuery Growl clone

Post by Eran »

Nice snippet. If I may suggest an improvement, there is no need for generating a unique ID for each notification

Code: Select all

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

Re: jQuery Growl clone

Post by pickle »

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.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: jQuery Growl clone

Post by Eran »

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

Re: jQuery Growl clone

Post by pickle »

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.

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(); });
	}
}
Last edited by pickle on Wed Apr 28, 2010 2:39 pm, edited 1 time in total.
Reason: wrapped "this" in the click function with $()
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: jQuery Growl clone

Post by Eran »

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

Re: jQuery Growl clone

Post by pickle »

pytrin wrote:
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.
Post Reply