Creating Notification to show number of notifications based on user logged in
I recently learned how to add notification icon with numbers of notification for a user. Now I want to learn how to make the notification display the exact number of activities that took place within the user's account.
I saw a tutorial which used SignalR to display numbers of notifications on the user's page. But the tutorial seem to be too difficult to understand. The details has not been carefully mentioned in order for me to understand.
Please forum, how can I make a situation where the notification will show that the user has a particular number of notifications?
For example, if we have 3 users (userA, userB and userC) who are linked together on a website and userA posts about four (4) contents and the contents are saved in database, then there should be a notification that will show that 4 contents were posted and it was posted by userA. The label in the div class="notify" will show the number of notifications.
Here is my Full HTML showing that user has 4 notifications
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"/>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@500&display=swap" rel="stylesheet"/>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<title></title>
<style type="text/css">
.notification {
padding: 15px 26px;
position: relative;
display: inline-block;
top: 0px;
}
.notification .notify {
position: absolute;
top: 6px;
right: 20px;
padding-right: 10px;
padding-left: 5px;
border-radius: 50%;
background: red;
color: white;
font-size: 7pt;
width: 5px;
height: 15px;
text-align: center;
}
#lblnote {
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<div class="row" style="padding-left: 10px; margin: 10px;">
<asp:Image ID="profileImage" ImageUrl="~/images/star.png" runat="server" Width="30" Height="30" />
<asp:Label ID="prolbl" runat="server" Text="Samuel Victor"></asp:Label>
<a href="#" class="notification">
<span>
<img id="imag-notify" src="images/navicongreen/notify_bell_256.png" alt="notify_bell_256" height="24" /></span>
<span class="notify">
<asp:Label ID="lblnote" runat="server" Text="4" Font-Size="7pt"></asp:Label></span>
</a>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
