Author: | pehaa |
---|---|
Views Total: | 684 views |
Official Page: | Go to website |
Last Update: | October 7, 2018 |
License: | MIT |
Preview:

Description:
A lightweight, simple-to-use JavaScript plugin to create temporary or permanent notification messages sliding out from the right side of the webpage.
How to use it:
Install & download the library with NPM:
# NPM $ npm install simple-notifications-solution --save
Import the necessary JavaScript and CSS files into the page.
<link rel="stylesheet" href="/path/to/Notifications.css"> <script src="/path/to/Notifications.js"></script>
Create a new notifications object and initialize the notification library.
var notifications = new Notifications(".notification"); notifications.init();
Create a permanent notification message that will always stay on the screen until you click the close button.
<p class="notification"> This is a notification <button class="delete" type="button">Close</button> </p>
Create a toast-like temporary notification message that will auto dismiss itself after a timeout.
<p class="notification" data-close="self"> This is a toast notification </p>
Default options to customize the notification messages.
notifications.init({ // animation animationInName: 'slidein', animationOutSelf: 'slideout 1s', animationOutClose: 'fadeout 1s', // selector of close button closeButtonSelector: '.delete', // click to close closeSelfOnClick: true, // start top position startTopPosition: 8, // space between messages gap: 8, // delay in milliseconds delayFunction: function delayFunction(i) { return 3 + 2 * i; }, // top transition topTransition: 'top .75s ease-in-out' });
Changelog:
10/07/2018
- add startTopPosition option
How to style it? Could you show simple CSS style for notifications?