Flat Sliding Top Notification Plugin For jQuery - overHang.js

File Size: 208 KB
Views Total: 4222
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

  activity : "notification",
  message : "This is a notification message"

3. Available options.


  // 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 () {}


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


  • 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


  • update font to scale respectively to smaller windows


  • direct access to values in the callback


  • bugfix


  • HTML argument option + font awesome


  • added callback option


  • bugfix


  • fixed minor bug


  • 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.