Notificação na barra de navegação

por Nikkon 27.11.20 2:37

Detalhes da questão

Endereço do fórum: https://pernaesquerda.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Eu de novo, espero não estar incomodando, eu estou muito grata com a vossa ajuda até agora u-u

Vi um tópico aqui sobre colocar as notificações na barra de navegação, mas infelizmente ela fica carregando infinitamente, não aparece nenhuma notificação e se fico no topo do fórum ela corta a parte branca.

Gostaria de colocar essa imagem no lugar do icone, a bola vermelha com os números no meio do sino e gostaria que as notificações ficassem entra as mensagens e o log off

aqui alguns erros que dá:

codigo atual:

Código:: /** *! Modificação nas notificações. * * @author Luiz~ * @see Fórum" target="_blank">https://ajuda.forumeiros.com">Fórum dos Fóruns * @licence MIT */ (function ($) { 'use strict'; var config = { max: 7, error: [ 'Houve um erro ao tentar carregar as notificações.', 'Caso o problema continue, contate o suporte técnico.' ].join('\n') }; $(window).on('load', function () { var $logout = $('ul.navlinks li a#logout'); if (!$logout.length) { return; } var $faNotifyTrigger = $('<li>') .html([ '<a href="javascript:void(0)" class="mainmenu fa fa-bell" id="fa-custom-notification-trigger">', ' <span class="pmlist-qtt">0</span>', '</a>' ].join('\n')) .insertAfter('ul.navlinks li:first') .on('click', function (event) { event.stopPropagation(); $faNotifyContent.toggleClass('hidden'); }) ; $(document).on('click', function () { if ($('.fa-notify-wrapper').is('.hidden')) { return; } $('.fa-notify-wrapper').toggleClass('hidden'); }); var $faNotifyContent = $([ '<div class="fa-notify-wrapper hidden">', ' <header class="fa-notify-header">', ' <h4>Notificações</h4>', ' <a href="/profile?mode=editprofile&page_profil=notifications">Ver mais e configurações</a>', ' </header>', ' <div class="fa-notify-inner">', ' <div class="fa-notify-list">', ' <span class="fa-notify-loading">Carregando...</span>', ' </div>', ' <div class="fa-notify-date">', ' </div>', ' </div>', '</div>', ].join('\n')) .appendTo('#fa-custom-notification-trigger') .on('click', function (event) { event.stopPropagation(); }) ; var cookiedPmlistCount = my_getcookie('fa_mplist_count'); if (cookiedPmlistCount) { $faNotifyTrigger .find('span') .text(cookiedPmlistCount) ; } $.get('/profile', { mode: 'editprofile', page_profil: 'notifications' }) .done(function (context) { var $wrap = $('[name="notif_list"]', context); var $item = $wrap.find('table tr td:first-child'); $item.each(function () { var $this = $(this); var $row = $(this).parent('tr'); var text = $this.html(); $('.fa-notify-loading').hide(); if ($row.index() < config.max) { $faNotifyContent .find('.fa-notify-list') .append([ '<div class="notify-item">', ' ' + text, '</div>' ].join('\n')) ; } var notifyCount = $faNotifyContent .find('.fa-notify-list .notify-item') .length ; my_setcookie('fa_mplist_count', notifyCount); var cookiedPmlistCount = my_getcookie('fa_mplist_count'); $faNotifyTrigger .find('span') .text(cookiedPmlistCount) ; }); }) .fail(function () { console.warn(config.error); }) ; var styles = [ '@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);', '', '.hidden,', 'html body div #fa_notifications {', ' opacity: 0!important;', ' pointer-events: none!important;', '}', '', 'div#fa_toolbar {', ' display: none;', '}', '', 'a#fa-custom-notification-trigger {', ' color: #666!important;', ' background-color: #fff;', ' font-size: 17px;', ' border-radius: 3px;', ' padding: 2px;',/* ' margin-right: 50px;',*/ ' position: relative;', '}', '', 'a#fa-custom-notification-trigger span {', ' position: absolute;', ' background-color: #e54732;', ' color: #fff;', ' font-size: 10px;', ' font-family: Arial, sans-serif;', ' padding: 1px 3.5px;', ' line-height: 11px;', ' border-radius: 999px;', '}', '', '.fa-notify-wrapper {', ' background: #FFF;', ' border-radius: 2px;', ' border: solid 1px #ddd;', ' box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);', ' margin-top: 20px;', ' padding: 20px 13px;', ' left: 0!important;', ' top: 0!important;', ' width: 255px;', ' z-index: 999;', ' position: absolute;', ' display: block;', ' font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";', ' font-size: 13px;', '}', '', '.fa-notify-wrapper,', '.fa-notify-wrapper * {', ' box-sizing: border-box;', '}', '', '.fa-notify-wrapper header h4 {', ' color: #666;', ' font-weight: 600;', ' font-size: 21px;', ' margin-top: 0px;', ' margin-bottom: 5px;', ' display: table;', '}', '', '.fa-notify-wrapper header a {', ' display: block;', ' padding-bottom: 15px;', ' text-align: left!important;', '}', '', '.fa-notify-wrapper a { ', ' color: black!important', '}', '', '.fa-notify-wrapper a, ', '.fa-notify-wrapper a:hover {', ' background-color: transparent!important;', ' color: grey!important;', ' box-shadow: none!important;', ' float: none!important;', '}', '', '.fa-notify-wrapper header {', ' display: block;', ' position: relative;', ' border-bottom: solid 1px #ddd;', ' margin-bottom: 15px;', '}', '', '.fa-notify-list {', ' counter-reset: section;', '}', '', '.notify-item {', ' text-align: left!important;', ' margin-bottom: 15px;', ' line-height: 1.2rem;', '}', '', '.notify-item::before {', ' counter-increment: section;', ' content: counter(section);', ' background-color: #ddd;', ' border-radius: 10px;', ' padding: 1.5px 7px;', ' color: #666666;', ' margin-right: 4px;', '}' ].join('\n'); $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head'); }); }(jQuery));

por **tikky** 27.11.20 11:11

Olá @Nikkon,

mas infelizmente ela fica carregando infinitamente, não aparece nenhuma notificação

Entre no Painel de controle > Módulos > Barra de Ferramentas > Configuração e ative a barra de ferramentas!

Gostaria de colocar essa imagem no lugar do icone

Altere o seu código para:

Código:: /** *! Modificação nas notificações. * * @author Luiz~ * @see Fórum" target="_blank">https://ajuda.forumeiros.com">Fórum dos Fóruns * @licence MIT */ (function ($) { 'use strict'; var config = { max: 7, error: [ 'Houve um erro ao tentar carregar as notificações.', 'Caso o problema continue, contate o suporte técnico.' ].join('\n') }; $(window).on('load', function () { var $logout = $('ul.navlinks li a#logout'); if (!$logout.length) { return; } var $faNotifyTrigger = $('<li>') .html([ '<a href="javascript:void(0)" class="mainmenu" id="fa-custom-notification-trigger">', ' <img loading="lazy" src="https://i.ibb.co/0ZPwhMP/tgrwhhrh.png" alt="Notificações" /><span class="pmlist-qtt">0</span>', '</a>' ].join('\n')) .insertAfter('ul.navlinks a[href="/privmsg?folder=inbox"]').parent() .on('click', function (event) { event.stopPropagation(); $faNotifyContent.toggleClass('hidden'); }) ; $(document).on('click', function () { if ($('.fa-notify-wrapper').is('.hidden')) { return; } $('.fa-notify-wrapper').toggleClass('hidden'); }); var $faNotifyContent = $([ '<div class="fa-notify-wrapper hidden">', ' <header class="fa-notify-header">', ' <h4>Notificações</h4>', ' <a href="/profile?mode=editprofile&page_profil=notifications">Ver mais e configurações</a>', ' </header>', ' <div class="fa-notify-inner">', ' <div class="fa-notify-list">', ' <span class="fa-notify-loading">Carregando...</span>', ' </div>', ' <div class="fa-notify-date">', ' </div>', ' </div>', '</div>', ].join('\n')) .appendTo('#fa-custom-notification-trigger') .on('click', function (event) { event.stopPropagation(); }) ; var cookiedPmlistCount = my_getcookie('fa_mplist_count'); if (cookiedPmlistCount) { $faNotifyTrigger .find('span') .text(cookiedPmlistCount) ; } $.get('/profile', { mode: 'editprofile', page_profil: 'notifications' }) .done(function (context) { var $wrap = $('[name="notif_list"]', context); var $item = $wrap.find('table tr td:first-child'); $item.each(function () { var $this = $(this); var $row = $(this).parent('tr'); var text = $this.html(); $('.fa-notify-loading').hide(); if ($row.index() < config.max) { $faNotifyContent .find('.fa-notify-list') .append([ '<div class="notify-item">', ' ' + text, '</div>' ].join('\n')) ; } var notifyCount = $faNotifyContent .find('.fa-notify-list .notify-item') .length ; my_setcookie('fa_mplist_count', notifyCount); var cookiedPmlistCount = my_getcookie('fa_mplist_count'); $faNotifyTrigger .find('span') .text(cookiedPmlistCount) ; }); }) .fail(function () { console.warn(config.error); }) ; var styles = [ '@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);', '', '.hidden,', 'html body div #fa_notifications {', ' opacity: 0!important;', ' pointer-events: none!important;', '}', '', 'div#fa_toolbar {', ' display: none;', '}', '', 'a#fa-custom-notification-trigger {', /*' color: #666!important;', ' background-color: #fff;', ' font-size: 17px;', ' border-radius: 3px;', ' padding: 2px;', ' margin-right: 50px;',*/ ' position: relative;', '}', '', 'a#fa-custom-notification-trigger span {', ' position: absolute;', ' background-color: #e54732;', ' color: #fff;', ' font-size: 10px;', ' font-family: Arial, sans-serif;', ' padding: 1px 3.5px;', ' line-height: 11px;', ' border-radius: 999px;', '}', '', '.fa-notify-wrapper {', ' background: #FFF;', ' border-radius: 2px;', ' border: solid 1px #ddd;', ' box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);', ' margin-top: 20px;', ' padding: 20px 13px;', ' left: 0!important;', ' top: 0!important;', ' width: 255px;', ' z-index: 999;', ' position: absolute;', ' display: block;', ' font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";', ' font-size: 13px;', '}', '', '.fa-notify-wrapper,', '.fa-notify-wrapper * {', ' box-sizing: border-box;', '}', '', '.fa-notify-wrapper header h4 {', ' color: #666;', ' font-weight: 600;', ' font-size: 21px;', ' margin-top: 0px;', ' margin-bottom: 5px;', ' display: table;', '}', '', '.fa-notify-wrapper header a {', ' display: block;', ' padding-bottom: 15px;', ' text-align: left!important;', '}', '', '.fa-notify-wrapper a { ', ' color: black!important', '}', '', '.fa-notify-wrapper a, ', '.fa-notify-wrapper a:hover {', ' background-color: transparent!important;', ' color: grey!important;', ' box-shadow: none!important;', ' float: none!important;', '}', '', '.fa-notify-wrapper header {', ' display: block;', ' position: relative;', ' border-bottom: solid 1px #ddd;', ' margin-bottom: 15px;', '}', '', '.fa-notify-list {', ' counter-reset: section;', '}', '', '.notify-item {', ' text-align: left!important;', ' margin-bottom: 15px;', ' line-height: 1.2rem;', '}', '', '.notify-item::before {', ' counter-increment: section;', ' content: counter(section);', ' background-color: #ddd;', ' border-radius: 10px;', ' padding: 1.5px 7px;', ' color: #666666;', ' margin-right: 4px;', '}' ].join('\n'); $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head'); }); }(jQuery));

Aqui alguns erros que dá

Não consigo replicar o/a senhor/a tem alguma conta teste no seu fórum para que possa resolver?!

Aguardamos uma resposta sua!
Atenciosamente,
pedxz.

por Nikkon 27.11.20 16:11

Olá Pedxz, Ativei a barra, gostaria que tivesse um X pra deletar cada notificação, pois ela fica la pra sempre.

Coloquei o código, mas a img não apareceu
Notificação na barra de navegação Image

Sobre a conta:Teste senha:teste123

edit, arrumei esse problema sem querer, pois mudei como o navbar funciona, o problema é o resto u-u
Notificação na barra de navegação Image

por Nikkon 28.11.20 16:49

up

Modifiquei um pouco o codigo, vou colocar aqui:
está asism atualmente:

Notificação na barra de navegação Image

talvez ficou confuso o que gostaria, então vou falar tudo aqui, ainda gostaria de colocar uma img no lugar no futuro, mas por enquanto está bom assim, gostaria que colocasse o span q é o numero de notificação no meio do sino. A notificação fica para sempre na barra de notificação, gostaria de um x em cada notificação para deletar as que não quero mais, alem disso tudo, um erro interessante ocorre quando coloco pra "todas as paginas" o conteudo dos spoilers no forum desaparece nos tópicos, se eu mudo o opacity para 1 o spoiler volta a funcionar mas as notificaçoes ficam pra sempre na pagina.

Código:: 'html body div #fa_notifications {', ' pointer-events: none!important;', ' opacity: 0 !important;', '}',

fonte atual que estou usando, copiei algumas coisas do seu e botei no antigo

Código:: /** *! Modificação nas notificações. * * @author Luiz~ * @see Fórum" target="_blank">Fórum" target="_blank">https://ajuda.forumeiros.com">Fórum dos Fóruns * @licence MIT */ (function ($) { 'use strict'; var config = { max: 7, error: [ 'Houve um erro ao tentar carregar as notificações.', 'Caso o problema continue, contate o suporte técnico.' ].join('\n') }; $(window).on('load', function () { var $logout = $('ul.navlinks li a#logout'); if (!$logout.length) { return; } var $faNotifyTrigger = $('<li>') .html([ '<a href="javascript:void(0)" class="mainmenu fa fa-bell" id="fa-custom-notification-trigger">', ' <span class="pmlist-qtt">0</span>', '</a>' ].join('\n')) .insertAfter('ul.navlinks a[href="/privmsg?folder=inbox"]').parent() .on('click', function (event) { event.stopPropagation(); $faNotifyContent.toggleClass('hidden'); }) ; $(document).on('click', function () { if ($('.fa-notify-wrapper').is('.hidden')) { return; } $('.fa-notify-wrapper').toggleClass('hidden'); }); var $faNotifyContent = $([ '<div class="fa-notify-wrapper hidden">', ' <header class="fa-notify-header">', ' <h4>Notificações</h4>', ' <a href="/profile?mode=editprofile&page_profil=notifications">Ver mais e configurações</a>', ' </header>', ' <div class="fa-notify-inner">', ' <div class="fa-notify-list">', ' <span class="fa-notify-loading">Carregando...</span>', ' </div>', ' <div class="fa-notify-date">', ' </div>', ' </div>', '</div>', ].join('\n')) .appendTo('#fa-custom-notification-trigger') .on('click', function (event) { event.stopPropagation(); }) ; var cookiedPmlistCount = my_getcookie('fa_mplist_count'); if (cookiedPmlistCount) { $faNotifyTrigger .find('span') .text(cookiedPmlistCount) ; } $.get('/profile', { mode: 'editprofile', page_profil: 'notifications' }) .done(function (context) { var $wrap = $('[name="notif_list"]', context); var $item = $wrap.find('table tr td:first-child'); $item.each(function () { var $this = $(this); var $row = $(this).parent('tr'); var text = $this.html(); $('.fa-notify-loading').hide(); if ($row.index() < config.max) { $faNotifyContent .find('.fa-notify-list') .append([ '<div class="notify-item">', ' ' + text, '</div>' ].join('\n')) ; } var notifyCount = $faNotifyContent .find('.fa-notify-list .notify-item') .length ; my_setcookie('fa_mplist_count', notifyCount); var cookiedPmlistCount = my_getcookie('fa_mplist_count'); $faNotifyTrigger .find('span') .text(cookiedPmlistCount) ; }); }) .fail(function () { console.warn(config.error); }) ; var styles = [ '@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);', '', '.hidden,', 'html body div #fa_notifications {', ' pointer-events: none!important;', ' opacity: 0 !important;', '}', '', 'div#fa_toolbar {', ' display: none;', '}', '', 'a#fa-custom-notification-trigger {', ' color: #e93023 !important;', ' top: -4px;', ' font-size: 28px;', ' border-radius: 3px;', ' position: relative;', '}', '', 'a#fa-custom-notification-trigger span {', ' position: absolute;', ' color: #fff;', ' font-size: 12px;', ' font-family: Rajdhani, sans-serif;', ' padding: 1px 3.5px;', ' line-height: 11px;', ' border-radius: 999px;', '}', '', '.fa-notify-wrapper {', ' background: #FFF;', ' border-radius: 2px;', ' border: solid 1px #ddd;', ' box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);', ' margin-top: 20px;', ' padding: 20px 13px;', ' left: 0!important;', ' top: 14px !important;', ' width: 255px;', ' z-index: 999;', ' position: absolute;', ' display: block;', ' font-family: Rajdhani, sans-serif;', ' font-size: 13px;', '}', '', '.fa-notify-wrapper,', '.fa-notify-wrapper * {', ' box-sizing: border-box;', '}', '', '.fa-notify-wrapper header h4 {', ' color: #666;', ' font-weight: 600;', ' font-size: 21px;', ' margin-top: 0px;', ' margin-bottom: 5px;', ' display: table;', '}', '', '.fa-notify-wrapper header a {', ' display: block;', ' padding-bottom: 15px;', ' text-align: left!important;', '}', '', '.fa-notify-wrapper a { ', ' color: black!important', '}', '', '.fa-notify-wrapper a, ', '.fa-notify-wrapper a:hover {', ' background-color: transparent!important;', ' color: grey!important;', ' box-shadow: none!important;', ' float: none!important;', '}', '', '.fa-notify-wrapper header {', ' display: block;', ' position: relative;', ' border-bottom: solid 1px #ddd;', ' margin-bottom: 15px;', '}', '', '.fa-notify-list {', ' counter-reset: section;', '}', '', '.notify-item {', ' text-align: left!important;', ' margin-bottom: 15px;', ' line-height: 1.2rem;', '}', '', '.notify-item::before {', ' counter-increment: section;', ' content: counter(section);', ' background-color: #ddd;', ' border-radius: 10px;', ' padding: 1.5px 7px;', ' color: #666666;', ' margin-right: 4px;', '}' ].join('\n'); $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head'); }); }(jQuery));

por Nikkon 30.11.20 13:28

up

por **tikky** 30.11.20 14:06

um erro interessante ocorre quando coloco pra "todas as paginas" o conteudo dos spoilers no forum desaparece nos tópicos

O/A senhor/a pode ativar o script em todas as páginas, por favor?

por Nikkon 30.11.20 15:29

@pedxz feito u-u

por **tikky** 30.11.20 15:38

Altere o seu código para:

Código:: /** *! Modificação nas notificações. * * @author Luiz~ * @see Fórum" target="_blank">Fórum" target="_blank">https://ajuda.forumeiros.com">Fórum dos Fóruns * @licence MIT */ (function ($) { 'use strict'; var config = { max: 7, error: [ 'Houve um erro ao tentar carregar as notificações.', 'Caso o problema continue, contate o suporte técnico.' ].join('\n') }; $(window).on('load', function () { var $logout = $('ul.navlinks li a#logout'); if (!$logout.length) { return; } var $faNotifyTrigger = $('<li>') .html([ '<a href="javascript:void(0)" class="mainmenu fa fa-bell" id="fa-custom-notification-trigger">', ' <span class="pmlist-qtt">0</span>', '</a>' ].join('\n')) .insertAfter('ul.navlinks a[href="/privmsg?folder=inbox"]').parent() .on('click', function (event) { event.stopPropagation(); $faNotifyContent.toggleClass('hidden'); }) ; $(document).on('click', function () { if ($('.fa-notify-wrapper').is('.hidden')) { return; } $('.fa-notify-wrapper').toggleClass('hidden'); }); var $faNotifyContent = $([ '<div class="fa-notify-wrapper hidden">', ' <header class="fa-notify-header">', ' <h4>Notificações</h4>', ' <a href="/profile?mode=editprofile&page_profil=notifications">Ver mais e configurações</a>', ' </header>', ' <div class="fa-notify-inner">', ' <div class="fa-notify-list">', ' <span class="fa-notify-loading">Carregando...</span>', ' </div>', ' <div class="fa-notify-date">', ' </div>', ' </div>', '</div>', ].join('\n')) .appendTo('#fa-custom-notification-trigger') .on('click', function (event) { event.stopPropagation(); }) ; var cookiedPmlistCount = my_getcookie('fa_mplist_count'); if (cookiedPmlistCount) { $faNotifyTrigger .find('span') .text(cookiedPmlistCount) ; } $.get('/profile', { mode: 'editprofile', page_profil: 'notifications' }) .done(function (context) { var $wrap = $('[name="notif_list"]', context); var $item = $wrap.find('table tr td:first-child'); $item.each(function () { var $this = $(this); var $row = $(this).parent('tr'); var text = $this.html(); $('.fa-notify-loading').hide(); if ($row.index() < config.max) { $faNotifyContent .find('.fa-notify-list') .append([ '<div class="notify-item">', ' ' + text, '</div>' ].join('\n')) ; } var notifyCount = $faNotifyContent .find('.fa-notify-list .notify-item') .length ; my_setcookie('fa_mplist_count', notifyCount); var cookiedPmlistCount = my_getcookie('fa_mplist_count'); $faNotifyTrigger .find('span') .text(cookiedPmlistCount) ; }); }) .fail(function () { console.warn(config.error); }) ; var styles = [ '@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);', '', '.fa-notify-wrapper.hidden,', 'html body div #fa_notifications {', ' pointer-events: none!important;', ' opacity: 0 !important;', '}', '', 'div#fa_toolbar {', ' display: none;', '}', '', 'a#fa-custom-notification-trigger {', ' color: #e93023 !important;', ' top: -4px;', ' font-size: 28px;', ' border-radius: 3px;', ' position: relative;', '}', '', 'a#fa-custom-notification-trigger span {', ' position: absolute;', ' color: #000;', ' font-size: 12px;', ' font-family: Rajdhani, sans-serif;', ' padding: 1px 3.5px;', ' line-height: 11px;', ' border-radius: 50%;', 'right: 16px;', 'background: white;', 'height: 16px;', 'width: 16px;', 'line-height: 16px;', 'top: 3px;', '}', '', '.fa-notify-wrapper {', ' background: #FFF;', ' border-radius: 2px;', ' border: solid 1px #ddd;', ' box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);', ' margin-top: 20px;', ' padding: 20px 13px;', ' left: 0!important;', ' top: 14px !important;', ' width: 255px;', ' z-index: 999;', ' position: absolute;', ' display: block;', ' font-family: Rajdhani, sans-serif;', ' font-size: 13px;', '}', '', '.fa-notify-wrapper,', '.fa-notify-wrapper * {', ' box-sizing: border-box;', '}', '', '.fa-notify-wrapper header h4 {', ' color: #666;', ' font-weight: 600;', ' font-size: 21px;', ' margin-top: 0px;', ' margin-bottom: 5px;', ' display: table;', '}', '', '.fa-notify-wrapper header a {', ' display: block;', ' padding-bottom: 15px;', ' text-align: left!important;', '}', '', '.fa-notify-wrapper a { ', ' color: black!important', '}', '', '.fa-notify-wrapper a, ', '.fa-notify-wrapper a:hover {', ' background-color: transparent!important;', ' color: grey!important;', ' box-shadow: none!important;', ' float: none!important;', '}', '', '.fa-notify-wrapper header {', ' display: block;', ' position: relative;', ' border-bottom: solid 1px #ddd;', ' margin-bottom: 15px;', '}', '', '.fa-notify-list {', ' counter-reset: section;', '}', '', '.notify-item {', ' text-align: left!important;', ' margin-bottom: 15px;', ' line-height: 1.2rem;', '}', '', '.notify-item::before {', ' counter-increment: section;', ' content: counter(section);', ' background-color: #ddd;', ' border-radius: 10px;', ' padding: 1.5px 7px;', ' color: #666666;', ' margin-right: 4px;', '}' ].join('\n'); $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head'); }); }(jQuery));

por Nikkon 30.11.20 15:46

ficou perfeito Pedxz, unica coisa q falta é o x em cada notificação

Notificação na barra de navegação Image

por Nikkon 01.12.20 19:07

up

por Nikkon 04.12.20 3:34

up

por Nikkon 07.12.20 14:22

up

por Nikkon 09.12.20 3:20

up

por Nikkon 12.12.20 13:58

up...

por Nikkon 16.12.20 0:35

up

por **tikky** 21.12.20 15:47

Altere o seu código para:

Código:: /** *! Modificação nas notificações. * * @author Luiz~ * @see Fórum" target="_blank">Fórum" target="_blank">https://ajuda.forumeiros.com">Fórum dos Fóruns * @licence MIT */ (function ($) { 'use strict'; var config = { max: 7, error: [ 'Houve um erro ao tentar carregar as notificações.', 'Caso o problema continue, contate o suporte técnico.' ].join('\n') }; $(window).on('load', function () { var $logout = $('ul.navlinks li a#logout'); if (!$logout.length) { return; } var $faNotifyTrigger = $('<li>') .html([ '<a href="javascript:void(0)" class="mainmenu fa fa-bell" id="fa-custom-notification-trigger">', ' <span class="pmlist-qtt">0</span>', '</a>' ].join('\n')) .insertAfter('ul.navlinks a[href="/privmsg?folder=inbox"]').parent() .on('click', function (event) { event.stopPropagation(); $faNotifyContent.toggleClass('hidden'); }) ; $(document).on('click', function () { if ($('.fa-notify-wrapper').is('.hidden')) { return; } $('.fa-notify-wrapper').toggleClass('hidden'); }); var $faNotifyContent = $([ '<div class="fa-notify-wrapper hidden">', ' <header class="fa-notify-header">', ' <h4>Notificações</h4>', ' <a href="/profile?mode=editprofile&page_profil=notifications">Ver mais e configurações</a>', ' </header>', ' <div class="fa-notify-inner">', ' <form method="post" name="notif_opts" action="/profile?mode=editprofile&page_profil=notifications">', ' <div class="fa-notify-list">', ' <span class="fa-notify-loading">Carregando...</span>', ' </div>', ' <div class="fa-notify-date">', ' </div>', ' <fieldset class="submit-buttons"><input class="button1" type="submit" name="delete" value="Excluir"><input class="button1" type="submit" name="delete_all" value="Excluir Tudo" style="font-weight: bold;"></fieldset>', ' </form>', ' </div>', '</div>', ].join('\n')) .appendTo('#fa-custom-notification-trigger') .on('click', function (event) { event.stopPropagation(); }) ; var cookiedPmlistCount = my_getcookie('fa_mplist_count'); if (cookiedPmlistCount) { $faNotifyTrigger .find('span') .text(cookiedPmlistCount) ; } $.get('/profile', { mode: 'editprofile', page_profil: 'notifications' }) .done(function (context) { var $wrap = $('[name="notif_list"]', context); var $item = $wrap.find('table tr td:first-child'); $item.each(function () { var $this = $(this); var $row = $(this).parent('tr'); var text = $this.html(); var $delete = $this.parent().find('td:last').html(); $('.fa-notify-loading').hide(); if ($row.index() < config.max) { $faNotifyContent .find('.fa-notify-list') .append([ '<div class="notify-item">', ' ' + text, ' ' + $delete, '</div>' ].join('\n')) ; } var notifyCount = $faNotifyContent .find('.fa-notify-list .notify-item') .length ; my_setcookie('fa_mplist_count', notifyCount); var cookiedPmlistCount = my_getcookie('fa_mplist_count'); $faNotifyTrigger .find('span') .text(cookiedPmlistCount) ; }); }) .fail(function () { console.warn(config.error); }) ; var styles = [ '@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);', '', '.fa-notify-wrapper.hidden,', 'html body div #fa_notifications {', ' pointer-events: none!important;', ' opacity: 0 !important;', '}', '', 'div#fa_toolbar {', ' display: none;', '}', '', 'a#fa-custom-notification-trigger {', ' color: #e93023 !important;', ' top: -4px;', ' font-size: 28px;', ' border-radius: 3px;', ' position: relative;', '}', '', 'a#fa-custom-notification-trigger span {', ' position: absolute;', ' color: #000;', ' font-size: 12px;', ' font-family: Rajdhani, sans-serif;', ' padding: 1px 3.5px;', ' line-height: 11px;', ' border-radius: 50%;', 'right: 16px;', 'background: white;', 'height: 16px;', 'width: 16px;', 'line-height: 16px;', 'top: 3px;', '}', '', '.fa-notify-wrapper {', ' background: #FFF;', ' border-radius: 2px;', ' border: solid 1px #ddd;', ' box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);', ' margin-top: 20px;', ' padding: 20px 13px;', ' left: 0!important;', ' top: 14px !important;', ' width: 255px;', ' z-index: 999;', ' position: absolute;', ' display: block;', ' font-family: Rajdhani, sans-serif;', ' font-size: 13px;', '}', '', '.fa-notify-wrapper,', '.fa-notify-wrapper * {', ' box-sizing: border-box;', '}', '', '.fa-notify-wrapper header h4 {', ' color: #666;', ' font-weight: 600;', ' font-size: 21px;', ' margin-top: 0px;', ' margin-bottom: 5px;', ' display: table;', '}', '', '.fa-notify-wrapper header a {', ' display: block;', ' padding-bottom: 15px;', ' text-align: left!important;', '}', '', '.fa-notify-wrapper a { ', ' color: black!important', '}', '', '.fa-notify-wrapper a, ', '.fa-notify-wrapper a:hover {', ' background-color: transparent!important;', ' color: grey!important;', ' box-shadow: none!important;', ' float: none!important;', '}', '', '.fa-notify-wrapper header {', ' display: block;', ' position: relative;', ' border-bottom: solid 1px #ddd;', ' margin-bottom: 15px;', '}', '', '.fa-notify-list {', ' counter-reset: section;', '}', '', '.notify-item {', ' text-align: left!important;', ' margin-bottom: 15px;', ' line-height: 1.2rem;', '}', '', '.notify-item [name="del_notif[]"] {', ' float: right!important;', '}', '', '.notify-item::before {', ' counter-increment: section;', ' content: counter(section);', ' background-color: #ddd;', ' border-radius: 10px;', ' padding: 1.5px 7px;', ' color: #666666;', ' margin-right: 4px;', '}' ].join('\n'); $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head'); }); }(jQuery));

por Nikkon 25.12.20 0:01

@pedxz Agora que vi, me desculpe por demorar, coloquei o código e funcionou, porem quando aperto o botão de excluir a pagina redireciona para a pagina de notificações https://i.ibb.co/17c8B2r/image.png (tinham duas notificações e deletei só uma)

por **tikky** 04.01.21 17:39

Tópico resolvido

Tópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão.

Hitskin.com

Notificação na barra de navegação