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!
-
It works fine in I.E. 6 but is broken in I.E.7. Here's a link to the basic example I setup.
-
It also works fine on this website in I.E.7, however, the example that I copied onto my web server doesn't. It works fine in Opera and Safari. Is there something that I have copied incorrectly? It might be a stylesheet issue but I copied Roar.css and Roar.js exactly from this website.
http://mail.wolfenet.org/~vira... <--- try with I.E.7
-
What is inserted the script?, The place within a label <script>JavaScript & MooTools</script> and I do not work, help me
-
What is inserted the script?, The place within a label <script>JavaScript & MooTools</script> and I do not work, help
-
To restack on close, when multiple notifications are displayed, I added this in the remove code :
``item.morph(to).get('morph').chain(item.destroy.bind(item),this.restack());``
Then added this function:
``
restack: function() {
var to={},next=0;
this.items.each(function(item){
/* from = item.getStyle(this.align.y).toInt(); */
to[this.align.y]=next;
item.store('roar:offset', next).morph(to).get('morph');
next += item.offsetHeight + this.options.offset;
},this);
this.reposition();
},
``
Works for me, mootools 1.2 final, firefox -
Any update on supporting centered position?
I would like to use this script as a confirmation window when a user does something.Thanks!
-
Any one have Mootools TRUNK 1555 FULL CORE COMPATIBLE?? PLEASE share
-
Hey Herald,
I have your script at use in a web app I'm doing. One thing I noticed is that if a Roar notif. is summoned inside an iframe or modal ajax box it causes scrollbars to appear and they go kind of crazy to as it slides into view. Any thoughts on why this would be would be greatly appreciated! Works perfect in full screen, normal flow pages, just modals and such are affected.
-
Perfect!
-
The corners aren't rounded in IE7 or Opera, only seems to work correctly in FF.
-
Too bad, but they are also rounded on Safari ... But if u need it, send me your CSS changes for cross-browser rounded corners :)
-
Would it be possible to edit the script so that when the user clicks a link, a specified message appears?
-
Yes, just like the example shows.
-
Could you implement round corners using "canvas" as this
http://www.romeosa.com/moo/tru... ?I'm working with a mac and firefox 2 and round corners in ROAR are very hugly.
-
Mh, Canvas kinda bloats the whole script, now its so small and easy to use. And canvas are slower when animated ... and I never played with them before :D
-
Hi there!
Just wanted to let you (all) know that the system is now implemented and working like a charm, after setting the utf-decodings to the script handling the insertion of messages.I have received tons of requests on how to implement my messaging system to other sites, but I'ven't packaged this into a feasible "product" yet - maybe when I launch the RIAJab v2 cms (some day far far from now :D ), I'll implement it into the core :)
If you like to test the system, just go to http://www.tuhma.fi/2.0/site/t... and give your email, full name and a logon name, receive a notice in your email, follow the link and you're set to instant message me :)
And if you wan't to check the newsfeeder, it's on the front page, just check the "Näytä popup-uutiset" and the news should start roaring :)
-
Oh uh, and forgot to mention, that the messager uses your autocompleter also!! :)
Don't know why it doesn't sync with ffox 2.0.0.13 correctly, but am working on a patch for this :)- Jabis -
-
Hello,
i were in need of a "alert can't get closed" solution too. so i did some testing and got this to work: roar accepts a parameter, whether the alert can be closed on click; alert can be controlled through a variable (to close it manually).roar.js: change...
-----Line ~28:
onRender: $empty,
keepOpen: false-----Line ~80:
if(this.options.keepOpen == false) {
this.items.push(item.addEvent('click', remove));
}-----Line ~100:
this.fireEvent('onShow', [item, this.items.length]);
return item;HTML Document:
<script>
var roar = new Roar({'duration': 0, 'keepOpen': true});
var somevar = roar.alert(...);
// to close somevar alert
somevar.remove();
// close link inside of roar alert
var someothervar = roar.alert('...','close');
</script>hope it's of any use to someone ;+)
-
Looks like some new options for the new version :) . duration = 0 already disables the automated fade out, so the other option would be more like "persistent", disabling duration AND click event.
Post your comment
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
I can't get Roar notifications to work correctly in I.E. Only a small part of the notification div shows up in I.E. Everything works fine in firefox. I copied Roar.js, Roar.css, and created a testRoar.html with the example from the Random Alerts example. If I change the text color from white to black I can see the text in I.E. but the background is still white. Where as in firefox the background of the div is gray. Has anyone experienced this problem?