Roar - Notifications (v1.0)

Project Roar - Notifications Showcase 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.



  • Show any informations you want and style them with class-names.
  • Messages are queued and interactive
    • Hover them to read them longer
    • Add optional click-interaction to provide more information
  • Customize them via external CSS to your own needs.

How to use

// Wait for the content ...
window.addEvent('domready', {
    // Default options, reuse this Roar
    var queue = new Roar();


Fully compatible with all A-Grade Browsers (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 2+)


  • Support for centered position
  • More notification types and easier customization


MooTools JavaScript Framework

Download MooTools 1.2 with at least these modules:

  • Element.Dimensions
  • Fx.Tween
  • Fx.Morph
  • Selectors
  • DomReady (facultative)



1.0.1 (2008-04-26)
  • Added: Roar::inject which contains all the basic create-notification logic, alert only builds the elements. Add more handlers (images, mp3-player like, whatever) on your own and send the cool ones to me!
  • Added: Added queued demo and improved ticker demo
  • Added: Roar::empty to remove all open items
  • Changed: Removed handler argument for alert, just get the last item from Roar::items and add custom events.
  • Changed: Removed orphaned title option, no default title possible
1.0 (2008-01-19)
  • Added: New Events onShow, onHide (arguments element and index) and onRender
  • Fixed: Adapted new MooTools Dimensions, follows window scrolling again.
  • Fixed: Added fallback for IE regarding opaque background.
1.0 pre (2008-01-03)
  • Initial working version for MooTools 1.2


All files are © 2008-2009 by Harald Kirschner and available under the MIT License.

Contact & Discussion

For asking questions, requesting features, filing bugs or contributing other thoughts on this project use the support forum below. Before posting a new question, read through the documentation and the contributed notes for an answer. For problem reports make sure to add enough details like browser, version and a link or the relevant code.

You can contact me for non-support related notes.

Professional Support

I am available for hire if you look for professional and swift help. I can come to your rescue for installation, customization or extending the existing source for your needs.

Share it: Stumble it!Digg This! (No Posts)

discussion by DISQUS No Comments

Please use the support forums for discussing the project, asking questions or posting bug-fixes!

No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last

Post your comment

Please use the support forums for discussing the project, asking questions or posting bug-fixes!

Internet Consultant & Contractor

I'm available to combine forces with you and your team to find the most simple, elegant and convenient web solutions . I await your call.

If you just like my work and want to say Thank You, donate via PayPal or Amazon Wish List.

Developer Resources & Tools