Growl Notification Plugin - jQuery notifyMessage

File Size: 20.1 KB
Views Total: 2324
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Growl Notification Plugin - jQuery notifyMessage

notifyMessage is a simple, lightweight jQuery plugin used to create growl-style sliding notification messages.

Note that the plugin has removed Bootstrap dependency since v1.1.0.

How to use it:

1. Make sure you have jQuery library loaded properly in the document.

<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 page that automatically slides out after 3 seconds.

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

4. Specify the timer in milliseconds for the timeout. In this example, the notification message will automatically dismiss after 5 seconds.

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

5. You can also create a 'Sticky' notification message that is always visible until you click the close button.

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

6. The plugin uses Bootstrap 4's contextual classes for the notification types.

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 full 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.',
});

8. Change the position of the notification.

  • top-right (default)
  • bottom-right
  • top-left
  • bottom-left
runNotify({
  message: 'This is a notification message',
  timer: '5000',
  position: 'top-left',
});

Changelog:

2021-09-21

  • Added position options.

2021-08-20

  • Bootstrap dependency removed
  • Code cleanup

This awesome jQuery plugin is developed by silentgrave. For more Advanced Usages, please check the demo page or visit the official website.