HTML Javascript Show Notifications using JQuery

ASH

4 years ago

In previous post we saw how to create a simple Javascript Digital clock with few designs for it. In this post we will create notifications in HTML page using Javascript and JQuery. We will use Notify.js Jquery plugin to display our Notifications. It is open sourced Jquery plugin licensed under MIT license. It is simple to integrate and has options to customize the looks and layout of the Notifications. So let’s begin.

Please download the js file using this link and copy it in Scripts folder of your project. We will also use Bootstrap css to design our page. To simply show Notifications, use :

$.notify('Hello World');

Index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--<script src="Scripts/jquery-3.3.1.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="Scripts/notify.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

</head>
<body>

<script>
$.notify('Hello World');
</script>
</body>
</html>

To change the position of the toast notification, we can change the globalPosition property while creating the notifications, like below:
Index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--<script src="Scripts/jquery-3.3.1.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="Scripts/notify.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

</head>
<body>
<div class="container">
<br />
<br />
<br />
<br />
<center>

<input type="button" value="Top Center" class="btn btn-dark"
id="btnTopCenter" />
&nbsp;&nbsp;
<input type="button" value="Top Right" class="btn btn-dark"
id="btnTopRight" />
&nbsp;&nbsp;
<input type="button" value="Top Left" class="btn btn-dark"
id="btnTopLeft" />
<br /><br />

<input type="button" value="Bottom Center" class="btn btn-primary"
id="btnBottomCenter" />
&nbsp;&nbsp;
<input type="button" value="Bottom Right" class="btn btn-primary"
id="btnBottomRight" />
&nbsp;&nbsp;
<input type="button" value="Bottom Left" class="btn btn-primary"
id="btnBottomLeft" />
<br /><br />
</center>
</div>

<script>
$("#btnTopCenter").click(function () {
$.notify('Hello World', {
globalPosition: 'top center',
className: 'info'
});
});
$("#btnTopRight").click(function () {
$.notify('Sample Notification', {
globalPosition: 'top right',
className: 'info'
});
});

$("#btnTopLeft").click(function () {
$.notify('Sample Notification - Top Left', {
globalPosition: 'top left',
className: 'info'
});
});

$("#btnBottomCenter").click(function () {
$.notify('Hello World', {
globalPosition: 'bottom center',
className: 'info'
});
});
$("#btnBottomRight").click(function () {
$.notify('Sample Notification - Bottom Right', {
globalPosition: 'bottom right',
className: 'error'
});
});

$("#btnBottomLeft").click(function () {
$.notify('Sample Notification - Bottom Left', {
globalPosition: 'bottom left',
className: 'warning'
});
});

</script>
</body>
</html>

This will display the notification at different positions on the web page.

Also the class name can be changed using the className property.

To show it on the control, like a button we can call it on a html control while creating notification like below:

Index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--<script src="Scripts/jquery-3.3.1.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="Scripts/notify.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<style>
body
{
background-color:#f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<br />
<center>
<br /><br />
<input type="button" value="Hey!" class="btn btn-danger"
id="btnHey" />
<br /><br />
</center>
</div>

<script>
$("#btnHey").click(function () {
$('#btnHey').notify('Hello World', {
elementPosition: 'bottom center',
globalPosition: 'bottom center',
className: 'error'
});
});
</script>
</body>
</html>

We can also create custom css-class for the Notification like below:

Index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--<script src="Scripts/jquery-3.3.1.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="Scripts/notify.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script type="text/javascript">
$.notify.addStyle('blackToast', {
html: "<div><span data-notify-text/>Sample Text</div>",
classes: {
base: {
"white-space": "nowrap",
"background-color": "black",
"padding": "5px",
"color": "white",
},
superblack: {
"color": "white",
"background-color": "black"
}
}
});
</script>
<style>
body
{
background-color:#f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<br />
<center>

<input type="button" value="Autohide Off" class="btn btn-danger"
id="btnAutoHideOff" />
<br /><br />
</center>
</div>

<script>

$("#btnAutoHideOff").click(function () {
$('#btnAutoHideOff').notify('Please Click me to Hide', {
elementPosition: 'bottom center',
globalPosition: 'bottom center',
style: 'blackToast',
className: 'supperBlack',
autoHide: false
});
});
</script>
</body>
</html>

You can download the source code using below link:

HTML Show Notifications using JQuery – Notify.js

Share this: