Efeito hover nos sub fóruns

Página 2 de 2 Anterior  1, 2

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

  • 0

Resolvido Efeito hover nos sub fóruns

Mensagem por killerplay em 28/01/13, 07:49 pm

Relembrando a primeira mensagem :

Qual é minha questão:
Gostaria de Saber como faz o Efeito Hover nos Sub Foruns igual o do www.narutorpgakatsuki.com
Ele está invisivel ai quando coloca o mouse por cima eles aparecem!


Imagem sem o Mouse > http://i49.tinypic.com/xepqxc.png
Imagem com o MOuse > http://i50.tinypic.com/vxmekn.png

a Versao do Meu FOrum e PunBB

Endereço do meu fórum:
http://ajuda.forumeiros.com

Versão do fórum:
PHPBB3


Última edição por killerplay em 13/02/13, 01:10 pm, editado 2 vez(es)
avatar

killerplay
Nível 9

Masculino
Inscrito dia : 23/02/2011
Mensagens : 216
Pontos Ativos : 354

Ver perfil do usuário http://narutolegendrpg.ativoforum.com

Resolvido Re: Efeito hover nos sub fóruns

Mensagem por killerplay em 06/02/13, 07:13 pm

UP

killerplay
Nível 9

Inscrito dia : 23/02/2011
Mensagens : 216

Ver perfil do usuário http://narutolegendrpg.ativoforum.com

Resolvido Re: Efeito hover nos sub fóruns

Mensagem por Consolado em 08/02/13, 10:55 am

Olá!

Painel de controle >> Visualização >> Templates >> Geral >> index_box >>
Procure pela variável "{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}" e troque por:
Código:
<div class="sublinks">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
Salve e publique o template.

Painel de controle >> Visualização >> Imagens e Cores >> Cores >> Folha de estilos CSS >>
Cole o código e valide:
Código:
.sublinks{display:none}.table tbody.statused tr td.tcl:hover .sublinks{display:block}
Até mais!

Consolado
Super usuário

Inscrito dia : 09/05/2011
Mensagens : 4243

Ver perfil do usuário

Resolvido Re: Efeito hover nos sub fóruns

Mensagem por killerplay em 09/02/13, 05:07 pm

Funcionou!

Agora Quero Centralizar os Sub FOruns e também quero que o hover apareca mais suavemente entende!

Piscada

killerplay
Nível 9

Inscrito dia : 23/02/2011
Mensagens : 216

Ver perfil do usuário http://narutolegendrpg.ativoforum.com

Resolvido Re: Efeito hover nos sub fóruns

Mensagem por ™David™ em 09/02/13, 05:12 pm

Up

™David™
Usuário avançado

Inscrito dia : 13/01/2013
Mensagens : 426

Ver perfil do usuário http://cheatsgo.forum-pro.net/ http://facebook.com/DavidGabrielOficial http://twitter.com/DavidAlmeidaOn

Resolvido Re: Efeito hover nos sub fóruns

Mensagem por ™David™ em 10/02/13, 02:42 pm

affs troca de tema

™David™
Usuário avançado

Inscrito dia : 13/01/2013
Mensagens : 426

Ver perfil do usuário http://cheatsgo.forum-pro.net/ http://facebook.com/DavidGabrielOficial http://twitter.com/DavidAlmeidaOn

Resolvido Re: Efeito hover nos sub fóruns

Mensagem por killerplay em 10/02/13, 03:11 pm

Flooda aqui não --'
avatar

killerplay
Nível 9

Masculino
Inscrito dia : 23/02/2011
Mensagens : 216
Pontos Ativos : 354

Ver perfil do usuário http://narutolegendrpg.ativoforum.com

Resolvido Re: Efeito hover nos sub fóruns

Mensagem por Solkis em 10/02/13, 06:59 pm

Boa tarde,

Tente com esse código JS para fazer com que os subfóruns apareçam suavemente:
Código:
jQuery(function() {
    jQyery('.table tbody.statused tr td.tcl').over(function() {
        jQuery(this).find('.sublinks').show('slow');
    },
    function() {
        jQuery(this).find('.sublinks').hide('slow');
    });
});

Além disso, remova isso do seu CSS:
Código:
.table tbody.statused tr td.tcl:hover .sublinks{display:block}
Até mais.
avatar

Solkis
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/01/2008
Mensagens : 9983
Pontos Ativos : 12074

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

Resolvido Re: Efeito hover nos sub fóruns

Mensagem por Luciano98 em 11/02/13, 05:01 am

Olá!

Utilize esse código Javascript:
Código:
jQuery(document).ready(function(){jQuery('.table tbody.statused tr td.tcl').hover(function(){jQuery(this).find('.sublinks').show('slow')},function(){jQuery(this).find('.sublinks').hide('slow')})});

Remova esse código CSS:
Código:
.table tbody.statused tr td.tcl:hover .sublinks{display:block}

Até mais.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

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

Resolvido Re: Efeito hover nos sub fóruns

Mensagem por killerplay em 11/02/13, 12:55 pm

quando eu retiro o codigo css, nao funciona..
avatar

killerplay
Nível 9

Masculino
Inscrito dia : 23/02/2011
Mensagens : 216
Pontos Ativos : 354

Ver perfil do usuário http://narutolegendrpg.ativoforum.com

Resolvido Re: Efeito hover nos sub fóruns

Mensagem por Luciano98 em 11/02/13, 02:34 pm

@killerplay escreveu:quando eu retiro o codigo css, nao funciona..
Independente do Javascript funcionar retire esse CSS, como você quer um efeito de transição, enquanto esse CSS estiver ali o Javascript não vai funcionar:
Código:
.sublinks{display:none;font-size:10px;text-align: center;}.table tbody.statused tr td.tcl:hover .sublinks{display:block;}

Tente utilizar esse Javascript:
Código:
jQuery(document).ready(function(){jQuery('.table tbody.statused tr td.tcl').hover(function(){jQuery(this).find('.sublinks').show('slow')},function(){jQuery(this).find('.sublinks').hide('slow')})});

Até mais.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

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

Resolvido Re: Efeito hover nos sub fóruns

Mensagem por killerplay em 12/02/13, 12:32 pm

não funciona!
avatar

killerplay
Nível 9

Masculino
Inscrito dia : 23/02/2011
Mensagens : 216
Pontos Ativos : 354

Ver perfil do usuário http://narutolegendrpg.ativoforum.com

Resolvido Re: Efeito hover nos sub fóruns

Mensagem por seender em 13/02/13, 03:24 am

Olá!

- Código a ser utilizado:
/* Sub-fóruns - Início */

jQuery(document).on('ready', function() {
/* Sub-fóruns que irão ser exibidos */
var subforuns = '<a href="Endereço do sub-fórum" id="subforum">Título do sub-fórum</a>';
/* Sub-fóruns que irão ser exibidos */

var forum = 2;
var css = "#topicsmsgs{display:none;}#subforum{padding:7px 7px 7px 7px;}";

jQuery(document).ready(function() {
jQuery("li.row:eq(" + forum + "), td.tcl:eq(" + forum + "), td.row2.icon:eq(" + forum + "), td.row1.over:eq(" + forum + ")").append("<style>" + css + "</style><div id='topicsmsgs'>" + subforuns + "</div>")
});
jQuery(document).each(function() {
jQuery('li.row:eq(' + forum + '), td.tcl:eq(' + forum + '), td.row2.icon:eq(' + forum + '), td.row1.over:eq(' + forum + ')').mouseover(function(){
jQuery("#topicsmsgs").fadeOut("fast");
});
jQuery("li.row:eq(" + forum + "), td.tcl:eq(" + forum + "), td.row2.icon:eq(" + forum + "), td.row1.over:eq(" + forum + ")").mouseleave(function(){
jQuery("#topicsmsgs").fadeIn("fast");
});
});
}

);
/* Sub-fóruns - Fim */
Vermelho -> Endereço do sub-fórum.
Laranja -> Título do sub-fórum.
Negrito -> É a parte que terá de multiplicar caso queira adicionar mais sub-fóruns, ex:
Código:
<a href="Endereço do fórum 1" id="subforum">Título do sub-fórum 1</a><a href="Endereço do fórum 2" id="subforum">Título do sub-fórum 2</a>
Verde -> Número do fórum que irá adicionar os sub-fóruns.Entenda a partir da imagem abaixo:
  • A contagem dos fóruns irá começar pelo número 0;
  • De forma crescente poderá se obter o número;
  • Para cada fórum deverá multiplicar todo o código.


- Aplicação do tutorial:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts
Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos em todas as páginas.
Seta Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
Seta 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.

  • Resultado:


Melhores cumprimentos,
seender
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Efeito hover nos sub fóruns

Mensagem por killerplay em 13/02/13, 01:09 pm

Resolvido!
avatar

killerplay
Nível 9

Masculino
Inscrito dia : 23/02/2011
Mensagens : 216
Pontos Ativos : 354

Ver perfil do usuário http://narutolegendrpg.ativoforum.com

Página 2 de 2 Anterior  1, 2

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

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