Flat Sliding Top Notification Plugin For jQuery - overHang.js

Flat Sliding Top Notification Plugin For jQuery - overHang.js
File Size: 208 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="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,

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

Change logs:

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.