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

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

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

Mensagem por soulokko em 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


- 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();
});
}
Salve!

- 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.





© SH-Skins


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

soulokko

Número de Mensagens : 14
Data de inscrição : 08/02/2013
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

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