Show Notification, prompt, and confirmation with Overhang.js

Overhang.js is a lightweight jQuery plugin which 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 jQuery UI library to display an alert on the screen.

Show Notification,prompt, and confirmation with Overhang.js


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.1.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'
});

Demo

Click the button.


 

3. Different types

It allow 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 allow 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 show the confirmation message with yes and no button. Similar like 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);
 }
});

Demo

Click a button.

 


 

4. More options

Here, are some options that help you to customize –

  • duration – The notification alert hide after 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"

Demo

Click a button.


 

5. Custom

Use custom: true to change 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
});

Demo

Click the button.


 

6. Conclusion

It is a quick way to show information, warning, errors, prompts for input and more. You can use as a replacement of 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.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *