Best Style

Você não está conectado. Conecte-se ou registre-se

Estatisticas do Chatbox em tempo real

Ir em baixo  Mensagem [Página 1 de 1]

Sliw

avatar
Administrador
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:

Ver perfil do usuário http://beststyle.forumeiros.com

Sliw

avatar
Administrador
Tutorial Aceito

Ver perfil do usuário http://beststyle.forumeiros.com

Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum