Argthtjtr

So I have a new notification style ring and green circle with unread notifications in it this circle only is visible when you have new notifications.

when page is refreshed even if you dont have a notification the circle is visible for a second and then goes invisible

If there is a new notification still when refreshed circle shows up empty or with zero and then goes invisible and then with correct number

HTML:

<div class="bell">

    <div class="unseen-notification-show" data-bind="visible: UnSeenMessagesCount() > 0, text: UnSeenMessagesCount()" style="display:none"></div>

</div>

CSS:

.unseen-notification-show {

    content: '';

    display: block !important;

    position: absolute;

    top: -10px;

    right: -8px;

    width: 17px;

    height: 17px;

    border: 1px solid #ffffff;

    background-color: #8cdb16;

    border-radius: 8px;

    cursor: pointer;

    z-index: 3;

    color: white;

    text-align: center;

    line-height: 15px;

    font-size: 11px;

    font-family: 'Times New Roman', Times, serif;

}



self.searchModel = new AuthorizedSearchViewModel();

self.Header = ko.observable(new HeaderModel());

self.UnSeenMessagesCount = ko.observable(0);

self.Messages = ko.observableArray();

self.CanShowRemindProfile = ko.observable(false);

self.Remind = ko.observable(new RemindModel());



self.LoadUserInformation = function () {

    $.post('/User/GetUserInfoForDashboardHeader',

        function (response) {

            InitTawkChat(response);

            self.Header(new HeaderModel(response));



            if ($('#accountId').length > 0) {

                $('#accountId').html(response.accountId);

            }



        }, "json").done(function () { console.warn("loaderOff"); });

};



self.GetRemindProfile = function () {

    self.CanShowRemindProfile(false);

    $.post('/User/GetRemindProfile', function (result) {

        if (result) {

            self.CanShowRemindProfile(true);

            self.Remind(new RemindModel(result));

        }

    });

};



self.GetMessages = function () {

    $.post('/Messages/GetAll', {

        page: 1,

        pageSize: 4

    }, function (result) {

        var notifications = ;



        _.map(result.Notifications, function (item) {

            notifications.push(new MessageModel(item));

        });



        self.Messages(notifications);

        self.UnSeenMessagesCount(result.UnseenNotifications);

    });

};

Remove !important from display property in your css and let knockout inline handle display.

function viewModel(){

  var self = this;

  self.UnSeenMessagesCount = ko.observable();

  

  self.initData = function(){

    //dummy setTimeout for your ajax get.

    setTimeout(function(){ 

      self.UnSeenMessagesCount(4);

   },1000);

  }

  

}



var vm = new viewModel();

vm.initData();



ko.applyBindings(vm);

.unseen-notification-show {

    content: '';

    display: block;

    position: absolute;

     

    width: 17px;

    height: 17px;

    border: 1px solid #ffffff;

    background-color: #8cdb16;

    border-radius: 8px;

    cursor: pointer;

    z-index: 3;

    color: white;

    text-align: center;

    line-height: 15px;

    font-size: 11px;

    font-family: 'Times New Roman', Times, serif;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="bell">

    <div class="unseen-notification-show" data-bind="visible: UnSeenMessagesCount() > 0, text: UnSeenMessagesCount()" style="display:none"></div>

</div>

Sounds like some loading issues. Try moving your css from being loaded in the top of the HTML, to be loaded in the bottom/footer.

What you want to do, is to hide the circle until the result is loaded (either 0 or 1,2,3,4.. and so on. Depending on the number of notifications).

In your div you got this line style="display:none"> which hides the circle. Thats good!

Now you should make sure that the style for .unseen-notification-show which contains display: block !important; that shows the circle - Should not be run before the calculation of the number to show is done.

One way could be to place the file that loads your css to the bottom of the HTML (like moving your <link rel="stylesheet" href="test.css" />). Or another way is to only use css for the hiding and then use javascript/jQuery for showing the cirle.

If this didn't help - then please provide the code you use to generate the number.

I think the issue is due to
self.UnSeenMessagesCount = ko.observable(0);
so when your modal is getting created it is initialized with value 0. So when you refresh the page initially it is 0 but when self.getMessage is called it updates your value.