https://github.com/longlostnick/bootstrap-growl

Pretty simple jQuery plugin that turns standard Bootstrap alerts into "Growl-like" notifications.
https://github.com/longlostnick/bootstrap-growl

Last synced: 19 days ago
JSON representation

Pretty simple jQuery plugin that turns standard Bootstrap alerts into "Growl-like" notifications.

• Host: GitHub
• URL: https://github.com/longlostnick/bootstrap-growl
• Owner: longlostnick
• License: mit
• Created: 2012-08-09T16:19:36.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2018-01-04T05:44:30.000Z (almost 7 years ago)
• Last Synced: 2024-05-20T01:13:54.407Z (6 months ago)
• Language: JavaScript
• Homepage: http://ifightcrime.github.io/bootstrap-growl
• Size: 105 KB
• Stars: 807
• Watchers: 46
• Forks: 212
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# bootstrap-growl

Pretty simple jQuery plugin that turns standard Bootstrap alerts into hovering "Growl-like" notifications.

## Demo

I have a basic demo set up at jsfiddle for the time being which you can view here: http://jsfiddle.net/ifightcrime/Us6WX/1008/

## Features

* Uses standard [Twitter Bootstrap alerts](http://twitter.github.com/bootstrap/components.html#alerts) which provides 'info', 'danger', and 'success' styles.

* Multiple growls called consecutively are stacked up one after another in a list.

* Automatically fades growls away after a default of 4 seconds.

## Dependencies

1. Latest version of jQuery. (tested on 1.11.0)

2. [Twitter Bootstrap](http://twitter.github.com/bootstrap/index.html). (current rev tested with 3.3.1)

## Usage

Include the dependencies and `jquery.bootstrap-growl.min.js` into your page and call the following:

```javascript

$.bootstrapGrowl("My message");

```

## Available Options

By default, growls use the standard 'alert' Bootstrap style, are 250px wide, right aligned, and are positioned 20px from the top right of the page.

```javascript

$.bootstrapGrowl("another message, yay!", {

  ele: 'body', // which element to append to

  type: 'info', // (null, 'info', 'danger', 'success')

  offset: {from: 'top', amount: 20}, // 'top', or 'bottom'

  align: 'right', // ('left', 'right', or 'center')

  width: 250, // (integer, or 'auto')

  delay: 4000, // Time while the message will be displayed. It's not equivalent to the *demo* timeOut!

  allow_dismiss: true, // If true then will display a cross to close the popup.

  stackup_spacing: 10 // spacing between consecutively stacked growls.

});

```

Note: Previous ```top_offset``` is not broken by this latest change.

## Additional Contributors

* Jose Martinez https://github.com/callado4

* Lloyd Watkin https://github.com/lloydwatkin

* TruongSinh Tran-Nguyen https://github.com/tran-nguyen