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:

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.

Share it: Stumble it!Digg This!del.icio.us (No Posts)

discussion by DISQUS No Comments

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

Sort:
No Comments
No Comments

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