ready-to-use resources, tutorials, tips and many other web development related stuff
WARNING! You probably have JavaScript disabled. Some features of this site will not work properly unless JavaScript enabled.
www.webdevelopmentstuff.com changed to www.webdevstuff.com

Gritter: Growl Notification by jQuery

Growl is basically a notification bubble/popup that appears in the top right of your desktop, well known from Mac OS X. Gritter is let’s say the implementation of Growl notifications in web design. Practically, it’s something like the alert() function in JavaScript, but it’s not a modal, looks much better, has more functionality and is fully customizable by parameter settings.

Growl Types of Notifications

  • Regular Notification
    Fades out after a certain amount of time, can be set for each notification – simple one or complex one (with images).
  • Sticky Notification
    Doesn’t run on a fade timer. Just sits there until the user manually removes it by clicking on the (X).

As usually for any other jQuery plugin, all you have to do is just upload downloaded Gritter plugin onto your server, load it into your document as stated below and then add the Gritter (Growl Notification Bubble) wherever you like by calling the $gritter.add() method of the Gritter object as example below shows. Parameters passing into the method set type and behaviour of notification bubble.

Gritter Loading

<link rel="stylesheet" type="text/css" href="css/gritter.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.3.2');</script>
<script type="text/javascript" src="js/jquery.gritter.js"></script>

Gritter Calling

$.gritter.add({
	// (string | mandatory) the heading of the notification
	title: 'This is a notice!',
	// (string | mandatory) the text inside the notification
	text: 'This will fade out after a certain amount of time.'
});

As you can see, the Gritter jQuery plugin is easy to use, runs flawlessly in all major browsers (FF 3, FF 3.5, Opera 9, IE7, IE8, Safari 4), problems are only in IE6 – it doesn’t look as good as in other browsers but still works fine. More info, examples and demos can be found on Jordan Boesh’s (Gritter author) site.

Gritter jQuery Plugin

2 Responses to “Gritter: Growl Notification by jQuery”

  1. Internet Explorer 8 is very good because it is as stable as Opera. I hate the previous versions of IE like IE6 because it hangs frequently. ~

  2. Wills Bithrey says:

    Love this plugin, can’t wait to implement in our web app.

    @Rebecca: IE8 is still far from “good”.

© 2008 - 2018, webdevstuff.com | Powered by Wordpress | Theme by Elegant Themes | Valid XHTML and CSS | Subscribe to RSS