Motice

v1.0.4

Just a little (only 5kb compressed) notifications plugin

Download
Follow @Levin Van Star Fork

Installation

Add styles and scripts to your page:

<script src="/path/to/motice.min.js"></script>
<link href="/path/to/motice.css" rel="stylesheet" />
  • Don't forget to load jQuery before motice.min.js!
  • motice.js must be put inside the body tag.

Or, load Motice via require.js


define(['jquery','motice'],function($,Motice){
    Motice({ text:'Hello, Motice!' });    
});

Usage

Basic notification:

Motice({ text: 'Hello, Motice!' });
Run

Forcing close:

Motice({ text: 'Hello, Motice!' });
Run
Close!

Notification with custom image:

Motice({ text: 'Motice with custom image!', image: 'http://faso.me/favicon.ico' });
Run

Notification with title:

Motice({ title:'Motice' text: 'With title !'});
Run

Notification with close button:

Motice({ title:'Motice' text: 'With close button !', closeButton:true });
Run

Notification with progress bar counting for hiding:

Motice({ title:'Motice' text: 'With progress bar !', progressBar:true });
Run

Notification on specified position: 

Motice({ title:'Motice Position',text: 'Notification at top right', position: 'right-top' });
Run

Notification with auto width:

Motice({ width: 'auto', text: 'Not too long text' });
Run

Notification with specified effect: 

Motice({ title:'Motice effect',effect: 'jelly', text: 'Notification with jelly effect' });
Run

Options

All Motice options:

{
  // background image path (http/base64)
  image: undefined,
  // Position on screen, values: right-bottom, right-top, left-bottom, left-top, fluid-top, fluid-bottom, center-top, center-bottom
  position: 'right-bottom',
  // Theme, values: default, info, warning, success, error
  theme: 'default',
  // Template, these classes should ALWAYS be there
  template:   '
' + 
                '
' +
                '' +
                '
' +
                '
' + 
            '
',
  // hard-code css width, use theme specifed with by default
  width: false,
  // Text that will be displayed in notification
  text: '',
  // Title
  title: null,
  // Hide by click
  clickHide: true,
  // Autohide delay timeout
  timeOut: 4500,
  // autoHide delay timeout after hover out the notification
  timeOutAfterHoverOut:2000,
  // Enable animation effects, default is 'default', another effect called 'jelly' is also provided inernally.
  effect: 'default',
  // We will put an effect class to the notification dom combining 'effectPrefix' and 'effect'
  effectPrefix:'motice-effect-',
  //progress bar
  progressBar: false,

  //close button
  closeButton: false,

  //callbacks
  onShown: function(){},
  onHidden:function(){},
  onClick: null
};

Themes

Default themes:

Dark (default)
info
warning
success
error

Creating custom themes:

Example:

Motice.addTheme('dark', {
    classes: 'motice-theme-dark'
});
.motice-theme-dark {
  background-color: #202020;
  color: #f5f5f5;
}

Options:

{
  /*

    Blocks order:

    | container
    | - item
    | -- progress
    | -- close-button
    | -- title
    | -- text
    | - item
    | -- progress
    | -- close-button
    | -- title
    | -- text
    | ...

  */

  // Classes that will be added to base element

  classes: ''
}

Custom animation effects

You can use your own show and hide css3 animations. If user's browser does not support css3 animations, simple hide/show 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);
  }
}
@keyframes custom-show-animation {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
.motice-effect-custom.motice-hide {
    animation: custom-hide-animation 0.5s forwards;
}
.motice-effect-custom.motice-show {
    animation: custom-show-animation 0.5s forwards;
}

JavaScript 

Motice({
  text: 'Custom hide animation',
  effect: 'custom'
});
Run

Build and run this site

To build Motice from sources you need to install Gulp 

$ npm install gulp-cli -g

Then navigate in terminal to downloaded sources and install some required modules 

$ npm install

Then run Gulp, and preview at http://localhost:4000/site/ 

$ gulp

You can take compressed and optimized files from dist folder

Created by Levin Van, 2015 -
From China

Site built with awesome Semantic UI