LESS TALK, MORE CODE: Web push notification example

I will show an example of web push notification by using notify.js (https://notifyjs.com/) plugin and styling it.

- jquery-1.11.2.js >>You can download from: https://code.jquery.com/jquery-1.11.2.js

- bootstrap.min.css >> For button styling we'll use, but you don't have to add this. You can download it from: https://getbootstrap.com/docs/3.3/getting-started/

- notify.js >>go to 'https://notifyjs.com/' >> 'Download notify.js' section

- notify.min.js >>go to 'https://notifyjs.com/' >> 'Download notify.min.js' section

- notify.custom.js will be written by us, we'll add our styling and function.

$.notify
.addStyle("info", {
   html:
     "<div class='clearfix'>"
        +"<div class='pull-left notifyjs-icon' style='float:left'></div>"
          +"<div class='notifyjs-title pull-left' data-notify-html='title'/>"
             + "<button id='yesInfo' class='btn btn-success btn-sm notifyjs-btn' data-notify-text='button'>OKE</button>"
     +"</div>",
});


$(document).on('click', '#yes', function () {
    $(this).trigger('notify-hide');
});

function notify(msg) {
       $.notify({
           title: msg
       }, {
           style: 'info'
       });
}

- test.jsp file

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"  pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Give your title</title>
</head>

<body>
       <link rel="stylesheet" href="js/bootstrap.min.css">
       <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
       <script type="text/javascript" src="js/notify.js"></script>
       <script type="text/javascript" src="js/notify.custom.js"></script>
       <script>
             notify('<h4>Hello</h4>You can see our notification. Click to <b>OKE</b> button to close notification.');
       </script>
</body>
</html>

-notify.style.css

.notifyjs-icon{width:140px;height:150px; background:url(../../your img path) no-repeat 50% #3A423A}
.notifyjs-title h4{font-weight:normal;color:#3A423A}
.notifyjs-title b{color:#3A423A}
.notifyjs-title{width:290px;color:#333;padding: 0 5px 4px 10px}
.notifyjs-info-base{width:450px;display:inline-block;padding:10px;position:relative;background-color:#F0F8FF;autoHide:false;clickToHide:false}

.notifyjs-btn{position:absolute! important;bottom:20px;right:20px;}

Output:

LESS TALK, MORE CODE

Monday

Web push notification example - with notify.js plugin

No comments:

Post a Comment