Minimal Sliding Notification Plugin For jQuery - EasyAlertJS

EasyAlertJS is a jQuery plugin that lets you create a customizable alert message sliding from the 'Bottom Right' of the webpage. The plugin uses CSS3 transforms and transitions for the smooth sliding animation. 

How to use it:

1. Place the required EasyAlertjs.css in your document's head section.

<link href="EasyAlertjs-1.0.0.css" rel="stylesheet">

2. Place jQuery library and the JavaScript file EasyAlertjs.js right before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="EasyAlertjs-1.0.0.js"></script>

3. Create a custom alert message that will auto dismiss after 5 seconds.

EasyAlert.Easy({
  text : "Hello World!",
  time : "5000"
});

4. Set the text color and background color as this:

EasyAlert.Easy({
  text : "Hello World!",
  time : "5000",
  bkgrndColour : "#222",
  textColour : "#fff"
});

5. Override the default notification styles as you seen in the EasyAlertjs.css.

.Easy {
  width: 200px;
  height: auto;
  border: 1px solid #666666;
  border-radius: 2px;
  background-color: cadetblue;
  color: #FFFFFF;
  padding: 10px 5px;
  position: absolute;
  right: -250px;
  bottom: 10px;
  -webkit-transition: all 1.0s ease;
  -moz-transition: all 1.0s ease;
  transition: all 1.0s ease;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  box-shadow: 0px 0px 2px #333333;
  text-align: center;
  transform: scale(1);
  opacity: 1;
}

---

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