A jQuery plugin to add notification bubbles and a notification list to any menu.
Based on the PSD created by Orman Clark
Usage
var notifications = new $.ttwNotificationMenu({
colors:['#f56c7e', '#fec151', '#7ad2f4']
});
//Add bubbles to a menu
notifications.initMenu({
someCategory:'#menuItemSelector'
});
//create a notification notifications.createNotification('Sample Notification');
//delete a notification
var notification = notifications.creatNotification('some notification');
notifications.deleteNotifiction(notification);
//get the notifications in a category
var notificationsInSomeCategory = getNotifications('someCategory', 'unread');
I really like this might try integrate it somehow in one of my design mockups but a quick question/notice.
When the notifications go over a certain amount (overflows screen) the popup moved above the button, so nothing could be seen past top of the screen.
Hi Jack. See my note below. It should be an easy fix.
What Jack Whiting said happened with me also after adding about fifty messages. Suggestions to correct this?
I’m pretty sure it’s because I’m not setting a value for collision when I use the jQuery UI position utility. http://jqueryui.com/demos/position/
It should be an easy fix, but I don’t know when I will have the time to update it.
Heck yeah this is eaxtlcy what I needed.
useful………..thanks.
Wouldn’t it be nice if the pop up appears even if i click on the button?
On Chrome 14.0.835.163 beta-m , the pop-up appears only if i click on the colored bubble.
Yes, that is how it is supposed to behave. If you want the list to pop up when you click the menu item, you will need to modify the code. Just add another event handler…
would love to implement this into my web app using pusher.com’s api to trigger the notifications… but how?
Pusher looks interesting, but unfortunately I have never used it so I can’t give you any pointers.
Really nice! Congratulations
Can this script be used to notify the user when a new record in the database is inserted? For example, a user has a new message in the database and this script will send an automatic popup to the user’s screen? Thanks!
This plugin looks interesting, however I can’t figure out how to properly use the callbacks. I want to have a callback executed when I click on the notification text and another when I click the notification close button. For the first one I’m using notificationClickCallback and for closing markReadCallback. This seems to work, but everytime I click the close button, the click callback is also executed, so I have two events triggered which is not what I want. Is there anyway to trigger only the markReadCallback or am I missing something?
Thanks.