Seriously simple notifications for jQuery
CSS JavaScript Ruby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
libs
src
test
.gitignore
Gruntfile.js
LICENSE-GPL
LICENSE-MIT
demo.css
index.html
package.json
readme.md
sticky.scss

readme.md

Sticky

A simple, lightweight notification plugin for jQuery.

Overview

Sticky allows developers to quickly and easily display messages to users via a simple and streamlined notification center. Sticky is unique in that it groups multiple messages together to help keep your beautiful interface clutter-free.

Sticky is only 1.3k for the minified version and 3.1k for the full.

Installation

Using Sticky is easy.

  • Include jQuery, sticky.min.js, and sticky.css
  • Send messages!

Usage

Plain note, default options

$.sticky('I am a plain text note. Nothing special about me.');

Plain note, default options, html content

$.sticky('<b>Greetings</b>. I am an HTML note.');

Plain note, default options, custom callback function

$.sticky('I am a plain text note. I'll tell you good job!.', callback);

Overriding classList and speed

$.sticky('Upload complete', {classList: 'success', speed: 'slow'});

Overriding position

$.sticky('I'm at the bottom! Look at me!, {position: 'bottom-center'});

Overriding classList with warning class.

$.sticky('Careful, there be dragons ahead', {classList: 'warning'});

Overriding classList, making note stay open.

$.sticky('I give up, it just won't work.', {classList: 'important', autoclose: 0});

Overriding classList, allowing no duplicates.

$.sticky('I just wanted you to know', {classList: 'info', allowdupes: false});

Sticky takes an optional callback function which receives an object containing information about the note just added:

$.sticky(note, options, function(response) {
    JSON.stringify(response);
});

var response = {
    'id': uniqID, // Generated ID, a hash of the message contents.
    'duplicate': duplicate, // whether this note was a duplicate
    'displayed': display, // whether the note was displayed
};

Configuration

var options = {
    position: 'top-right', // top-left, top-center, top-right, bottom-left, bottom-center, or bottom-right
    speed: 'fast', // animations: fast, slow, or integer
    allowdupes: true, // true or false
    autoclose: 5000,  // delay in milliseconds. Set to 0 to remain open.
    classList: '' // arbitrary list of classes. Suggestions: success, warning, important, or info. Defaults to ''.
};

Building locally, running unit tests

So you'd rather build your own copy of Sticky, or want to run the unit tests? To get started running them please take the following steps:

image

Okay, for real. Do these things:

  1. Download this repo
  2. Run npm install
  3. Run grunt

This will compile the new CSS and JS files into the dist directory.

Contributing

You are invited to contribute code and suggestions to this project. The more the merrier.

Project Info

3rd party libraries required:

  • jQuery: MIT/GPL license

Custom bits:

MIT/GPL license

Bitdeli Badge