Page-level Push Notification JavaScript Library – Page-Notifications

Preview:

Description:

A vanilla JavaScript plugin to create page-level notifications similar to the web push notification.

Features:

• 2 themes: dark and light.
• 4 notification types: info, success, warning, error.
• Temporary notification with a countdown timer.
• Auto resets the countdown on hover.

How to use it:

Place the JavaScript file page-notifications.js and stylesheet page-notifications.css in the html.

<link rel="stylesheet" href="page-notifications.css">
<script src="page-notifications.js"></script>

Initialize the Page-Notifications.

var notifications = new PageNotifications()

Create the notifications. Possible parameters:

title: notification title

content: notification message

type: info, success, warning or error

duration: timeout in milliseconds. sets to false to make the notification STICKY.

notifications.push(title,content,type,duration);

Use the dark theme instead.

var notifications = new PageNotifications({
    theme: 'dark'
})

Set the parent container. Default: the whole body.

var notifications = new PageNotifications({
    parentDiv: 'container'
})

Close all notifications.

notifications.closeAll();