A simple jQuery plugin to display sleek, instant notifications, confirmations or prompts inside a given element.
You can install overhang through npm:
$ npm install overhangAlternatively, 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)
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>Include references to the Javascript and CSS files.
<link rel="stylesheet" type="text/css" href="dist/overhang.min.css" />
<script type="text/javascript" src="dist/overhang.min.js"></script>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 success, error, warn, info, prompt and confirm.
If you would like to use a custom theme, leave this parameter blank and follow the rules for setting a custom theme.
$("body").overhang({
custom: true, // Set custom to true
primary: "#34495E", // Your custom primary color
accent: "#F4B350" // Your custom accent color
});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 prompt or confirm, respectively. Prompts and confirmations both have preset themes, but you can customize them by using the custom option.
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 1.5 seconds.
The speed to drop and raise the alert in milliseconds. The default is set to 500.
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 false.
Set this to true if you would like your message in all uppercase letters. The default is set to false.
jQuery UI easing option for the drop effect. The default is set to "easeOutBounce"
This is a boolean if the message argument should be interpreted as HTML. The default value is set to false.
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.
$("body").overhang({
type: "confirm",
message: "Do you want to continue?",
closeConfirm: "true",
overlay: true,
overlayColor: "#1B1B1B"
});// Some error notification
$("body").overhang({
type: "error",
message: "You could not be logged in at this time.",
closeConfirm: "true",
customClasses: "class1 class2"
});When using prompts, all you need to do is set the type parameter to "prompt".
// Some prompt notification
$("body").overhang({
type: "prompt",
message: "What is your name"
});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 "Yes".
This is the text on the "false" button that would to display. The default is set to "No".
This is the color of the "true" button. The default is set to "#2ECC71".
This is the color of the "false" button. The default is set to "#E74C3C".
// Some confirmation
$("body").overhang({
type: "confirm",
yesMessage: "Yes please!",
noMessage: "No thanks."
});The prompt and 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:
$("body").overhang({
type: "prompt",
message: "What is your name",
callback: function (value) {
alert("You entered " + value);
}
});or you manually access the data from the DOM:
alert($("target-element").data("overhangPrompt")); // From a prompt
alert($("target-element").data("overhangConfirm")); // From a confirmationIf the user has not yet given a response, the default values will be set to null.
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
closeConfirm - 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.
$("body").overhang({
type: "confirm",
message: "Are you sure?",
// This code will run once an option is clicked.
callback: function (selection) {
alert("You made your selection of " + selection);
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent