jQuery Push Notification Plugin

In this article, we will understand about the Push Notification jQuery plugin that makes use of HTML5 Notifications API to create and display desktop notifications with custom titles, messages, icons, and callbacks. When the app is active, then a Push Notification message arrives this event handle will be invoked, and an alert will be shown.

Following are the examples of jQuery push notification plugin.

Example 1:

<!DOCTYPE html>
<html>
<head lang = "en">
    <meta charset = "UTF-8">
    <title> example of jquery push Notification plugin </title>
    <link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
</head>
<style>
@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800);
html {
    padding: 0;
    margin: 0;
        font-family: "Open Sans", Arial, Helvetica;
      -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 30px;
  padding: 10;
  margin: 10;
  line-height: 1;
  color: black;
  letter-spacing: 2px;
  text-align: center;
}
.background-white {
    background: #ffffff;
}
.fl {
    float: left;
}
header {
    width: 100%;
    height: 50px;
    background: #ffffff;
}
header .notification {
    float: right;
    padding: 5px;
    cursor: pointer;
    position: relative;
    right: 300px;
    top: 7px;
}
header .notification:hover i {
    color: #6F7E87;
    -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
}
header i {
    color: #9FB6C3;
    font-size: 22px !important;
    line-height: 24px !important;
}
header .count1 {
    position: absolute;
    top: 2px;
    width: 15px;
    font-size: 10px;
    height: 14px;
    padding-top: 0px;
    left: 13px;
}
.common-count {
  background: #18B5B5;
    color: #ffffff;
  -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    text-align: center;
  border: 1px solid #fff;
}
header .count2 {
    width: 17px;
    font-size: 12px;
    height: 17px;
    padding-top: 1px;
    left: 13px;
    padding-left: 1px;
    margin-left: 3px;
    margin-top: -2px;
    padding-right: 1px;
    padding-bottom: 1px;
}

.arrow-up {
	width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
    margin-left: 113px;
}
.dd {
    position: absolute;
    top: -9999px;
}
.dropdown-transition {
    width: 260px;
    position: absolute;
    color: #2336AB;
    right: 177px;
    top: 48px;
    -webkit-transform: translateY(18px);
    -moz-transform: translateY(18px);
    -o-transform: translateY(18px);
     transform: translateY(18px);
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    -ms-transition: -ms-transform 0.4s, opacity 0.4s;
    -o-transition: -o-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
}
.notification-dropdown .header {
    background: #ffffff;
    width: 100%;
    height: 44px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 1px solid #D5DFE4;
    font-size: 14px;
    line-height: 18px;
}

.notification-dropdown .header .container {
    width: 115px;
    margin: 0px auto;
    padding-top: 12px;
}
.notification-dropdown .items {
    background: #E9EFF2;
    width: 100%;
    max-height: 256px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow-y: auto;
}
.notification-dropdown .items .list-item {
    padding: 14px;
    font-size: 13px;
    line-height: 18px;
    border-bottom: 1px solid #D5DFE4;
    height: 35px;
    cursor: pointer;
}
.notification-dropdown .items .list-item:hover {
    background: #DDECF3;
}
.new-item {
    background: #DDECF3;
}
.notification-dropdown .items .list-item:last-child {
    border-bottom: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.notification-dropdown .items .list-item .image {
    margin-right: 12px;
}
.notification-dropdown .items .list-item img {
    width: 35px;
    height: auto;
    border-radius: 30px;
}
.notification-dropdown .items .list-item .text {
    color: #a0b6c3;
    width: 178px;
    position: relative;
    top: -1px;
}
.notification-dropdown .items .list-item .text b {
    margin-right: 4px;
    color: #6F7A87;
}
</style>
<body>
    <header>
<h1> Example </h1>
      <h2> Push Notification using jquery <div class = "wrapper">
            <div class = "notification">
                <i class = "fa fa-bell-o"> </i>
                <div class = "notify-count count1 common-count" count = "0">
                    <div class = "value"> 1 </div>
                </div>
            </div>
            <div class = "notification-dropdown dd">
                <div class = "arrow-up"> </div>
                <div class = "header">
                    <div class = "container">
                        <div class = "text fl"> Notifications </div>
                        <div class = "notify-count common-count count2 fl" count = "0">
                            <div class = "value"> 1 </div>
                        </div>
                    </div>
                </div>
                <div class = "items">
                </div>
            </div>
        </div>
    </header>
<script>
var initial_data = [
    {
        text : 'likes your photo',
        name : 'Abhijeet',
        read : false
    },
    {
        text : 'commented on your post',
        name : 'Abhimanyu',
        read : false
    },
    {
        text : 'posted something on your wall',
        name : 'Geet',
        read : false
    }
]
var notifications = [
    {
        text : 'commented on an item you liked',
        name : 'Akhil Varma',
    },
    {
        text : 'shared a post',
        name : 'Abhijit',
    },
    {
        text : 'liked your post',
        name : 'Dhruv Srivastav',
    }
]
$(document).ready(function() {
    (function() {
        if(localStorage['notification']) {
            var data = JSON.parse(localStorage['notification'])
        } else {
            data = initial_data
        }
        var count = 0
        for(var a=0;a<data.length;a++) {
            var item = data[a]
            var html = $('<div class="list-item noti">\
                            <div class="image fl">\
                                <img src="' + item['image'] + '">\
                            </div>\
                            <div class="text fl"><b class="name fl">' + item['name'] + '</b>' + item['text'] + '</div>\
                        </div>');
            $(html).data('notification', item)
            if(!item['read']) {
                count = count + 1
            } else {
                $(html).addClass('background-white')
            }
            $(document).find('.notification-dropdown .items').append(html)
        }
        set_notification(count)                                         
        save_localdata()                                                
    })();
    $('.notification').click(function() {
        if(!$(document).find('.notification-dropdown').hasClass('dd')) {
            hide_dropdown()
        } else {
            $('.notification-dropdown').removeClass('dd').addClass('dropdown-transition')
            set_notification(0)
            save_localdata()
        }
    })
    $(document).on('click',function(e) {
        var target = $(e.target)
        if(!target.closest('.notification').length && !target.closest('.dropdown-transition').length){
            if(!$(document).find('.notification-dropdown').hasClass('dd')) {
                hide_dropdown()
            }
        }
    })
    function hide_dropdown() {
        $(document).find('.notification-dropdown').removeClass('dropdown-transition').addClass('dd')
        $(document).find('.notification-dropdown').find('.list-item').addClass('background-white')
        set_notification(0)
        save_localdata()
    }
    setTimeout(function() {
        var push_notifications = setInterval(function() {
            if(notifications.length) {
                var item = notifications[0]
                var html = $('<div class="list-item noti">\
                            <div class="image fl">\
                                <img src="'+item['image']+'">\
                            </div>\
                            <div class="text fl"><b class="name fl">'+item['name']+'</b>'+item['text']+'</div>\
                        </div>');
                $(html).data('notification',item)
                if(!$(document).find('.notification-dropdown').hasClass('dd')) {
                    $(html).addClass('new-item')                                                
                }
                $(document).find('.notification-dropdown .items').prepend(html)
                setInterval(function() {
                    $(html).removeClass('new-item')                                             
                },2000)
                var count = parseInt($(document).find('.notify-count').attr('count')) + 1
                set_notification(count)
               $(document).find('.notify-count').attr('count',count)
               $(document).find('.notify-count .value').text(count)
                notifications.shift()
                notifications.push(item)
                save_localdata()
            } else {
                clearInterval(push_notifications)
            }
        },5000)
    },5000)
    function save_localdata() {
        var list = []
        $(document).find('.notification-dropdown .items .list-item').each(function(i,e) {
            var data = $(this).data('notification')
            var new_data = {
                text : data['text'],
                name : data['name'],
                image : data['image']
            }
            if($(this).hasClass('background-white') || !$(document).find('.notification-dropdown').hasClass('dd')){
                new_data['read'] = true
            } else {
                new_data['read'] = false
            }
        console.log(new_data['read'])
            list.push(new_data)
        })
        localStorage.removeItem('notification')
        localStorage.setItem("notification", JSON.stringify(list))
    }
    function set_notification(count) {
        $(document).find('.notify-count').attr('count',count)
        $(document).find('.notify-count .value').text(count)
        if(count > 0) {
            document.title = '('+count+') - Wingify notification center'                
        } else {
            document.title = 'Wingify notification center'
        }
    }
})    
</script>                            
</body>
</html>

Explanation:

In the above example, we created a push notification plugin using jquery.

Output:

Following is the output of this example.

Example 2:

<!DOCTYPE html>
<html>
<head lang = "en">
    <meta charset = "UTF-8">
    <title> example of jquery push Notification plugin </title>
    <link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600);
* {
  border: 0;
  padding: 0;
  margin: 0;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 30px;
  padding: 10;
  margin: 10;
  line-height: 1;
  color: black;
  letter-spacing: 2px;
  text-align: center;
}

.wrapper {
  width: 540px;
  margin: 0 auto;
  padding: 20px;
}
.notification {
  height: auto;
  padding: 10px;
  border-bottom: #0a0;
  background: rgba(75,200,75,0.90);
  box-shadow: 0px 0px 2px rgba(0,0,0,0.35);
  text-align: center;
  position: fixed;
  top: 0px;
  width: 100%;
  font-size: 16px;
  color: #fff;
  text-shadow: 1px 1px 0px #999;
  display: none;
}
.info {
  border: 10px solid rgba(0,0,0,0.35);
  border-radius: 10px;
  margin-bottom: 20px;
}
.info-inner {
  border: 1px solid #333;
  padding: 10px;
  background: #fff;
}
.button {
  background: #ddd;
	background: -webkit-linear-gradient(#ccc, #ddd);	
	background: -moz-linear-gradient(#ccc, #ddd);	
	background: -o-linear-gradient(#ccc, #ddd);	
	background: -ms-linear-gradient(#ccc, #ddd);	
	background: linear-gradient(#ccc, #ddd);	
	border: 1px solid #bbb;
	border-radius: 5px;
	color: #777;
	float: left;
  line-height: 40px;
	font-size: 13px;
	font-weight: 400;
	height: 40px;
	padding: 0px 10px;
	text-shadow: 0 -1px 0 #fff;
	width: auto;
  cursor: pointer;
  margin: 0px 5px;
}
.button:focus {
  -webkit-animation: glow 800ms ease-out infinite alternate;
	-moz-animation: glow 800ms ease-out infinite alternate;
	-o-animation: glow 800ms ease-out infinite alternate;
	-ms-animation: glow 800ms ease-out infinite alternate;
	animation: glow 800ms ease-out infinite alternate;
	background: #ddd6dd;
	background: -webkit-linear-gradient(#ccc6cc, #ddd6dd);
	background: -moz-linear-gradient(#ccc6cc, #ddd6dd);
	background: -o-linear-gradient(#ccc6cc, #ddd6dd);
	background: -ms-linear-gradient(#ccc6cc, #ddd6dd);
	background: linear-gradient(#ccc6cc, #ddd6dd);
	border-color: #ccc6cc;
	color: #101;
	outline: none;
}
.button:hover {
  -webkit-animation: glow 800ms ease-out infinite alternate;
	-moz-animation: glow 800ms ease-out infinite alternate;
	-o-animation: glow 800ms ease-out infinite alternate;
	-ms-animation: glow 800ms ease-out infinite alternate;
	animation: glow 800ms ease-out infinite alternate;
	background: #ddd6dd;
	background: -webkit-linear-gradient(#ccc6cc, #ddd6dd);
	background: -moz-linear-gradient(#ccc6cc, #ddd6dd);
	background: -o-linear-gradient(#ccc6cc, #ddd6dd);
	background: -ms-linear-gradient(#ccc6cc, #ddd6dd);
	background: linear-gradient(#ccc6cc, #ddd6dd);
	border-color: #ccc6cc;
	color: #101;
	outline: none;
}

@-webkit-keyframes glow {
    0% {
		border-color: #393;
    }	
    100% {
		border-color: #6f6;
    }
}
@-moz-keyframes glow {
    0% {
		border-color: #393;
    }	
    100% {
		border-color: #6f6;
    box-shadow: 0px 0px 10px #0f0;
    }
}
@-o-keyframes glow {
    0% {
		border-color: #393;
    }	
    100% {
		border-color: #6f6;
    box-shadow: 0px 0px 10px #0f0;
    }
}
@-ms-keyframes glow {
    0% {
		border-color: #393;
    }	
    100% {
		border-color: #6f6;
    box-shadow: 0px 0px 10px #0f0;
    }
}
@keyframes glow {
    0% {
		border-color: #393;
    }	
    100% {
		border-color: #6f6;
    box-shadow: 0px 0px 10px #0f0;
    }
}
</style>
<body>
<div class = "notification"> This is the notification. </div>
<div class = "wrapper">
  <div class = "info">
    <div class = "info-inner">
      <h1> Example </h1>
      <h2> Push Notification using jquery
    </div>
  </div>
  <div class = "button v1"> Version 1 </div>
</div>
$(document).ready(function() {
  $('.v1').click(function() {
    $('.notification').slideDown('fast');
    window.setTimeout(close1,5000);
  });
  $('.v2').click(function() {
    $('.notification').slideDown('fast');
    window.setTimeout(close2,5000);
  });
  $('.v3').click(function() {
    $('.notification').slideDown('fast');
    window.setTimeout(close3,5000);
  });
});

function close1() {
  $('.notification').slideUp('fast');
}
function close2() {
  $('.notification').fadeOut('slow');
}
function close3() {
  $('.notification').slideToggle('fast');
  $('.notification').hide();
  $('.notification').animate({
    transform: 'rotateX(0deg)'
  });
}
$(document).ready(function() {
  $('.v1').click(function() {
    $('.notification').slideDown('fast');
    window.setTimeout(close1,5000);
  });
  $('.v2').click(function() {
    $('.notification').slideDown('fast');
    window.setTimeout(close2,5000);
  });
  $('.v3').click(function() {
    $('.notification').slideDown('fast');
    window.setTimeout(close3,5000);
  });
});
function close1() {
  $('.notification').slideUp('fast');
}
function close2() {
  $('.notification').fadeOut('slow');
}
function close3() {
  $('.notification').slideToggle('fast');
  $('.notification').hide();
  $('.notification').animate({
    transform: 'rotateX(0deg)'
  });
}
</script>
</body>
</html>

Explanation:

In the above example, we created a push notification plugin using jquery.

Output:

Following is the output of this example.

Example 3:

<!DOCTYPE html>
<html>
<head lang = "en">
    <meta charset = "UTF-8">
    <title> Example of jquery push Notification plugin </title>
    <link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
* {
  margin: 0;
  padding: 0;
}

body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 40px;
  padding: 10;
  margin: 10;
  line-height: 1;
  color: black;
  letter-spacing: 2px;
  text-align: center;
}


#push-notification {
  position: relative;
  height: 100vh;
}

.notification {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  width: 30%;
  background: #FFF;
  -webkit-box-shadow: 0 10px 6px -6px #d8d8d8;
	-moz-box-shadow: 0 10px 6px -6px #d8d8d8;
	box-shadow: 0 10px 6px -6px #d8d8d8;
  border-radius: 10px;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s all;
}

.media {
  width: 80px;
  height: 70px;
  margin-right: 1rem;
}
.title h3 {
  font-weight: normal;
  font-size: 100%;
  letter-spacing: 1px;
  word-spacing: 1px;
}

.content {
  position: relative;
}
.close {
  position: absolute;
  right: 2%;
  top: auto;
  bottom: auto;
  font-size: 140%;
  font-weight: normal;
  cursor: pointer;
}
</style>
<body>
<h2> Example </h2>
<h1> Push Notification with Jquery </h1>
<div id = "push-notification">
  <article class = "notification" data-id = "0">
    <figure class = "media">
    </figure>
    <div class = "content">
      <div class = "title">
        <h3> The Ten Reasons To work in IT company. </h3>
      </div>
    </div>
    <span class = "close"> � </span>
  </article>
  <article class = "notification" data-id = "1">
    <figure class = "media">
    </figure>
    <div class = "content">
      <div class = "title">
        <h3> The Ten Reasons To work in IT company. </h3>
      </div>
    </div>
    <span class = "close"> � </span>
  </article>
  <article class = "notification" data-id = "2">
<figure class = "media">
    </figure>
    <div class = "content">
      <div class = "title">
        <h3> The Ten Reasons To work in IT company. </h3>
      </div>
    </div>
    <span class = "close"> � </span>
  </article>
</div>
<script>
let counter = 0;
setInterval(function() {
  let notification = document.querySelector('article[data-id="' + counter +'"]');
    notification.style.visibility = 'visible';
    notification.style.opacity = 1;
    counter++;
  if(counter === 3) {
    counter = 0;
  }
  setTimeout(function() {
    notification.style.visibility = 'hidden';
    notification.style.opacity = 0;
  }, 1000);
}, 3000);
</script>
</body>
</html>

Explanation:

In the above example, we created a push notification plugin using jquery.

Output:

Following is the output of this example.

Next TopicCreate a menu item animation on hover

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}