Compartilhe
Ir em baixo
avatar
Administrador
Mensagens : 441
Pontos : 10641
Reputação : 120
Ver perfil do usuáriohttp://beststyle.forumeiros.com

Estatisticas do Chatbox em tempo real

em 21.12.15 11:20
Informações:
Autor
: Sliw
Funcionalidade: PunBB




Nesse Tutorial iremos ensinar como por estatísticas referente ao chatbox.

Acesse:
Painel de Controle Modulos Html e Javascript Gestão dos codigos Javascript
Crie um novo Javascript com investimento no indice com esse codigo:
Código:
;$(window).load(function(){
 
  var messages = ~~$("#frame_chatbox").contents().find('.user-msg .user').length;
  var online = ~~$("#frame_chatbox").contents().find('.online-users li').length;
  var absent = ~~$("#frame_chatbox").contents().find('.away-users li').length;
  var infos =
      '<div class="chat-infos">' +
      '  Total de mensagens: <span class="chat-info chat-info-messages">' + messages + '</span>' +
      '  Total de usuários: <span class="chat-info chat-info-online">' + parseInt(online + absent) + '</span>' +
      '  Total de usuários ausentes: <span class="chat-info chat-info-absent">' + absent + '</span>' +
      '  Total de usuários online: <span class="chat-info chat-info-total">' + online + '</span>' +
      '</div>';

  $(".chatbox").after(infos);

  setInterval(function(){
      $('.chat-info-messages').html($("#frame_chatbox").contents().find('.user-msg .user').length);
  }, 2000);

});

Feito isto acesse:
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo
Adicione esse codigo CSS em sua folha de estilo:
Código:
/* Chat infos */
.chat-infos{
  font-size: 1.2em;
  padding: 1em .4em .4em;
  text-align: center;
}
.chat-info{
  background: #eee;
  padding: .1em .7em;
  border-radius: 3px;
}

Resultado:

avatar
Administrador
Mensagens : 441
Pontos : 10641
Reputação : 120
Ver perfil do usuáriohttp://beststyle.forumeiros.com

Re: Estatisticas do Chatbox em tempo real

em 21.12.15 11:21
Tutorial Aceito
Voltar ao Topo
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum