Notificação de mensagem privada

Detalhes da questão

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

Descrição

Oi, eu queria adicionar quando a pessoa me enviasse um MP, eu recebesse essa notificação pela caixinha de mensagem




queria que desse notificação quando eu receber uma mensagem.

Olá,

Crie uma nova página JavaScript com investimento em todas as páginas, com o seguinte código:

Código:

(function($, CSS) {
    'use strict';

    var config = {
        img: 'https://2img.net/i/fa/modernbb/topic_unread.png',
        folder: 'inbox'
    };
  
    $(function() {

      if (!_userdata.session_logged_in) return;

        $.get('/privmsg?folder=' + config.folder)
            .done(function(context) {
                if ($('.icon[style$="' + config.img + ');', context).length != 0) {

                    $('<span>', {
                        'class': 'new-mps'
                    }).insertBefore('a[href="/privmsg?folder=' + config.folder + '"]');

                    $('<style>')
                        .text(CSS.join('\n'))
                        .appendTo('head');
                }
            })
            .fail(function() {
                alert('Ocorreu algum erro!');
            });
    });
}(jQuery, [
    '.new-mps:after { ',
    'content: "";',
    'width: 10px;',
    'height: 10px;',
    'display: block;',
    'position: absolute;',
    'background-color: tomato;',
    'border-radius: 50%;',
    '}'
]));

Atenciosamente,
Sleep

Olá sleep, funcionou mas eu queria como neste tópico

https://ajuda.forumeiros.com/t115047-topic

eu queria que quando tivesse uma mensagem, ficasse no icone um numero de mensagem sabe?

weverson lopes escreveu:Olá sleep, funcionou mas eu queria como neste tópico

https://ajuda.forumeiros.com/t115047-topic

eu queria que quando tivesse uma mensagem, ficasse no icone um numero de mensagem sabe?

Olá,

o Link fornecido funciona da maneira que o código passado por mim.

O que deseja é que apareça por exemplo o numero total das novas mensagens correto?

Atenciosamente,
Sleep

Oiii sleep

siiim era assim que eu gostaria rsrsrs, desculpe se não expliquei

Olá,

Crie um novo código JavaScript com o seguinte conteúdo:

Código:

$(function(e) { var mp = document.getElementById('i_icon_mini_new_message');if(!mp) return; var mps = $(mp).attr("alt").match(/[0-9]+/); $('a[href^="./privmsg?folder=inbox"]').attr('data-counter', ''+mps+''); });

Agora adicione a sua folha de estilos:

Código:

[data-counter]::after {
    background: #FFF none repeat scroll 0% 0% padding-box;
    height: 5px;
    content: attr(data-counter);
    position: absolute;
    padding: 2px 4px 9px;
    border-radius: 2px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.4), 0px 0px 1px rgba(0, 0, 0, 0.21) inset, 0px 10px 0px rgba(255, 255, 255, 0.11) inset;
    font: 800 9px "Helvetica Neue",sans-serif;
    color: #FBA700;
    text-decoration: none;
    margin-left: -44.9%;
    margin-top: 14px;
}

Resultado: http://prntscr.com/sq6ppt

Atenciosamente,
Sleep

Oi Sleep, Obrigado pela ajuda

funcionou mas funcionou na barra de ferramentas, eu gostaria que fosse aqui

Olá @weverson lopes,

Como o senhor tem uma barra de navegação customizada, poderia passar uma conta teste do seu fórum sem qualquer poder de moderação / administração, agradecia!


Aguardo uma resposta sua,
pedxz.

@Pedxz Oiii pedx boooom diaaaaa

vou te mandar

Login: testes58 e senha: teste123456

Sleep escreveu:Olá,

Crie um novo código JavaScript com o seguinte conteúdo:

Código:

$(function(e) { var mp = document.getElementById('i_icon_mini_new_message');if(!mp) return; var mps = $(mp).attr("alt").match(/[0-9]+/); $('a[href^="./privmsg?folder=inbox"]').attr('data-counter', ''+mps+''); });

Agora adicione a sua folha de estilos:

Código:

[data-counter]::after {
    background: #FFF none repeat scroll 0% 0% padding-box;
    height: 5px;
    content: attr(data-counter);
    position: absolute;
    padding: 2px 4px 9px;
    border-radius: 2px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.4), 0px 0px 1px rgba(0, 0, 0, 0.21) inset, 0px 10px 0px rgba(255, 255, 255, 0.11) inset;
    font: 800 9px "Helvetica Neue",sans-serif;
    color: #FBA700;
    text-decoration: none;
    margin-left: -44.9%;
    margin-top: 14px;
}

Resultado: http://prntscr.com/sq6ppt

Atenciosamente,
Sleep

weverson lopes escreveu:Oi Sleep, Obrigado pela ajuda

funcionou mas funcionou na barra de ferramentas, eu gostaria que fosse aqui

Esse código não funcionará já que o senhor não usa a barra de navegação nativa dos fóruns gratuitos Forumeiros pelo qual o elemento i_icon_mini_new_message não existe. Eu posso melhorar o primeiro código passado, adicionado um contador de mensagens privadas, o que acha?

Pode ser sim pdx rsrs Obrigadooo <3

Altere para:

Código:

(function($, CSS) {
    'use strict';
 
    var config = {
      /* Nome e formato da imagem de "não lido" das massagens */
        img: 'topic_unread.png',
        folder: 'inbox'
    };
 
    $(function() {
     
        if (!_userdata.session_logged_in) return;
 
        $.get('/privmsg?folder=' + config.folder)
            .done(function(context) {
             
              var $icon = $('.icon[style$="' + config.img + ');', context);
             
                if ($icon.length != 0) {
             
                    $('<span>', {
                        'class': 'new-mps',
                        'data-count': $icon.length
                    }).insertBefore('a[href="/privmsg?folder=' + config.folder + '"]');
 
                    $('<style>')
                        .text(CSS.join('\n'))
                        .appendTo('head');
                }
            })
            .fail(function() {
                alert('Ocorreu algum erro!');
            });
    });
}(jQuery, [
    '.new-mps:after { ',
    'content: attr(data-count);',
    'width: max-content;',
    'color: white;',
    'text-align: center;',
    'min-width: 15px;',
    'height: max-content;',
    'display: block;',
    'position: absolute;',
    'background-color: rgb(255, 0, 64);',
    '-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.0), 0 1px 2px rgba(0,0,0,0.14), inset 0 0 1px 1px rgba(0,0,0,.1);',
    '  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.0), 0 1px 2px rgba(0,0,0,0.14), inset 0 0 1px 1px rgba(0,0,0,.1);',
    '        box-shadow: 0 1px 3px rgba(0,0,0,0.0), 0 1px 2px rgba(0,0,0,0.14), inset 0 0 1px 1px rgba(0,0,0,.1);',
    '-webkit-border-radius: .2rem;',
    '  -moz-border-radius: .2rem;',
    '        border-radius: .2rem;',
    'font-size: 11px;',
    'font-weight: bolder;',
    'font-family: Segoe UI, SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif!important;',
    'text-shadow: 1px 1px 4px rgba(0,0,0,0.2);',
    'padding: 4px;',
    'animation: pulse-animation 2s linear infinite;',
    '-webkit-box-sizing: border-box;',
    '  -moz-box-sizing: border-box;',
    '        box-sizing: border-box;',
    '}',
    '',
    '@keyframes pulse-animation {',
    ' 0% {',
    '  webkit-box-shadow: 0 0 0 0 rgba(255, 0, 64, 0.7), 0 0 0 0 rgba(255, 0, 64, 0.7);',
    '    -moz-box-shadow: 0 0 0 0 rgba(255, 0, 64, 0.7), 0 0 0 0 rgba(255, 0, 64, 0.7);',
    '        box-shadow: 0 0 0 0 rgba(255, 0, 64, 0.7), 0 0 0 0 rgba(255, 0, 64, 0.7);',
    ' }',
    ' 40% {',
    '  webkit-box-shadow: 0 0 0 15px rgba(255, 0, 64, 0), 0 0 0 0 rgba(255, 0, 64, 0.7);',
    '    -moz-box-shadow: 0 0 0 15px rgba(255, 0, 64, 0), 0 0 0 0 rgba(255, 0, 64, 0.7);',
    '        box-shadow: 0 0 0 15px rgba(255, 0, 64, 0), 0 0 0 0 rgba(255, 0, 64, 0.7);',
    ' }',
    ' 80% {',
    '  webkit-box-shadow: 0 0 0 15px rgba(255, 0, 64, 0), 0 0 0 10px rgba(255, 0, 64, 0);',
    '    -moz-box-shadow: 0 0 0 15px rgba(255, 0, 64, 0), 0 0 0 10px rgba(255, 0, 64, 0);',
    '        box-shadow: 0 0 0 15px rgba(255, 0, 64, 0), 0 0 0 10px rgba(255, 0, 64, 0);',
    '}',
    ' 100% {',
    '  webkit-box-shadow: 0 0 0 0 rgba(255, 0, 64, 0), 0 0 0 10px rgba(255, 0, 64, 0);',
    '    -moz-box-shadow: 0 0 0 0 rgba(255, 0, 64, 0), 0 0 0 10px rgba(255, 0, 64, 0);',
    '          box-shadow: 0 0 0 0 rgba(255, 0, 64, 0), 0 0 0 10px rgba(255, 0, 64, 0);',
    ' }',
    '}'
]));

Funcionouuuu era exatamente assim que eu queria haha, Obrigadoooo <3