A simple jQuery plugin to display sleek, instant notifications, confirmations or prompts inside a given element.
You can install overhang through npm:
$ npm install overhang
Alternatively, you can download the files in the
dist/ folder manually.
Include a reference to the latest version of jQuery and jQuery UI. — The specific jQuery UI components required are: "effect.js" (Effects Core)
overhang.js has 3 primary features - notifications, prompts and confirmations. Most of the options are customizable for all of these features.
This is the type of the notification that you want to display.
The preset types are
If you would like to use a custom theme, leave this parameter blank and follow the rules for setting a custom theme.
primary - The background color of the alert.
accent - The bottom border color.
If you want to display either a prompt or confirmation alert, set the type to
confirm, respectively. Prompts and confirmations both have preset themes, but you can customize them by using the
Any additional CSS classes to add to the overhang element, separated by spaces. Useful for specifying fonts and further customizations. The default is
The color of the text. The default is set to white.
The message to be displayed in your alert.
The duration in seconds to show the alert for. The default is
The speed to drop and raise the alert in milliseconds. The default is set to
Set this to
true if you would like the user to have to close the alert rather than it disappearing by itself. The default is set to
Set this to
true if you would like your message in all uppercase letters. The default is set to
jQuery UI easing option for the drop effect. The default is set to
This is a boolean if the
message argument should be interpreted as HTML. The default value is set to
Set this to
true if you would like to have an overlay displayed with your alert. The default value is set to
false. You can also pass in a value to the
overlayColor argument to specify the color of the overlay. The default is set to black.
Basic Alert Notification Example
// Some error notification;
When using prompts, all you need to do is set the
type parameter to
// Some prompt notification;
When using confirmations, there are additional options that you can customize.
This is the text on the "true" button that would to display. The default is set to
This is the text on the "false" button that would to display. The default is set to
This is the color of the "true" button. The default is set to
This is the color of the "false" button. The default is set to
// Some confirmation;
confirm features both allow you to get data from the user. The responses are stored as data in the DOM of the target element that
overhang.js has been applied to.
To retrieve the data, you simply pass in a callback function with one parameter:
or you manually access the data from the DOM:
; // From a prompt; // From a confirmation
If the user has not yet given a response, the default values will be set to
The option callback argument is a function that will run once the user has made an action on the overhang notification. The callback will run after any of these cases:
- The submission of a prompt
- The selection on a confirmation
- The close button on a normal notification with a true
- The raise of a normal notification
Note: For confirmations or prompts, the callback will not run when the close button is clicked and nothing is selected.