[TUTORIAL] Efeito hover nos números de mensagens e tópicos (Phpbb3)

Com um pequeno javascript vamos personalizar a area que mostra a quantidade de tópicos e mensagens de uma seção dando um efeito de entrada na quantidade de tópicos e mensagens que há no fórum.

--> Tutoriais <--
Efeito entrada nos números de mensagens e tópicos

1º - Páginas .JS:
Com essa opção será possível adicionar-mos o Javascript ao fórum sem muitos problemas, mas lembre-se que antes de publicar essa página .JS,
pré-visualize a mesma.
Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>

Título - Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização - São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções: No índice : O código será aplicado ao índice do fórum. No portal : O código será aplicado ao Portal do fórum. Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns. Sobre os temas : O código será aplicado aos tópicos do fórum. Na galeria : O código será aplicado na sua Galeria de imagens. Em todas as páginas : O código será aplicado em todas as páginas do fórum.

Código JavaScript - Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript - Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

2º - Aplicação do código:
Em sua nova página .JS, vamos em Investimento, marcar a opção No índice e colar o seguinte código:

Código:

$(function(){$('li.row dd.topics, li.row dd.posts, li.header dd.topics, li.header dd.posts').css('display','none');$('li.row').hover(function(){posts=$(this).find('dd.posts').html();topics=$(this).find('dd.topics').html();$(this).find('dd.dterm div h3').append('<span class="row_info" style="display: none; background-color: #F3F3F3; border: 1px solid #eee; padding: 3px; margin-left: 20px; width: auto;"><strong>'+topics+'</strong> tópicos e <strong>'+posts+'</strong> mensagens</span>');$('.row_info').show(2000).css('display','inline')},function(){$('.row_info').hide(2000).remove()})});

• Resultado:
  

---

© Shiftactif

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Efeito entrada nos números de mensagens e tópicos