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.
Keywords:
61 Comments
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
