jQuery Growl

v2.0.0 has been completely rewritten from the ground up, and works out of the box with Bootstrap 3.

This is a simple demo page for the jQuery Growl Plugin by David Higgins.

This page demonstrates the default style of jQuery Growl within a Bootstrap 3 site using "bootstrap-theme.css"

The plugin can be configured by calling $.growl() with a settings object ({settings: {}}). A full list of configurable options can be found below.

Custom Notice

To disable any of the default timers, click the appropriate red button

Defaults

You can change the default 'display' and 'remove' effects by overriding $.growl.settings.noticeDisplay and $.growl.settings.noticeRemove functions. Both take a parameter named 'notice' which is the notice in question, and 'noticeRemove' should also accept a 'callback' and call it as a final process (it is what removes the notice from the DOM -- if you don't handle this with your custom function, simply do "callback();" or pass "callback" to the .animate() function's 'complete' property)

SETTINGS

{
  // the DOM ID of the dock container
  dockId: 'jqueryGrowlDock',
  // the CSS Class for the dock container
  dockClass: 'growl',
  // the dock template, should be a single element
  dockTemplate: '<div></div>',
  // the jQuery selector for the element the dock will 
  // be appended too
  dockContainerSelector: 'body',
  // the inline styles applied to the dock 
  dockCss: {
    position: 'fixed',
    top: '10px',
    right: '10px',
    width: '300px',
    zIndex: 50000
  },
  // the template of the notice
  noticeTemplate: 
    '<div class="notice panel">' +
    '<div class="panel-heading ">' +
    '<h3>' +
    '<a class="title"></a>' +
    '<button type="button" class="close">x</button>' +
    '</h3>' +
    '</div>' +
    '<div class="message panel-body">%message%</div>' +
    '</div>',
  // the inline styles applied to a notice
  noticeCss: {
  },
  // override styles for the notice title element
  noticeTitleCss: {
    color: '#fff',
    textDecoration: 'none',
  },
  // this function is called when the notice is added to the dock
  // notices are hidden, so you can call notice.show(), notice.fadeIn(),
  // or anything else you'd like to make the notice visible
  // by default, we call 'fadeIn'
  noticeDisplay: function(notice) {
    return notice.fadeIn(settings.noticeFadeTimeout);
  },
  // this is similar to noticeDisplay and is called just prior
  // to removing a notice from the page
  noticeRemove: function(notice, callback) {
    return notice.animate(
      {opacity: '0', height: '0px'}, 
      {duration: settings.noticeFadeTimeout, complete: callback }
    );
  },
  // notices matching the priorities in the array will not be closed
  // when the displayTimeout is reached
  doNotClose: ['danger', ],
  // the speed of the 'fadeIn/fadeOut' calls
  // if you override noticeDisplay/noticeRemove then this may not have
  // any affect.
  noticeFadeTimeout: 'slow',
  // how long should a notice display on the screen - set to 0 to disable
  displayTimeout: 3500,
  // if you have a stylesheet with custom styles for growl, provide a url
  // and the stylesheet will be auto-appended to the <head />
  defaultStylesheet: null,
}
        

Changelog

2014-02-02
  • Rewrote jQuery Growl for v2.0.0
  • jQuery Growl is now pre-packaged with Bootstrap 3 support
  • Uses Bootstrap Panels by default, and Bootstraps primary, info, success, warning, danger classes as priorities.
2008-09-04
  • Added the 'noticeDisplay' function so you can override the display functionality
  • Added the 'noticeRemove' function so you can override the remove functionality
  • Added the 'displayTimeout > 0' functionality, so notices can be 'permanent' if so desired.
2008-04-20
  • Added a 'slide up' style effect, by shrinking the notification as it fades out.
2008-04-19
  • Released as 1.0.0-preview, and 1.0.0-b2