A Simple jQuery Library for Growl Notification Plugin | notifyMessage

Notify message is a simple jQuery library to create a simple and light push notification on your website!

growl style notifications, growl notification example, growl plugin, alert plugin jquery, notification success, notification popup example, jquery notification popup

How Does This Work?

When the jquery method “runNotify()” is called, a notification is displayed at the top right with the text scrolling.

What are the display modes?

There are three methods available:

  • Fixed: This allows the notification to be kept open and gives the user the ability to close it.
  • Notification: The notification is displayed and disappears after a period of time specified by the user.
  • Read more: If the text is too large, you can decide to include a button to display the entire text, while displaying the first 30 characters in the notification.

How can I set library options?

At the moment, the options are as follows:

  • Level Message: [levelMessage]
  • Type: [type]
  • Message: [message]
  • Message Title: [messageTitle]
  • ReadMoreMessage: [readMoreMessage]
  • Timer: [timer]

How to make use of it:

1. Make certain you may have the jQuery library loaded correctly within the doc.

<script src="/path/to/cdn/jquery.min.js"></script>

2. Load the jQuery notifyMessage plugin’s files.

<!-- Stylesheet -->
<link rel="stylesheet" href="css/notifyMessage.css">
<!-- JavaScript -->
<script src="js/notifyMessage.js"></script>

3. Display a default notification message on the web page that slides out after 3 seconds.

runNotify({
  message: 'This is a notification message',
  messageTitle: 'Message title'
});

4. Specify the timer in milliseconds for the timeout.

runNotify({
  message: 'This is a notification message',
  timer: '5000'
});

5. You can even create a ‘Sticky’ notification message that’s all the time seen till you click on the shutter button.

runNotify({
  message: 'This is a notification message',
  type: 'fixed'
});

6. The plugin makes use of Bootstrap 4’s contextual classes for the notification sorts.

runNotify({
  message: 'Success message',
  levelMessage: 'success'
});

runNotify({
  message: 'Error message',
  levelMessage: 'error'
});

runNotify({
  message: 'Warning message',
  levelMessage: 'warning'
});

7. Uses the ‘Read More’ mode to open the complete notification message in a modal window.

runNotify({
  type: 'readmore',
  messageTitle: 'Message title',
  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
});

Growl Notification Plugin, notify message Github


See Demo And Download

Official Website(silentgrave): Click Here

This superior jQuery/javascript plugin is developed by silentgrave. For extra Advanced Usage, please go to the official website.

Share