I've been playing more with this growl notification based off the periodical loader.

I have a table with messages being inserted into it from actions throughout the site.

I am wondering how to go about when a new one is inserted how to go about creating a temporary notification floating.

I have a div stylised




a)

I've got a javascript function there to populate a new div "<div class="growl">message inside the div</div>

I'm wondering though, if the way I've got that following jquery function that applies to anything with the class .growl if that will apply to the growl thats added or if that jquery will only apply to stuff already on the page once its all loaded?


B )

I've got a big gap in my theory about how to have this periodical updater execute the jquery on there being a new entry. For example, say there are 10 latest actions displaying in a box updating constantly.

So store the ID of the last row that was given a growl for in a session variable for the user. Then on the last query row that comes out, it compares itself to the id stored in the session, and if its bigger, then echo out in that row '<script type="text/javascript">doGrowl('stuff to display in the growl');</script>, then set this rows ID as the new sessionID and proceed.

I imagine this could work. I think it could be bad way to go about it doing inline script insertions like this though.

What do you think?

This post has been edited by cosmicbdog: Nov 14 2008, 08:52 AM

Have you checked this jQuery plugin called jGrowl out? It's pretty cool looking. It's perfect for a little project I'm working on

bloody perfect!!!!!!! what an awesome creation. i've been coding a mammoth of terrible code for the past hour that doesn't even compare

its so good. just got it going

Now for activity log viewing I have it hidden. (Previously I had it showing the last 3 actions by default). You could then open the log in a slideDown() jquery style activity which then loaded an ajax call to pull out the last 30 actions.

Now though, I can have the default activity log hidden saving a good 130px height. Now u can be anywhere in our backend scrolling high or low and the latest messages append in a growl like manner on the right. So awesome!!!

And, what exactly are you using it for?
It looks cool and all, but can you give me an example of when and why this is useful?

I have seen this growl kind of thing used in spamful situations which I don't think is great. Although used in a tasteful way it can be appealing. For example, say somebody loads your site and they are browsing around... u could create a timer of a length of time u might feel it takes to make a judgement call on your product or service. Maybe that call is to get their contact details for further enquiry. With this growl plugin in particular and the way its css is styled, it can pop up a notification with anything in it floating up in the top right corner.

Its usefulness I think starts becoming more apparent the closer you work with a team inside a web application. In our backend for example we have people who are preparing new content, from words to imagery, we have people doing accounting stuff like paying affiliates... we have bookings being taken on the phone and being inserted by temporary call staff... artwork for things and their designs are submitted through it all and distributed to the right people.

These notifications help to make sure people who are waiting for the completion of these things find out sooner. When there is a lot going on, this tool can be used to increase productivity by having a decrease of monotonous communications. Monotonous like telling people robotic things like "i have done x"... "i have done X" and needing to write that or even say it takes time. This implementation I've hopefully eradicated a lot of that.

Growl I have seen only on a mac really properly. But in a non-web sense, say I am uploading a file in cyberduck ftp, while also having a skype text chat with somebody etc etc and i have a bunch of stuff going on, so I have those windows in the background. Once my file is uploaded, and once I receive a new message, instead of just getting a bouncing icon or a little (1 new message) icon somewhere, a hovering box with the chat message comes up in the top right... and so does confirmation of the file upload... or my firefox download in their own boxes.. then they fade out or they can be closed. This saves time from being able to filter information. You don't need to stop what you are doing to check back to somewhere to see if the message is important or relevant.

The ideal growl is very unintrusive to you. It doesn't invade you... its long enough to take in the micro data and can be closed or configured.

The simple call to action growl though on a timer I have found to be effective. Unlike a pop-up it doesn't take up another window and can be a good way to create a sense of interaction and objectivity.

This post has been edited by cosmicbdog: Nov 14 2008, 12:15 PM