Overhang.js – jQuery Plugin for Top Notifications, Prompts & Confirmation

Overhang.js is a jQuery Plugin by which you can create a nice looking, modern and stylishly sleek, Instant Notifications, Prompts and Confirmations in your header.

If you have ever used HelloBar for notifying of new products launch or simply for the email newsletters, then you would know its importance and how cool is that to display those Top Header Notification.

So, if you Want to display an important piece of notifications, messages or any prompt without compromising the user experience? Then Overhang.js jQuery plugin will be handy for your portal.

Overhang.js – A free and open source jQuery plugin to display sleek, instant notifications, confirmations or prompts to the user right on top of your website as a dropdown.

Overhang.js –  a HelloBar Alternate

Hanging notifications or messages on top are very much effective to convert your user into your client. The top notification bar acts a very good location that can easily grab user attention which can lead a user to make a purchase or a sign up at your portal.

Overhang.js is a very lightweight and beautifully finished jQuery plugin that is very much customizable as per your needs and requirements.

With the jQuery plugin, you can display a Success Message, a Warning Message, a Confirmation Alert and related more to your users with beautiful color schemes and layouts. You can also use the plugin to display custom messages, for ex: displaying user a message to create a strong password while signing up, alerting a user of terms and conditions and similarly, you can take the proper use of the plugin for your custom needs.

The best part of the plugin is that it is very easy to use and configure to your website if you’re aware of HTML, Javascript/jQuery to a basic level.

Recommended Reading:

A JS Widget to Animate your Website Header

Now let’s move to learn all about the plugin.

How to Configure and Add Overhang.js to your Website?

The very first step is to download the library of Overhang.js from the Github Repository.

After downloading the files, insert the CSS files of the library before the </head> tag your web page.

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

And insert the script files before the </body> tag of your web page.

<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="dist/overhang.min.js"></script>

OR

jQuery CDN:

You can also use the jQuery CDN which is also handy if you don’t want to download the script/CSS files. Below is the CDN of jQuery.

<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>

That’s it you can now get started with the jQuery plugin as you have now properly embedded the scripts and CSS files in your website page.

Let’s start customizing our plugin.

The very first Notification to be displayed on the website.

1. Success Message:

This is the success preset in which you can display a notification to the user of any successful event. The message is a success preset as we have used the “type: success“. The message to be displayed in the Overhang bar will be ‘Woohoo! Our message works!‘

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

2. Prompts Notification:

This is another preset type of Overhang.js which alerts a user before doing any specific task.

To use a prompt notification in Overhang.js you just need to set type: “prompt” and that’s it.

$("body").overhang({
  type: "prompt",
  message: "What's your name?"
});

Recommended Readings:

Create a Typing/Typewriter Effect using jQuery

FitVids.js – jQuery Plugin to Make Video Embeds Responsive

Style your Dropdown Menus using jQuery

3. Confirmation Message:

The confirmation message is used when you just need to confirm a user of a specific task. With confirmation message box you can also add your custom options for the user. See the code below:

// Some confirmation
$("body").overhang({
   type: "confirm",
   yesMessage: "Yes please!",
   noMessage: "No thanks.",
   yesColor: #eee;,
   noColor: #e0e0e0;
});

yesMessage:  Text to be displayed on the “true” button. The default is set to “Yes”.

noMessage: Text to be displayed on the “false” button. The default is set to “No”.

yesColor: Color of the “true” button. The default is set to “#2ECC71”.

noColor: Color of the “false” button. The default is set to “#E74C3C”.

4. Retrieving Value:

With this preset of Overhang.js, you can retrieve values which user has chooses. Usually, user inputs are grabbed using the prompt and the confirmation presets. So to retrieve value we can use the callback function with one parameter. Let’ see how:

$("body").overhang({
   type: "prompt",
   message: "What is your name",
   callback: function (value) {
      alert("You entered " + value);
   }
});

This code will output the name which you have typed in the prompt preset.

You can also customize the callback function using some parameters like below:

$("body").overhang({
  type: "confirm",
  primary: "#21abe9",
  accent: "#ff7700",
  yesColor: "#333",
  noColor: "#FFFC00",
  message: "Are You Sure. Want to Leave?",
  callback: function (value) {
    var response = value ? "yes" : "no";
    alert("You made your selection of " + response);
  }
});

where:

primary – The background color of the Notification/Overhang bar.

accent – The bottom border color.

With Overhang.js you can also use some custom HTML and Javascript to produce another custom Overhang Bar as per your requirements. See below for the code:

$("body").overhang({
  type: "confirm",
  primary: "#333333",
  accent: "#FFFC00",
  message: "Want to Visit Tuluzz.com?",
  custom: true,
  html: true,
  callback: function (value) {
    if (value) {
      window.location.href = "https://tuluzz.com/";
    } else {
      alert("I am already at Tuluzz.com");
    }
  }
});

Now, this is how you can use custom parameters to modify our Overhang bar for your users.

Now I think you have seen something that is pretty simple and easy to use. The Overhang.js plugin not only displays notifications but also doubles up the user experience.

So, If you are looking out for a handy confirmation, prompt or message bar then Overhang.js will be perfect. Just give a try and check out the difference you are looking for.

For more information about the jQuery plugin, you can visit the official website of Overhang.js

Recommended Readings:

• Lettering.js – A Jquery Plugin for Web Typography
• Textillate.js – Create CSS3 Text Animation with JQuery Plugin
• Create a Step by Step Tour of your Website or Product

If you liked this tutorial, do share what you had created using this simple and nice JS Library and let us know the Cool in the comment section below.