Sliding Top Notification Plugin - jQuery Myalert

Sliding Top Notification Plugin - jQuery Myalert
File Size: 4.94 KB
Views Total: 279
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Myalert is a jQuery notification plugin for creating animated, sticky, auto-dismissable top notification bars that use Bootstrap's Background Color CSS utilities by default.

How to use it:

1. Load the Myalert's stylesheet and Bootstrap's CSS (OPTIONAL) in the header.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/css/myalert.css" />

2. Load jQuery library and the Myalert's JavaScript right before the </body> tag.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/myalert.js"></script>

3. Insert your own message to the notification bar.

Myalert({
  message: "Hello World!"
});

4. Determine the notification type:

  • info
  • warning
  • danger
  • success
Myalert({
  message: "Hello World!",
  type: 'success'
});

5. Create your own notification styles if you don't want to use Bootstrap.

.bg-success {
  /* success styles here */
} 

.bg-danger {
  /* danger styles here */
} 

.bg-warning {
  /* warning styles here */
} 

.bg-info {
  /* info styles here */
} 

.bg-dark  {
  /* default styles here */
} 

6. Set the duration of the notification bar, meaning it will automatically dismiss itself after this timeout:

Myalert({
  message: "Hello World!",
  timeout:2000
});

7. Customize the animation speed:

Myalert({
  slideDown:500,
  slideUp:500
});

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