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:
Result:
Note: The bar needs to be less active and even can be hidden, no problem!
JS
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