The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Notifications in widget!

View previous topic View next topic Go down

Notifications in widget!

Post by JScript on June 18th 2015, 9:01 pm

This code was based on an idea in another forum and reposted here in this topic: http://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

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: Notifications in widget!

Post by SLGray on March 20th 2016, 3:16 am

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.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36751
Reputation : 2449
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: Notifications in widget!

Post by Zuke on March 24th 2016, 12:28 am

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

10/10

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Re: Notifications in widget!

Post by Chromo on April 10th 2016, 8:19 am

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

Anyway, the code only works on homepage.

Chromo
Forumember

Male Posts : 122
Reputation : 19
Language : said the Captain

Back to top Go down

Re: Notifications in widget!

Post by SLGray on April 10th 2016, 11:30 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36751
Reputation : 2449
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum