locked
facebook like notification lin MVC5 RRS feed

  • Question

  • User2048898515 posted

    Hi Guys,

    How to implement notification like in facebook web page. ie. red box which shows number of message received.
    And clicking on the red box, to display the notification details.

    Please check below image.

    Thumbnail

    Tuesday, May 15, 2018 8:03 AM

Answers

  • User61956409 posted

    Hi nambir,

    How to implement notification like in facebook web page. ie. red box which shows number of message received.
    And clicking on the red box, to display the notification details.

    Based on your requirement, I create a sample for your reference.

    Html code:

    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body {
                background-color: #e9ebee;
            }
            .container {
                background-color: #99CCFF;
                border: thick solid #808080;
                padding: 10px;
                margin: 20px;
            }
    
            #topnav {
                /*width: 100%;*/
                height: 36px;
                background-color: #365899;
                margin: 20px;
            }
    
            #chatnotifications {
                width: 35px;
                height: 35px;
                background-image: url("https://www.facebook.com/rsrc.php/v3/yz/r/QjiHJy8j_PU.png");
                background-repeat: no-repeat;
                background- -586px;
                cursor: pointer;
                float:right;
                margin-right:50px;
            }
    
            #notificationsCountValue {
                ;
                background-color: #fa3e3e;
                border-radius: 2px;
                padding: 1px 3px;
                color: #fff;
                right:-25px;
                font-size:10px;
            }
    
            #notificationsContent {
                ;
                width: 300px;
                height: 70px;
                background-color: #fff;
                right: 270px;
                top: 23px;
            }
            #uparrow {
                width: 20px;
                height: 11px;
                background-image: url("https://www.facebook.com/rsrc.php/v3/yP/r/sgy1EK7Cr23.png");
                background-repeat: no-repeat;
                background-size:30px 1082px;
                background- -802px;
                float:right;
                top:-11px;
                ;
            }
        </style>
    </head>
    <body>
        <div id="topnav">
            <div id="chatnotifications" data-ispoen="false">
                <span id="notificationsCountValue">
                    0
                </span>
                <div id="notificationsContent">
                    <div id="uparrow"></div>
                </div>
            </div>
        </div>
        
        <br />
        <div class="container">
            <input type="text" id="message" />
            <input type="button" id="sendmessage" value="Send" />
            <input type="hidden" id="displayname" />
            <ul id="discussion"></ul>
        </div>
    </body>
    </html>
    

    JS code:

    <script type="text/javascript">
        $(function () {
            $("#notificationsCountValue").hide();
            $("#notificationsContent").hide();
    
            $("#chatnotifications").click(function () {
                alert($(this).attr("data-ispoen"));
                var isopen = $(this).attr("data-ispoen");
                if (isopen=="false") {
                    $(this).attr("data-ispoen", "true");
                    $("#notificationsCountValue").show();
                    $("#notificationsContent").show();
                } else {
                    $(this).attr("data-ispoen", "false");
    
                    $("#notificationsCountValue").hide();
                    $("#notificationsContent").hide();
                }
            })
    
            // Declare a proxy to reference the hub.
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page.
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    
    
                //append to notification
                
                var count = parseInt($("#notificationsCountValue").text());
                count++;
                $("#notificationsCountValue").text(count);
                $("#notificationsCountValue").show();
    
                //you can append notification content dynamically based on your requirement
            };
    
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
    
                });
            });
        });
    </script>
    

    Test result:

    With Regards, 

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 16, 2018 3:08 AM

All replies

  • User61956409 posted

    Hi nambir,

    How to implement notification like in facebook web page. ie. red box which shows number of message received.
    And clicking on the red box, to display the notification details.

    Based on your requirement, I create a sample for your reference.

    Html code:

    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body {
                background-color: #e9ebee;
            }
            .container {
                background-color: #99CCFF;
                border: thick solid #808080;
                padding: 10px;
                margin: 20px;
            }
    
            #topnav {
                /*width: 100%;*/
                height: 36px;
                background-color: #365899;
                margin: 20px;
            }
    
            #chatnotifications {
                width: 35px;
                height: 35px;
                background-image: url("https://www.facebook.com/rsrc.php/v3/yz/r/QjiHJy8j_PU.png");
                background-repeat: no-repeat;
                background- -586px;
                cursor: pointer;
                float:right;
                margin-right:50px;
            }
    
            #notificationsCountValue {
                ;
                background-color: #fa3e3e;
                border-radius: 2px;
                padding: 1px 3px;
                color: #fff;
                right:-25px;
                font-size:10px;
            }
    
            #notificationsContent {
                ;
                width: 300px;
                height: 70px;
                background-color: #fff;
                right: 270px;
                top: 23px;
            }
            #uparrow {
                width: 20px;
                height: 11px;
                background-image: url("https://www.facebook.com/rsrc.php/v3/yP/r/sgy1EK7Cr23.png");
                background-repeat: no-repeat;
                background-size:30px 1082px;
                background- -802px;
                float:right;
                top:-11px;
                ;
            }
        </style>
    </head>
    <body>
        <div id="topnav">
            <div id="chatnotifications" data-ispoen="false">
                <span id="notificationsCountValue">
                    0
                </span>
                <div id="notificationsContent">
                    <div id="uparrow"></div>
                </div>
            </div>
        </div>
        
        <br />
        <div class="container">
            <input type="text" id="message" />
            <input type="button" id="sendmessage" value="Send" />
            <input type="hidden" id="displayname" />
            <ul id="discussion"></ul>
        </div>
    </body>
    </html>
    

    JS code:

    <script type="text/javascript">
        $(function () {
            $("#notificationsCountValue").hide();
            $("#notificationsContent").hide();
    
            $("#chatnotifications").click(function () {
                alert($(this).attr("data-ispoen"));
                var isopen = $(this).attr("data-ispoen");
                if (isopen=="false") {
                    $(this).attr("data-ispoen", "true");
                    $("#notificationsCountValue").show();
                    $("#notificationsContent").show();
                } else {
                    $(this).attr("data-ispoen", "false");
    
                    $("#notificationsCountValue").hide();
                    $("#notificationsContent").hide();
                }
            })
    
            // Declare a proxy to reference the hub.
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page.
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    
    
                //append to notification
                
                var count = parseInt($("#notificationsCountValue").text());
                count++;
                $("#notificationsCountValue").text(count);
                $("#notificationsCountValue").show();
    
                //you can append notification content dynamically based on your requirement
            };
    
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
    
                });
            });
        });
    </script>
    

    Test result:

    With Regards, 

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 16, 2018 3:08 AM
  • User2048898515 posted

    Hi Fei Han,

    I could not click send. when i click send nothing happens.

    WHat package i need to install for it?

    https://ibb.co/ktTefd

    Wednesday, May 16, 2018 8:58 AM
  • User61956409 posted

    Hi nambir,

    To make the code work on your side, you need to install the SignalR library for your project and define both client function and hub methods to make your JavaScript client can communicate with hub server (send and receive notification). The following documentation and tutorial will help you:

     With Regards,

    Fei Han

    Wednesday, May 16, 2018 9:54 AM
  • User2048898515 posted

    Thanks Fei Han.

    Its working. You are awesome!

    I will ping back here for any queries.

    Thursday, May 17, 2018 6:18 PM