Simple Plain Feedback Message Plugin - jQuery messageFlow

messageFlow is a small jQuery notification plugin used to create Android toast-style feedback messages with stackable and auto-fade capabilities.

How to use it:

1. Import jQuery JavaScript library together with the jQuery messageFlow plugin's JavaScript and CSS files into the page.

<link href="jquery.messageflow.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.messageflow.js"></script>

2. Initialize the messageFlow plugin.

mf = new MessageFlow();

3. Specify the container where you want to place the messages.

// body
mf.createContainer();

// id: default messageflow_container0
// watchDuration: default 5000
// fadeoutDuration: default 5000
mf.createContainer(id, watchDuration, fadeoutDuration)

4. The JavaScript to show feedback messages on the page.

// error
mf.addMessage('error', 'Hello World!');

// success
mf.addMessage('success', 'Hello World!');

// warning
mf.addMessage('warning', 'Hello World!');

info
mf.addMessage('info', 'Hello World!');

5. Override the default CSS rules to create your own styles.

div#messageflow_container0 {
  position: fixed;
  bottom: 15px;
  left: 15px;
}

div.messageflow_msg {
  padding: .5em .5em .5em .5em;
  height: 3em;
  width: 300px;
}

div.messageflow_msg_error {
  background-color: rgba(255, 100, 100, 1);
  color: rgb(120, 0, 0);
}

div.messageflow_msg_warning {
  background-color: rgba(255, 120, 0, 0.3);
  color: rgb(120, 60, 0);
}

div.messageflow_msg_success {
  background-color: rgba(100, 255, 100, 1);
  color: rgb(0, 120, 0);
}

div.messageflow_msg_info {
  background-color: rgba(100, 100, 255, 1);
  color: rgb(0, 0, 120);
}

---

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