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.


Showcases

Features

  • 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();
 
});

Compatibility

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

Planned

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

Requirements

MooTools JavaScript Framework

Download MooTools 1.2 with at least these modules:

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

Download

Changelog

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

License

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! • del.icio.us (176 Posts: )

discussion by DISQUS 61 Comments

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

Sort:
Comments 1 – 20 of 61:
  • … reply
    Avatar
    JayCC 1 Point
    said 2 years ago (1 Point) …
    Small suggestion, when an older notification fades out, possible to have any that are still showing slide down and take its place?
  • … reply
    Avatar
    digitarald Site Owner
    replied 2 years ago (1 Point) …
    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.
  • … reply
    Avatar
    JayCC 1 Point
    replied 2 years ago (1 Point) …
    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).
  • … reply
    Avatar
    digitarald Site Owner
    replied 2 years ago (1 Point) …
    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.
  • … reply
    Avatar
    RLovelett 1 Point
    said 2 years ago (1 Point) …
    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.
  • … reply
    Avatar
    digitarald Site Owner
    replied 2 years ago (1 Point) …
    * 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.
  • … reply
    Avatar
    atom
    replied 2 years ago (1 Point) …
    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.
  • … reply
    Avatar
    digitarald Site Owner
    replied 2 years ago (1 Point) …
    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/aug/29/standards-web-standards-and-standardistas/): *"Where Web Standards and other best practices don’t provide great benefits, find solutions that do."*
  • … reply
    Avatar
    Tony
    replied 2 years ago (1 Point) …
    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...
  • … reply
    Avatar
    digitarald Site Owner
    replied 2 years ago (1 Point) …
    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.
  • … reply
    Avatar
    jabis 1 Point
    said 2 years ago (1 Point) …
    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 :)
  • … reply
    Avatar
    digitarald Site Owner
    replied 2 years ago (1 Point) …
    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 ;)
  • … reply
    Avatar
    jabis 1 Point
    replied 2 years ago (1 Point) …
    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 :)
  • … reply
    Avatar
    digitarald Site Owner
    replied 2 years ago (1 Point) …
    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.
  • … reply
    Avatar
    jabis 1 Point
    replied 2 years ago (1 Point) …
    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
  • … reply
    Avatar
    E_mE
    said 2 years ago (1 Point) …
    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
  • … reply
    Avatar
    Cheeseroll
    replied 2 years ago (1 Point) …
    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!
  • … reply
    Avatar
    Magnus
    replied 2 years ago (1 Point) …
    I would also like to have an option for manual closing, it would be great!
  • … reply
    Avatar
    digitarald Site Owner
    replied 2 years ago (1 Point) …
    Me too, me too ... ok, I'll add it.
  • … reply
    Avatar
    jabis 1 Point
    said 2 years ago (1 Point) …
    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 ;)
Comments 1 – 20 of 61:

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