WatNotif.js

WatNotif is an elegant pure JS & CSS notification plugin.
Easily configurable and customizable, keep-on-hover and close built-in functionalities.

View on GitHub See demos

Table of content

  1. Choose your theme and include its stylesheet
  2. Include the plugin's javascript
  3. Set the general settings
  4. Declare and define a notification
  5. Bind a notification to an event
  6. Browser compatibility table

Current themes

COMING SOON List

To get WatNotif, download this repository from Github OR use bower.


bower install watnotif

1. Include the stylesheet you want in the HTML head of the page.

Example:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        
        <!-- the Notif stylesheet you choosed -->
        <link rel="stylesheet" type="text/css" href="/dist/<the style you want>/<the file you want>.min.css" />
        
        <!-- your own stylesheets -->
    </head>
    <body>
    <!-- your body -->
    </body>
</html>

Note: There are different stylesheets, based on horizontal positioning, vertical positioning and animation effect. By convention, a CSS file will be named watnotif.<horizontal position>-<vertical position>-<effect>.css.

You have to include only one of them depending on how you want to display the notifications on your website.

2. Include the javascript at the end of the body.

Example:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <!-- your meta, styles, favico, and so on -->
    </head>
    <body>
        <!-- your body -->
        
        <!-- the Notif plugin script -->
        <script type="text/javascript" src="/dist/js/watnotif-1.0.min.js"></script>
    </body>
</html>

3. Set the general settings for all of our notifications (duration in milliseconds)

This is optional as there is a default value and the duration is manageable through the .display(duration) method.

If you set the duration value to less than 1 millisecond, it won't be dismissed automatically.

Example:


document.addEventListener('DOMContentLoaded', function() { // make sure the DOM is fully loaded before starting anything
    Notif.setWrapperOptions({ duration: 4000 });
}, false);

4. Define easily your notifications

Examples:


var successNotif = new Notif("Yay, this message notifies you about the success of whatever!", "success");
var errorNotif = new Notif("Oups, this is a notification you usually hope to not display.", "error");
var confirmedNotif = new Notif("Let's just confirm that whatever happened.", "confirmed");
var defaultNotif = new Notif("This message is just meant to say hi; so \"hi!\"", "default");

5. Bind the notifications to something.

 
<!-- in your HTML body -->
<button id="my-button">Gimme my notif</button>
        
 
// In your own javascript
var myNotif = new Notif('Hey, what about this very nice notification, with a <a href="#">link</a> and everything?', "default");
document.getElementById('my-button').addEventListener('click', function(e) {
myNotif.display(3500);
/* You could also chain everything if it's a one time notification, such as:
* new Notif('This is a one time notification, so no need to keep it in a JS variable.', "confirmed").display(4000);
*/
});

6. Browser compability

Compatible with all major browsers; details coming soon.

Licence

MIT License, Copyright (c) 2017 Rémi Carles. Read licence details