[TUTORIAL] Botão visualizar nos links [FORÚNS]

por soulokko Sex 08 Fev 2013, 11:06

[TUTORIAL] Botão visualizar nos links

Quando estarmos em um sub-forum e passarmos o mouse em cima do link de um tópico, um pequeno balão é aberto, quando clicado ele abre uma popup mostrando a primeira mensagem do tópico, ex: http://shdesign.ativoforum.com/f18-javascript (clique no link do lado e passe o mouse sobre algum tópico)

--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Botão visualizar nos links

1º - Código js:
Aceda em: Novo código JavaScript

Módulos HTML e JavaScript Gestão dos Códigos JavaScript Novo Código JavaScript

Título: Coloque qualquer título.
Envestimento: Marque "Nos Sub-Forúns".
Código JavaScript: Adicione o seguinte código:

Código:: $(document).ready(function(){ $('.tdtopics a.topictitle').hover(function(){ $('#btnipb').remove(); $(this).before('<span id="btnipb" onblur="$(this).remove();" onmouseleave="$(this).remove();" onclick="executEvent();">VISUALIZAR</span>'); linkka = $(this).attr('href'); }); $('body').prepend('<div id="zlocation"><div id="topic45" style="max-width:70%">Carregando...</div></div>'); $('#zlocation').hide(); }); function apaga(){ $(this).remove(); $('#zlocation').hide(); $('#topic45').html(''); $('#btnipb').remove(); $('#lermais').attr('href',''); } function executEvent(){ $('#topic45').html('Carregando...'); $('#zlocation').show(); $.get(linkka, function(dataS){ pega = $('.entry-content:first', dataS).html(); $('#topic45').html('<center><span id="fechapopt" onclick="apaga();">FECHAR</span><br><br><a id="lermais" href="'+linkka+'">LER MAIS...</a></center><br><hr/><br><br>'+pega); $(this).remove(); }); }

[TUTORIAL] Botão visualizar nos links [FORÚNS] 633772

Salve!

2º - Código css:
Aceda em: Folha de Estilo CSS

Visualização Imagens e Cores Cores Folha de Estilo CSS

Código:: /*botão pre visualizar no link*/ #btnipb{ margin-top: -3%; margin-left: 29px; border:1px solid #033E6E; color: #033E6E; cursor:pointer; border-radius:6px; padding-top:5px; padding-bottom:5px; padding-left:9px; padding-right:9px; background: #62B3F5; position:absolute; z-index: 888; } #zlocation{ z-index: 999; position:fixed; top: 15%; } #topic45{ max-height:350px; overflow:auto; padding:19px; box-shadow:0px 0px 40px #222; background:white; } #fechapopt:hover{ background:#adadad } #fechapopt{ cursor:pointer; padding:7px; border:2px solid #333; font-weight:bold; border-radius:8px; } /*botão pre visualizar no link - fim*/

Salve!

Funcionalidade:
PUNBB.

Resultado:
http://shdesign.ativoforum.com/f18-javascript (clique no link do lado e passe o mouse sobre algum tópico).

[TUTORIAL] Botão visualizar nos links [FORÚNS] Act_bottom

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Botão visualizar nos links