Growl-style Sliding Notification Plugin For jQuery - flashMessage

flashMessage is a super tiny jQuery plugin that helps create growl-style sliding notification messages on your web application. Easily customizable to match your style.

How to use it:

1. Download and include the jQuery flashMessage plugin after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.flashMessage.js"></script>

2. Create a basic 'Success' flash message on your webpage that will automatically slide out after 2500ms.

$("body").flashMessage({
  status: "ok",
  message: "Success"
});

3. The basic CSS styles for the flash message.

.j-flash-message {
  position: fixed;
  top: 100px;
  right: -310px;
  width: 300px;
  min-height: 60px;
  background-color: #ffffff;
  border: 1px solid #f1f1f1;
  padding: 10px 20px;
  z-index: 1000000;
  box-shadow: 5px 3px 0 rgba(0, 0, 0, 0.15);
}

.j-flash-message .j-flash-message__in {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
}

4. Style the 'Success' flash message.

.j-flash-message_type_ok .j-flash-message__in { background-color: #00aa00; }

5. You can also add any other notification types in the CSS as shown below.

.j-flash-message_type_error .j-flash-message__in { background-color: #aa0000; }

---

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