Notification widget

I have a notification widget installed on my phpBB3 forum bit it only works if I have the notification area of the top toolbar turned on....which I don't.

Is there any way to have this widget working WITHOUT turning the top toolbar on? Or hiding the top toolbar completely?

Widget code is:

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>


To deactivate the FM toolbar, in you ACP > Modules > Toolbar > Configuration > Activate toolbar = NO > save.

I know. But if I do that it makes it inactive and then the widget doesn't work.

The widget just looks much nicer than the toolbar.

Try this CSS:

Code:

#fa_toolbar.fa_fix.fa_toolbar_XL_Sized {display:none}

It will still be active, but hidden.

Oh brilliant. I'll give that a shot and get back to you.

Many thanks!

If you want to hide the notifications area in the FM toolbar, but still want to keep the rest of the toolbar to remain visible, cancel the last CSS I gave you and replace it with this line:

Code:

#fa_notifications {display:none!important}

Because with the toobar totally hidden you 'd otherwise need to create new navigation links for your members to be able to get into their profiles and PM boxes:

/privmsg?folder=inbox
//profile?mode=editprofile&page_profil=preferences

I've just tried the first code you gave me. I saved that in the CSS, turned the toolbar on and it's still there (??).
The notification widget was working but the toolbar was still visible.

Just to ensure we're talking about the same thing, I'm referring to the very top bar with the notifications in the top right corner (pic below).

TroyEccles wrote:I've just tried the first code you gave me. I saved that in the CSS, turned the toolbar on and it's still there (??).
The notification widget was working but the toolbar was still visible.

Just to ensure we're talking about the same thing, I'm referring to the very top bar with the notifications in the top right corner (pic below).

Right. I'm sure we're talking about the same thing. I just never tried hiding notifications before using CSS. Now, please try that last code ^^ I gave you (read back).

https://fmdesign.forumotion.com/t949-notification-widget#19282

The second code you gave me hides the notification part. Toolbar is still there but the notifications are gone.

I did a search in my CSS for "toolbar" and there was some code to colour the toolbar the same as the rest of my forum. I removed it completely in case that was conflicting with your first code. Then popped the first code back in, checked the toolbar was ON and....still there!

How odd.

TroyEccles wrote:The second code you gave me hides the notification part. Toolbar is still there but the notifications are gone.

That's what it's supposed to do

TroyEccles wrote:I did a search in my CSS for "toolbar" and there was some code to colour the toolbar the same as the rest of my forum. I removed it completely in case that was conflicting with your first code. Then popped the first code back in, checked the toolbar was ON and....still there!

How odd.

Well, I'm not seeing no toolbar now (as a guest). Perhaps you should check your ACP the toolbar is active and get back the original CSS again and get rid of my 1st CSS line I gave you and just add the 2nd one. Let me know after, pls.

I don't know if that notification widget of yours also covers incoming friend requests. The downside to the story could be they won't be able to see friend requests coming in no more as well if not. So people would have to check for them in their profiles regularly in that case...

Samantha, try again now. I'd turned it back off again.

It's on now and your first code is in my CSS...

Yeah, toolbar is visible now. Since I can't check the notifications area as a guest, please let me know if it works for you the way you requested it.

EDIT: I just saw you still have this line in it: http://prntscr.com/c825jn . It should be replaced with the second CSS I gave you

#fa_notifications {display:none!important}

That code hides the notifications but I'd like the WHOLE toolbar gone if I could.
Is that what the first code did?

I've PM'd you an admin password for the issue on the other thread. Use it for this issue too if you like.

Hi @TroyEccles,

Add the following CSS rule to your stylesheet to hide the toolbar :

Code:

body #fa_toolbar, body #fa_toolbar_hidden {
  display:none;
}

If that doesn't work, simply add !important to the display declaration.

AWESOME SAUCE!!!!!!

This is solved!

Thank you Ange. Thank you Samantha!