0

Estou a criar troca de mensagens interna no meu projeto, como mostro na imagem:

inserir a descrição da imagem aqui

No botão com a imagem rodeada a vermelho pretendia mostrar um alerta com o número de mensagens ainda não lidas, que se encontram a negrito, desta forma como mostro na imagem abaixo rodeado a vermelho:

inserir a descrição da imagem aqui

Botão onde pretendo criar o alerta:

<td class="td-info view_data apagar" id="<?php echo $row["Id"]; ?>,<?php echo $row["Para"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $row["Status"] != '0'?' style="font-weight:bold" ':' style="font-weight:normal" '?>>

Tabela onde recebo as mensagens:

<table id="table" class="table table-bordered">  
        <tr> 
            <th width="20%" style="text-align:center">De</th>
            <th width="60%" style="text-align:center">Assunto</th>
            <th width="10%" style="text-align:center">Prioridade</th>
            <th width="10%" style="text-align:center">Recebido</th>             
        </tr>
<?php  
    while($row = mysqli_fetch_array($result))  
        {  
?> 
        <tr>
        <th width="10%" colspan=4>Recebido: <?php echo $row["Data"]; ?></th>
        </tr>       

        <tr>  
        <td><?php echo $row["De"]; ?></td>
        <td class="td-info view_data apagar" id="<?php echo $row["Id"]; ?>,<?php echo $row["Para"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $row["Status"] != '0'?' style="font-weight:bold" ':' style="font-weight:normal" '?>><?php echo $row["Assunto"]; ?></td>  
        <td><?php echo $row["Prioridade"]; ?></td> 
        <td><?php echo $row["Hora"]; ?></td>
        </tr>
<?php  
        }  
?> 
    </table> 
2
  • 1
    sem vc o exemplo de como está o seu código é difícil ajudar, mas acredito que isso seja resolvido com css e não javascript Commented 29/03/2019 às 16:51
  • @Ricardo Pontual editei a pergunta com o código
    – Bruno
    Commented 29/03/2019 às 17:04

1 Resposta 1

1

Pelo que eu entendi, você vai rodar a sua query e vai receber um valor numérico de quantas mensagens novas existem para o usuário, certo?

Sendo assim, você pode chamar uma função javascript passando o valor numérico recebido da query.

Se passar 0 não aparece nada se passar um valor maior que 0 esse valor aparece no ícone.

No exemplo eu coloquei um CSS que deixa o badge vermelho e a fonte branca, além disso adiciona um icone caixa de entrada e os posicionamentos.

O javascript tem a função e eu chamo a função com um document.getElementById. Note que coloquei o nome msgNumero como id no comando document.getElementById e no span onde quero que apareça o número.

Vc pode mudar as cores, tamanhos, icones, etc.

function novasMensagens(numero) {
  var retorno = numero > 0 ? numero : "";
  return retorno;
}

document.getElementById("msgNumero").innerHTML = novasMensagens(5);
body {
  font-family: Arial, Helvetica, sans-serif, color: black;
}

.notification {
  color: black;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
}

.notification .badge {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: red;
  color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<a href="#" class="notification">
  <i class="glyphicon glyphicon-envelope" style='font-size:50px;'></i>
  <span class="badge" id='msgNumero'></span>
</a>

4
  • como passo o valor da query para a função?
    – Bruno
    Commented 1/04/2019 às 9:39
  • Olá. Você tem algumas opções para isso. Uma delas é usando a requisição de servidor. Ou seja, você cria o método em PHP (GET, por exemplo) e então, via javascript, ajax, você busca o valor e passa para sua função. Outra forma, que não é a das melhores, é no seu código PHP vc chamar o javascript e chamar a função. Ex: <script> novasMensagens("<?php echo $varphp;?>"); </script> Commented 1/04/2019 às 10:46
  • pode ajudar nesta pergunta, porque tem a ver com esta pergunta, que é o retorno por ajax para a função link
    – Bruno
    Commented 1/04/2019 às 11:38
  • Olá. Eu adicionei uma nova resposta la na outra pergunta, olha se ela te ajuda. link Commented 1/04/2019 às 15:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .