Add time of the notification directly in the toolbar

Hello everyone,

I'm going to share just a super simple resource I just posted on my forum, but I think that it may be useful to some of you.
This tutorial allows you to display the time of the notification directly from the notifications box in the toolbar

Demo

CSS
In order to design the style of the resource, you need to go towards Administration Control Panel (ACP)  Display  CSS & Colors  CSS Style Sheet and add append the following code:

Code:

#fa_toolbar #fa_right #notif_list li .contentText {
    height: -webkit-fill-available;
}
span.notification_time {
    display: flex;
    padding-top: 3px!important;
    color: gray;
    float: right;
}

Customize CSS
CSS can be fully customized according to the style of the forum.
You can remove the attribute

Code: float: right;

if you want to keep the timing directly under the notification content.

Javascript & jQuery
For the next step you need to go towards Administration Control Panel (ACP)  Modules  HTML & Javascript  Javascript codes management and create a new code - upon verifying that Javascript codes management is enabled.

• Title: free choice - does not influence the code effect
• Where: All pages
• Code:
  
  

  Code:

  $(function() {
 $(function() {
/*
Title: Add time of the notification directly in the toolbar
Author: Niko
Version: 1.1
Release Date: 28.01.2023 (dd.mm.year)
Contact: https://www.fmcodes.net/u2
Original content: https://www.fmcodes.net/t1989-
*/
 
  $("#fa_notifications").one("click", function(event){
    $.ajax({
        url: '/notification.php',
        datatype: 'html',
        success: function (data) {
            var arr = Object.keys(data).map(function (key) { return data[key]; });
         
            var count = 0;
            $('ul#notif_list li').each(function() {
                var time = arr[0][count]['time'];
                $(this).find('.contentText').append('<span class="notification_time">'+time+'</span>');
                count++;
            });
        }
    });
    });});});

Hope you enjoy it!

Nice little add on thank you for sharing with us all

Awesome! Thank you for the tutorial!

You are welcome
very simple... but I think some users may find it useful

I tested this on my testing forum and it does work, and it looks awesome, but it also shows it about 2 to 3 times. I was going to try to see if I could fix it but couldn't figure it out.
Here is a screenshot

@Obscure my bad, script has been updated

Thank you! I will try it again.

Edit: Works fine now.

Awesome it works perfect in Invision too 

Thanks @Obscure and @TonnyKamper for the feedbacks!