Flat Sliding Top Notification Plugin For jQuery - overHang.js

overHang.js is a small jQuery plugin that helps you create flat style, sliding notification bars at the top of a given container to replace the default alert, prompt, confirm dialog boxes. 

How to use it:

1. Load the jQuery overHang.js plugin after jQuery library but before the closing body tag.

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

2. Create a basic notification bar that displays at the top of your webpage when triggered.

$("body").overHang({
  activity : "notification",
  message : "This is a notification message"
})

3. Available options.

$("#SELECTOR").overHang({

  // success, error, warn, info, prompt and confirm
  type         : "success",

  // notify message
  message      : "This is an overhang.js message!",

  // text color
  textColor    : "#FFFFFF",

  // confirm text
  yesMessage   : "Yes",

  // cancel text
  noMessage    : "No",

  // text color for yes button
  yesColor     : "#2ECC71",

  // text color for no button
  noColor      : "#E74C3C",

  // The duration in seconds to show the alert for
  duration     : 1.5,

  // The speed to drop and raise the alert in milliseconds.
  speed        : 500,

  // Set this to true if you would like the user to have to close the alert rather than it disappearing by itself. 
  closeConfirm : false,

  // Set this to true if you would like your message in all uppercase letters.
  upper        : false,

  // JQuery UI easing option for the drop effect.
  easing       : "easeOutBounce",

  // if the message argument should be interpreted as HTML
  html         : false,

  // shows overlay
  overlay      : false,

  // custom CSS class
  customClasses : "",

  // Callback
  callback     : function () {}
  
})

Changelog:

v1.0.7 (2020-05-12)

• Custom CSS Classes

v1.0.6 (2020-05-06)

• Remove default require Roboto

v1.0.5 (2017-10-08)

• Added overlay option

2017-10-06

• Removed bower support
• Forces lower case for type name
• Updated the default theme (fallback if the type argument is not supplied)
• Allow usage of setting a duration and using the closeConfirm option simultaneously

2017-02-03

• update font to scale respectively to smaller windows

2016-08-28

• direct access to values in the callback

2016-08-26

• bugfix

2016-08-12

• HTML argument option + font awesome

2016-08-04

• added callback option

2016-07-09

• bugfix

2015-07-05

• fixed minor bug

2015-06-28

• Added duration attribute

---

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