miniNotif
Display custom notifications easily
Usage
1. Import js and css
<script src="path/to/miniNotif.js"></script> <link href="path/to/miniNotif.css" rel="stylesheet" />You can use jsDelivr links to keep updated your miniNotif : https://www.jsdelivr.com/package/gh/TheRolfFR/miniNotif
2. Initalize miniNotif in your javascript
miniNotif.init();You can initialize with a parameter, the name of the selector where you want your notifications to pop in or the object himself :
miniNotif.init('#element'); // or miniNotif.init(document.getElementById('element'));3. Diplay a new notification:
The addNotif function handles theses parameters in an object :
| Parameter name | Required | Default value | Type | Description |
|---|---|---|---|---|
| text | X | String | Text of the notification | |
| process | true | Boolean | Hide immediatly the notif after if true | |
| icon | String | Icon of the notification | ||
| color | String | Color of the notification (CSS property) | ||
| background | String | background of the notification (CSS property) | ||
| fadeinduration | 300ms | Number | Duration in milliseconds of the fade in effect | |
| visibleduration | 200ms | Number | Duration in milliseconds where it is visible |
Example :
miniNotif.addNotif({ text: 'New notification !!!', icon: '(!)', color: 'white', background: 'linear-gradient(135deg, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 100%);', fadeinduration: 250, visibleduration: 1000 });
