Notiny

v0.0.4 Download

Follow @4ndv Star Fork

Installation

Install with bower or download manually:

$ bower install notiny --save

Add styles and scripts to your page:

Don't forget to load jQuery before notiny.min.js!

Usage

Basic notification:

$.notiny({ text: 'Hello, world!' });

Run

Notification with image:

$.notiny({ text: 'Hello, image!', image: 'https://octodex.github.com/images/privateinvestocat.jpg' });

Run

Notification on top right corner:

$.notiny({ text: 'Notification at top right', position: 'right-top' });

Run

Notification with auto width:

$.notiny({ width: 'auto', text: 'Not too long text' });

Run

Fluid notification on top:

$.notiny({ text: "Top Notiny with fluid width", position: 'fluid-top' });

Run

Fluid notification on bottom:

$.notiny({ text: "Bottom Notiny with fluid width", position: 'fluid-bottom' });

Run

Options

All Notiny options:

{
  // Image path (http/base64)
  image: undefined,
  // Position on screen, values: right-bottom, right-top, left-bottom, left-top, fluid-top, fluid-bottom
  position: 'right-bottom',
  // Theme
  theme: 'dark',
  // Template, these classes should ALWAYS be there
  template: '',
  // css width
  width: '300',
  // Text that will be displayed in notification
  text: '',
  // Display background or not, if false, background: transparent;
  background: true,
  // Hide automatically
  autohide: true,
  // Hide by click
  clickhide: true,
  // Autohide delay
  delay: 3000,
  // Enable animations
  animate: true,
  // Show animation string
  animation_show: 'notiny-animation-show 0.4s forwards',
  // Hide animation string
  animation_hide: 'notiny-animation-hide 0.5s forwards'
};

Themes

Default themes:

Dark (default)

Light

Creating custom themes:

Example:

$.notiny.addTheme('dark', {
  notification_class: 'notiny-theme-dark notiny-default-vars'
});

.notiny-theme-dark {
  background-color: #202020;
  color: #f5f5f5;
}

Options:

{
  /*

    Blocks order:

    | container
    | - base
    | -- image
    | -- text
    | - base
    | -- image
    | -- text
    | ...

  */

  // Classes that will be added to div's

  container_class: '',
  notification_class: '',
  image_class: '',
  text_class: ''
}

Custom animations

You can use your own show and hide css3 animations. If user's browser does not support css3 animations, jQuery fadeIn and fadeOut will be used as fallback.

CSS

@keyframes custom-hide-animation {
  0% {
    transform: scale(1, 1);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.5, 1.5);
  }
}

JavaScript

$.notiny({
  text: 'Custom hide animation',
  animation_hide: 'custom-hide-animation 0.5s forwards'
});

Run

Created by Andrey Viktorov, 2015
From russia with <3

Site built with awesome Semantic UI