Notifications in widget!

This code was based on an idea in another forum and reposted here in this topic: https://help.forumotion.com/t139188-notifications-without-displaying-toolbar#944497

---

In the ACP, create a new widget following the example of the figure below:


And add the following code:

Code:


<ul id="wnotify" style="margin: 0px; overflow: auto; max-height: 225px; padding-left: 0px;">
</ul>
<script type="text/javascript">
   //<![CDATA[
   /**************************************************************************
    * Module: JS_wNotify
    * Description: Notifications on Widget!
    * Author: Made and Optimizations by JScript - 2014/11/09
    * Version: First Release!
    ***************************************************************************/
   jQuery(window).load(function() {
      var _pathName = location.pathname;
      if (_pathName == '/portal' || _pathName == '/forum' || _pathName == '/') {
         var NotifyExist = setInterval(function() {
            if (document.getElementById('notif_list') !== null) {
               clearInterval(NotifyExist);
               var iNewList = jQuery('#notif_list li').length,
                  iOldList = 0;

               WidgetNotifications();
               iOldList = iNewList;

               setInterval(function() {
                  iNewList = jQuery('#notif_list li').length;
                  if (iNewList !== iOldList) {
                     WidgetNotifications();
                     iOldList = iNewList;
                  }
               }, 10000);
            }
         }, 1000);
      }
   });

   function WidgetNotifications() {
      jQuery('#wnotify').html(jQuery('#notif_list').html());

      var oSearch = jQuery('#main-content .main-content td.tcr a.gensmall[href^="/u"]'),
         /* Location to look for avatars! In this case, looking in the categories. */
         oTarget = jQuery('#wnotify a[href^="/u"]'),
         ilen = oTarget.length;

      for (var index = 0; index < ilen; index++) {
         var oThis = jQuery(oTarget[index]),
            sHref = oThis.attr('href'),
            sTitle = oThis.text();

         if (sHref !== undefined) {
            oThis.closest('div').before('<a href="' + sHref + '" title="' + sTitle + '" class="lastpost-avatar"><img src="http://r26.imgfast.net/users/2617/31/90/74/avatars/1-40.png" alt="no_photo" class="avt-wid" /></a>');
            var oImg = oThis.closest('li').find('.avt-wid'),
               sSrc = sessionStorage.getItem(sHref); /* Relative fast... */
            if (sSrc) {
               oImg.attr('src', sSrc);
            } else {
               jQuery.get(sHref, function(data) { /* Slow and dangerous!!! */
                  var image = jQuery('#profile-advanced-right img:first', data).attr('src');
                  oImg.attr('src', image);
                  sessionStorage.setItem(sHref, image);
               });
            }
         }
      }
   };
   //]]>
</script>
<style type="text/css">
   <!-- #wnotify {
      list-style: outside none none;
   }
   
   #wnotify .ellipsis {
      min-height: 42px;
      overflow: auto;
      text-overflow: unset;
      white-space: normal;
      width: auto;
   }
   
   #wnotify .see_all {
      border: 1px solid #d2d2d2;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
      margin-top: 5px;
      padding: 5px;
      text-align: center;
   }
   
   #wnotify .content > hr {
      display: none;
   }
   
   .lastpost-avatar {
      float: left;
      padding: 2px;
   }
   
   .lastpost-avatar img {
      background: none repeat scroll 0 0 #fff;
      border: 1px solid #d8d8d8;
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
      float: left;
      height: 28px;
      margin-right: 5px;
      padding: 2px;
      width: 28px;
   }
   
   -->
</style>


Result:


Note: The bar needs to be less active and even can be hidden, no problem!

JS

I just noticed that the avatars are duplicated in the widget.

Nevermind, I just noticed the reason why there are two similar avatars.  It was because the same member posted on my wall two messages.

Thank you for this. This code will improve my forum for sure!

10/10

Nice code JScript. I think we had some issues before, but that's past, right?

Anyway, the code only works on homepage.

Exactly I am still having an issue with the avatars of members are appearing twice in the widget.

This will no longer be supported by JScript: https://help.forumotion.com/t151137-in-memory-of-jscript-joao-carlos.