Minimal jQuery Plugin For Top Notification Bar - message.js

message.js is a very small jQuery plugin used to create a responsive, customizable notification bar that will stick to the top of the screen when scrolling down.

Features:

• Auto dismiss after 5 seconds.
• 4 notification types: error, success, warning, info.
• Use Font Awesome 4 icons.
• Callback function when the message is closed.

How to use it:

1. Include Font Awesome 4 and the jQuery message.js plugin's stylesheet in the head section of the html page.

<link rel="stylesheet" href="font-awesome.min.css">
<link rel="stylesheet" href="message.css">

2. Include jQuery library and the jQuery message.js plugin's script at the bottom of the page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="message.js"></script>

3. Create a custom top notification bar that will auto dismiss after 5 seconds.

message({
  id: "myMessage",
  text: "Message HERE",
  type: "info"
})

4. Make the notification bar always be displayed on the screen.

message({
  id: "myMessage",
  text: "Message HERE",
  type: "info",
  autohide: false
})

5. Execute a callback after the top notification is closed.

message({
  id: "myMessage",
  text: "Message HERE",
  type: "info",
  autohide: false,
  hide: function(){ 
    alert("the message is closed");
  }
})

---

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