Show Notification, prompt, and confirmation with Overhang.js

Overhang.js is a lightweight jQuery plugin that displays notification, prompt, and confirmation on the screen.

This adds a strip bar at the top of the page when it executes.

It has various options that help us to customize e.g. duration, speed, etc and change the look according to the website theme e.g. change background, accent, and message text color.

It also uses the jQuery UI library to display an alert on the screen.

---

Contents

1. Download & include
2. Initialize
3. Different types
4. More options
5. Custom
6. Conclusion

---

1. Download & include

• You can download this library from GitHub.
• Include jQuery and jQuery UI library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

• Now Include plugin CSS and script.

<link rel="stylesheet" type="text/css" href="dist/overhang.min.css" />
<script type="text/javascript" src="dist/overhang.min.js"></script>

---

2. Initialize

Call overhang() method and use type option to set what type of notification you want to show – success, info, warn, error, etc.

Show text on the alert using message option.

Example

$('body').overhang({
 type: 'success',
 message: 'Your message'
});

View Demo

---

3. Different types

It allows us to show the following types of notifications –

• success
• info
• warn
• error
• prompt, and
• confirm

Initialize

Call overhang() method and set type option.

• success

$("body").overhang({
 type: "success",
 message: "Woohoo! Our message works!"
});

• info

$("body").overhang({
 type: "info",
 message: "Woohoo! Our message works!"
});

• warn

$("body").overhang({
 type: "warn",
 message: "Enter all values."
});

• error

$("body").overhang({
 type: "success",
 message: "Woohoo! Something went wrong!"
});

• prompt – It allows us to the input value and for retrieving the entered value define the callback option.

$("body").overhang({
 type: "prompt",
 message: "What's your name?",
 callback: function (value) {
  alert("Your name = " + value);
 }
});

• confirm – This shows the confirmation message with the yes and no button. Similar to a prompt for retrieving operation define callback option

$("body").overhang({
 type: "confirm",
 message: "Are you sure?",
 callback: function (value) {
  var response = value ? "yes" : "no";
  alert("You made your selection of " + response);
 }
});

View Demo

---

4. More options

Here, are some options that help you to customize –

• duration – The notification alert hides after a defined number of seconds. e.g. duration: 3.
• closeConfirm – Set it to true if you want the user to close the alert instead of automatically. The default value is false.  e.g. closeConfirm: true.
• upper – This converts message text in upper case when it set to true. The default value is false. e.g. upper: true
• speed – The speed of drop and raise of alert in milliseconds. The default value is 500. e.g. speed: 5000
• textColor – Change the color of the message text. The default color is white. e.g. textColor: "yellow"

View Demo

---

5. Custom

Use custom: true to change the background and accent of the alert.

• background – Set the background of the alert.
• accent – Change bottom border color.

Example

$("body").overhang({
 type: "info",
 message: "Woohoo! Our message works!",
 custom: true, // Set custom to true
 primary: "#ed624d", // Your custom primary color
 accent: "#f7f83c" // Your custom accent color
});

View Demo

---

6. Conclusion

It is a quick way to show information, warning, errors, prompts for input, and more. You can use it as a replacement for the default JavaScript alert within your project.

Use available options to customize the alert and look according to your website theme.

You can learn more about it this plugin with examples from here.

If you found this tutorial helpful then don't forget to share.