Notificação na barra de navegação
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Notificação na barra de navegação
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));
Re: Notificação na barra de navegação
Olá @Nikkon,
Aguardamos uma resposta sua!
Atenciosamente,
pedxz.
Entre no Painel de controle > Módulos > Barra de Ferramentas > Configuração e ative a barra de ferramentas!mas infelizmente ela fica carregando infinitamente, não aparece nenhuma notificação
Altere o seu código para:Gostaria de colocar essa imagem no lugar do icone
- 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));
Não consigo replicar o/a senhor/a tem alguma conta teste no seu fórum para que possa resolver?!Aqui alguns erros que dá
Aguardamos uma resposta sua!
Atenciosamente,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Notificação na barra de navegação
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
Sobre a conta:Teste senha:teste123
edit, arrumei esse problema sem querer, pois mudei como o navbar funciona, o problema é o resto u-u
Coloquei o código, mas a img não apareceu
Sobre a conta:Teste senha:teste123
edit, arrumei esse problema sem querer, pois mudei como o navbar funciona, o problema é o resto u-u
Re: Notificação na barra de navegação
up
Modifiquei um pouco o codigo, vou colocar aqui:
está asism atualmente:
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.
fonte atual que estou usando, copiei algumas coisas do seu e botei no antigo
Modifiquei um pouco o codigo, vou colocar aqui:
está asism atualmente:
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));
Re: Notificação na barra de navegação
O/A senhor/a pode ativar o script em todas as páginas, por favor?um erro interessante ocorre quando coloco pra "todas as paginas" o conteudo dos spoilers no forum desaparece nos tópicos
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Notificação na barra de navegação
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));
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Notificação na barra de navegação
ficou perfeito Pedxz, unica coisa q falta é o x em cada notificação
Re: Notificação na barra de navegação
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));
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Notificação na barra de navegação
@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)
Re: Notificação na barra de navegação
Tópico resolvidoTópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão. |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Tópicos semelhantes
» Notificação de mensagem privada no menu de navegação
» Diminuir a notificação da barra de ferramentas
» [Plugin] Som na notificação da barra de ferramentas
» Barra de navegação acompanha a navegação
» Barra de navegação
» Diminuir a notificação da barra de ferramentas
» [Plugin] Som na notificação da barra de ferramentas
» Barra de navegação acompanha a navegação
» Barra de navegação
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos