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 “Random Alerts”
Random notifications for all 4 corners of the document.
The Action Happens Here
JavaScript & MooTools
window.addEvent('domready', function() { /** * You usually reuse ONE instance. * The 4 instances we'll reuse here represent different options. */ var roars = [ new Roar(), new Roar({ position: 'upperRight' }), new Roar({ position: 'lowerLeft' }), new Roar({ position: 'lowerRight' }) ]; /** * CSS selector to get the 4 links and iterate over them */ $$('#demo-links a').each(function(anchor, i) { /** * Hey, now I can throw random messages at the user! */ anchor.addEvent('click', function(el) { /** * I take the index of the element as roar instance index. */ roars[i].alert( [ "You've got mail!", "News published »Feel the lion roar!«", "1000 visitors tracked today", "Whats that strange text here?", "Try to read that!", "Look ma, without sense!", "No Error occured! Thank you for listening!" ].getRandom(), [ "Lorem ipsum laudem labore ex usu. Quo an antiopam repudiandae. Mei ex saepe possit molestie. Novum habemus nominavi pri id. Ad erat vivendo duo, dictas saperet scriptorem id vix, duis quaeque expetenda ex per.", "Tia helpi proto nomial u, nek ro eligi kunigi. Kuo vo sepen neniaĵo malprofitanto, on olda vavo ator ebl. Ind filo veki supersigno de. Neigi akuzativo por ie.", "Kaj jo miria posta itismo. It sia deka zorgi pseudoafikso, jesi kvanta da sub.", "Periodicos excellente publication non tu, de del toto latente religion. Que tu mundial traduction connectiones.", "Por is enen decilitro antaŭmetado. Ki pri egalo ologi alikvante, tioma iufoje monatonomo ko iel. Frida negativaj kvadriliono o tra, hura brosi respondo ali mf. Ali ec kaŭ duonhoro alternativo, log lo timi mikro, ato po nenia postpostmorgaŭ..", "Tot na malju neskolk. Es sxto varijm pridijt des. Sam na sport navestib, morkva jazika cxistju oni mi. Mne bolsx hcejm sxuflad ku. Klet nesxto to mne.", "Actually you should write some more useful in here, these are just word bits to fill the lines!" ].getRandom() ); return false; // cancel the click }); }); });
XHTML Markup
<ul id="demo-links"> <li><a href="#">Notification upper-left</a></li> <li><a href="#">Notification upper-right</a></li> <li><a href="#">Notification lower-left</a></li> <li><a href="#">Notification lower-right</a></li> </ul>
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!
