Roar - Notifications (v1.0)
Roar is a notification widget that streamlines incoming messages, such as updates or errors, without
distracting the user from their browser experience or breaking their work-flow by displaying obtrusive
alerts. Roar is inspired by Growl, the notification system for Mac OS X and
is realised with MooTools.
Showcase “Never-ending Feed”
Showing feed items with link but without end.
The Action Happens Here
JavaScript & MooTools
window.addEvent('domready', function() { // From http://feeds.feedburner.com/SmashingMagazine var feed = [ ['Free Credit Card Icons For Online-Shops', '2008/04/25/free-credit-card-icons-for-online-shops/'], ['Five More Principles Of Effective Web Design', '2008/04/24/5-more-principles-of-effective-web-design/'], ['5 Principles And Ideas Of Setting Type On The Web', '2008/04/23/5-principles-and-ideas-of-setting-type-on-the-web/'], ['Inspirational PDF Magazines', '2008/04/22/inspirational-pdf-magazines/'], ['Celebration Of Vintage and Retro Design', '2008/04/21/celebration-of-vintage-and-retro-design/'] ]; var running = true; var randomize = function() { if (!running) return; // Random message from the feed var item = feed.getRandom(); // First argument title, second message body roar.alert(item[0], 'Smashing Magazine @ ' + item[1]); // Get last added element and add the click event roar.items.getLast().addEvent('click', function() { // Old school way for forcing a new window (not the best style!) window.open('http://www.smashingmagazine.com/' + item[1], 'demo') }); }; // Our roar instance for all our messages var roar = new Roar({ position: 'lowerRight', onHide: randomize }); // A bit control for the nervous feed $('demo-control').addEvent('change', function() { if (!running && this.checked) { // restart running = true; randomize(); } else { // stop running = false; roar.empty(); }; }); // Hey ho, lets go! randomize(); });
XHTML Markup
<label> <input type="checkbox" value="1" checked="checked" id="demo-control" /> Roar! Feed Items </label>
This example and the accompanying sources/assets are © 2008-2009 by Harald Kirschner and available under The MIT License. For debugging and profiling the scripts and their markup download Firefox and use addons like Firebug and Web Developer Toolbar.
61 Comments
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
-
I added that in my first test version, it's too much noise. You can't read because messages move all the time. I think about making the placement of new messages more intelligent, so they take the free space under the current messages (similar to Growl), I'm open for ideas and patches.
-
Actually, that probably makes the most sense. Have new messages push the older messages further into the page (which will fade out as they age).
-
Pushing them, no. Only fading into available free space. Pushing old messages up would make also too much noise. I tried it, trust me ;) ... You'll have problems following the text because all the time the box jumps to a free position or gets pushed up. Their main purpose is still that people read the text inside.
-
When an instance of a Roar shows up on screen it is causing on screens that have no scrollbars to suddenly have them which causes the screen to go all jerky for the brief time it's actually on screen to when it goes off screen. Is there anything that could be done about this?
Also, just as an aside. Wow, you do some really astounding work with Mootools on this site. Great job.
-
* Simple solution, add CSS to always show scrollbars (which is good in most cases in pages with sliding elements): *html { overflow: -moz-scrollbars-vertical !important; }*
* I'm planning a noSlide option to disable the jump-in effect and only fade the notes in. -
The horizontal scroll is showing up because there is some overflow taking place when the post title is long. You would be better off preventing this with { overflow:hidden } rather than patching it up with proprietary Mozilla only css, which will not validate.
-
Since both work but the proprietary css has *imo* a better result (and the fix finally is for mozilla), the first one has my vote. If it comes to proprietary css I rather choose the simpler solution to fix vendor specific behaviour. Quoting [Jeff Croft](http://jeffcroft.com/blog/2007... *"Where Web Standards and other best practices don’t provide great benefits, find solutions that do."*
-
Well, the 'bug' also shows it head on Safari 3.1 (Windows). It gets strange when you try to scroll to the right, suddenly there seems to be no end to it...
-
You said also, where do you see that big too? There is no other message from you describing that bug? I'll check if I can reproduce it, Safari is pretty unstable on my windows here.
-
Hi there!
First off; a great class showing some MooTools 1.2 :) Many many thanks for this!
I'm releasing a site in the nearby future and am going to utilize Roar as an instant messaging system for user to user comms. Imho a fascinating (and easy thanks to your class) approach to this subject, cause not much is needed, as the site's already heavily Ajaxified(or should I say Requestified in terms of 1.2b ;D )
The Roarmother will be checking for new messageroars periodically, and have them pinned down to the page until user intercepts em with ignore or reply commands, if ignore pressed the messageroar is dumped from Roar and cleared from the database; reply reveals an input field inside the messageroar intercepted, and when submitted, sends the replyroar to user and executes the ignore command for this message.
There's also a newsfeed for which Roar is already utilized. It's dumping random summaries from the sites news - that was relatively easy, as my summaries were already in hidden divs and are tweened visible via ajaxified links, so I'm getting the contents as easily as follows:
`var toaddlinks = $$('#news a').get('href');
var myFeed = new Array();
var myCol = $$('.summary').get('html');
for(var i = 0; i < toaddlinks.length-1; i++){
myFeed[i] = [myCol[i], toaddlinks[i]] ;
}
feed.combine(myFeed); `I really didn't have any other question to you, but to the feed combining, is this way a best practice way - or should I use some other method in combining feeds etc? I'm handling up to hundreds of newslinks and summaries and am concerned about the selectors etc which can create a huge lag and load to the site, so that's why I'm asking :)
Hope to hear from you soon, and once over the alpha, I'll showcase my project to you :)
-
Thanks for the kodus and the great project description. Drop me a link and I'll add a section for sites-using-it. In your case combine does not work because you create new arrays all the time. You need Hash with unique keys (urls):
`var feed = new Hash(); // not in your code, just to clarify
/* the associate creates a hash with href: summary entries, combine adds the new href-keys to the feed */
feed.combine($$('#news a').get('href').associate($$('#news .summary').get('html')));`MooTools magic and a powerful Hash class ;)
-
Humm, I bumped into a wall trying your solution to use the Hash();
In your examples, and in your class, you're using an array inside an array, and if I just try to combine the Hash Object into the original array(array()) code, It'll produce an error (as I was predicting) that the getRandom() isn't a function (nor should it be, because we're dealing with Hash Object instead of an Array Object, so now what would be the correct way to populate the key-value(or url-summary in this case) inside the feed array, so I wouldn't need to rewrite/extend your fully working class?
I already tried an approach using myTestHash.getKeys() and myTestHash.getValues() for the feed array, but got only the first/last key-value pair to show up... (would provide the code, but already forgot which test.js it was on, and several different tests going on atm :D )
Sorry if this is a bugger for you - I'm sure I can manage on my own if you'ven't the time, but for a mootools/javascript novice, these pointers are very very helpful, whilst reading and discovering things from the documentation :)
I actually turned away from RIA's like flex and flash, once I discovered mootools framework - the main reason being (aside the cross-platform&no-plugin point) that I learned to implement (developing with mootools since last month) already about 85 percent of the things I've earlier created with ActionScript&php & heavy swf's... The downside now being that a whole "new" language and the syntax needs to be quickly adopted as my bread hangs upon ME developing for my clients :D
Too much off topic here nao, but hope you get the idea :)
-
The good thing is, that AS and JS are not so different. Hash has not getRandom, but you can use getRandom on Hash::getKeys and use that key as index. `var href = feeds.getKeys().getRandom(); var summary = feeds.get(href);`. To remove a clicked roar message u need call `feed.erase(clickedHref)`. I hope that helps.
-
Yah! Thank you very very much mister!! :))
I got it to work perfectly, the php-load time decreased from 1.5 to 1.1 sec after hash object set in place (I'm using trunk 1547 non compressed + a lot of test js getting loaded, as well as huge amount of data from the mysql-server - so a lot of overhead), so about 1/3 boost to the page load *claps hands*
Now I'm concentrating on the messaging system, I'll bump an update here when done.Thanks once again!
Sincerely yours,
Jabis -
Hi Mr D,
Firstly what a great tool, it impressed my employer no end :)
I was wondering if the Roar.js could be modified to allow enable/disabling the automatic closing of the displaying panel, currently if you click anywhere on the panel (including encapsulated links) it automatically closes as you well know. Currently I've implemented a minor work around with this link of code:
this.items.push(item); //.addEvent('click', remove) Line 80
So I was wondering if it could be a more permeant feature via an option or callback. It could have a callback which if the user doesn't set one up, it will automatically call an internal function which closes the panel.
I'd be interested to know what you think.
Cheers,
E_mE -
Hi,
I've implemented your addition for disabling automatic closing....it works fine. I was wondering if their is a way to add a link "close" on the displayed panel?
----------------------------------------------------------------
to the owner... Awesome script...thanks! -
I would also like to have an option for manual closing, it would be great!
-
Me too, me too ... ok, I'll add it.
-
Hi there, Harald!
I just wanted to let you know, that my messaging system is now in beta, and that if you'd like to see it in action, just go to http://www.tuhma.fi/ and register yourself as a user, I'll put you in Toimittajat (journalist) user group, and give you access to the messaging system...
Atm my only problem is that I've a specific charset (iso-8859-1) in use and I can't seem to get my forms to post the data in iso-8859-1, because I see malformed entities (ä = ä) in the mysql-database, so my nickname follower doesn't show up the messages properly and if scands are used in the nickname, the message never delivers... (if your nickname ie käpäyttäjä, and you send the message, it delivers the message to käpäyttäjä)
Well you could use your nick - digitarald - and have no problem whatsoever, when not using html-entities or scands (äöå) in your posts, so give it a whiff ;)
Post your comment
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
Small suggestion, when an older notification fades out, possible to have any that are still showing slide down and take its place?