🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Stickr is a very small jQuery plugin for creating floating stickers with custom messages that can be used as alert messages or growl-style notifications on your webpages.

Notification

Documentation

jQuery.stickr plugin

[![GitHub release](https://img.shields.io/github/release/instrumentisto/jquery-stickr.svg)](https://github.com/instrumentisto/jquery-stickr) [![Bower version](https://img.shields.io/bower/v/jquery-stickr.svg)](https://github.com/instrumentisto/jquery-stickr) [![Bower license](https://img.shields.io/bower/l/jquery-stickr.svg)](http://docs.jquery.com/License) [![Dependency Status](https://gemnasium.com/instrumentisto/jquery-stickr.svg)](https://gemnasium.com/instrumentisto/jquery-stickr)

jQuery plugin that allows to create lightweight stickers on HTML page. You may use them for error messages, system notifications and a lot of other UI stuff.

Installation

Include script after the jQuery library:

<script src="/path/to/jquery.js"></script> <script src="/path/to/jquery.stickr.js"></script> <link rel="stylesheet" href="/path/to/jquery.stickr.css">

Usage

Plugin provides next API:

$sticker = $.stickr({   afterOpen: function($sticker) {     console.log($sticker, 'is rendered');   },   beforeClose: function($sticker) {     console.log($sticker, 'will be closed in 500 ms');   },   classes: 'some additional classes here',   closingDuration: 500,   // default is 0   group: 'my-stickrs',    // or $('#my-stickrs'), default is 'jq-stickrs'   message: '<i>text<br>to be displayed</i>',   ttl: 5000,              // default is 0 which means "forever"   withCloseButton: false  // do not draw "Close" button, default is true });

Checkout demo.html for more interactive examples of usage.

Stylization

No direct styles manipulation are applied from JS code. Instead of that, JS code of plugin manipulates only with classes of elements, so visual behaviour of elements can be fully reimplemented via CSS styles as desired.
You may implement your own total stylization giving desired styles for .jq-stickrs, .jq-stickr, .jq-stickr--closable and jq-stickr__close classes, just check jquery.stickr.css to see how they fit to each other. Or you may use already defined styles in jquery.stickr.css as starting point.


You May Also Like