Tiny jQuery Plugin For Informative Messages In The Browser - Growler

jQuery Growler is a lightweight and easy-to-setup jQuery plugin for creating Informative Messages which slide in and out from the upper right corner of the page. All the messages can be styled with CSS so that you can easily create a number of message types like warning, alert, notification, error, etc.

Installation:

# Yarn
$ yarn add jquery.growl

# NPM
$ npm install jquery.growl --save

How to use it:

1. Include jQuery javascript library and jQuery Growler plugin on the page

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js' type='text/javascript'></script>
<script src='javascripts/jquery.growl.js' type='text/javascript'></script>

2. Include jQuery Growler CSS on the page. There are 3 predefined message types in this CSS file: error, notice and warning. You can customize them or create your own.

<link href='stylesheets/jquery.growl.css' rel='stylesheet' type='text/css'>

3. Create a link to trigger the message. You can also set to display the messages on page load.

<a class='error' href='#'>Error!</a>

4. Call the plugin to display a basic growl notification with custom title & message.

$.growl({ 
title: "jQuery Plugins", 
message: "www.jQueryScript.Net!" });

5. More customzization options.

// namespace
namespace: 'growl',

// duration time in ms
duration: 3200,

// close character
close: "×",

// customize the position of the growl alerts
// 'tl' / 'tr' / 'bl' / 'br' / 'tc' / 'bc'
location: "default",

// customize the styling of the alerts
// 'default' / 'error' / 'notice' / 'warning'
style: "default",

// customize the sizing of the alerts
// 'small' / 'medium' / 'large'
size: "medium",

// while hovering over the alert, prevent it from being dismissed
delayOnHover: true,

// whether the alert should be fixed rather than auto-dismissed
fixed: false

Change logs:

v1.3.5 (2017-12-30)

• repackaging to fix compilation bug with babel

v1.3.4 (2017-12-23)

• config babel and babel transpile fixing uglify

v1.3.3 (2016-08-03)

• packaging for latest build and bumping deps

v1.3.2 (2016-08-03)

• dependency upgrades and optional callback

v1.2.8 (2015-05-13)

• added in support for clicks

v1.2.7 (2015-05-13)

• update.

v1.2.1 (2014-09-08)

• Fixed and update.

v1.1.9 (2014-07-20)

• update.

v1.1.8 (2014-05-20)

• update.

v1.1.6 (2014-02-15)

• update.

v1.1.5 (2014-02-15)

• fixing the namespace

v1.1.3 (2013-09-02)

• updated to the latest version

v1.1.2 (2013-08-26)

• added a fix for IE

---

This awesome jQuery plugin is developed by ksylvest. For more Advanced Usages, please check the demo page or visit the official website.