[TUTORIAL] Visualizar tópico em modo hover
Página 1 de 1
[TUTORIAL] Visualizar tópico em modo hover
![]() | Visualizar tópico em modo hover |
Nesse tutorial iremos aplicar um ícone ao lado de cada tópico, onde podemos visualizar a postagem proporcionando a visualização mais rápida dos tópicos, facilitando o nosso tempo e navegação por todo o fórum.
--> Tutoriais, dicas e astúcias <--
Visualizar tópico em modo hover
Visualizar tópico em modo hover
1º - Código a ser utilizado:
Escolha o código da versão de seu fórum. Assim que escolher, veja o segundo passar para aprender a instalar o código e suas funções.
![]() | PHPBB3, PHPBB2 e INVISION |
- Código:
if (/\/?f\d+.*/.test(window.location.pathname)) {
$(function () {
$('a.topictitle').after('<a href="#" style="margin-left: 5px;" class="preview_topic"><img src="http://i.imgur.com/gdvRoFW.png"/></a>');
$('.preview_topic').click(function () {
var url = this.previousSibling.href;
$('body').prepend('<style>.popupWrapper {background-color: rgba(70, 70, 70, 0.6);border-radius: 4px 4px 4px 4px;box-shadow: 0 12px 25px rgba(0, 0, 0, 0.7);left: 300px;margin: 0 auto !important;max-height: 400px;max-width: 700px;overflow: auto;padding: 4px;position: fixed !important;top: 200px;}</style><div style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 10000; opacity: 0.4; background-color: #3E3E3E;" class="modal" id="document_modal"></div><div id="topic_popup" class="popupWrapper" style="z-index: 10001;"></div>');
$('#topic_popup').load(url + ' .post:first', function () {
$('#document_modal').click(function () {
$('#document_modal, #topic_popup').remove();
});
});
return false;
});
});
}
![]() | PUNBB |
- Código:
if (/\/?f\d+.*/.test(window.location.pathname)) {
$(function () {
$('a.topictitle').after('<a href="#" style="margin-left: 5px;" class="preview_topic"><img src="http://i.imgur.com/gdvRoFW.png"/></a>');
$('.preview_topic').click(function () {
var url = this.previousSibling.href;
$('body').prepend('<style>.popupWrapper {background-color: rgba(70, 70, 70, 0.6);border-radius: 4px 4px 4px 4px;box-shadow: 0 12px 25px rgba(0, 0, 0, 0.7);left: 300px;margin: 0 auto !important;max-height: 400px;max-width: 700px;overflow: auto;padding: 4px;position: fixed !important;top: 200px;}</style><div style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 10000; opacity: 0.4; background-color: #3E3E3E;" class="modal" id="document_modal"></div>');
$('.pun').prepend('<div id="topic_popup" class="popupWrapper" style="z-index: 10001;"></div>');
$('#topic_popup').load(url + ' .post:first', function () {
$('#document_modal').click(function () {
$('#document_modal, #topic_popup').remove();
});
});
return false;
});
});
}
2º - Aplicando o código JS:
Painel de Controle ->> Módulos ->> HTML & JAVASCRIPT ->> Gestão dos códigos JavaScript
![[TUTORIAL] Visualizar tópico em modo hover Painel13](https://i.servimg.com/u/f48/15/88/72/83/painel13.png)
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
- Resultado:
© Fórum dos Fóruns
![]() | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Visualizar tópico em modo hover |
![-](https://2img.net/i/empty.gif)
» Visualizar tópico em modo hover
» [TUTORIAL] Visualizar o perfil em modo hover
» Sobre o tutorial visualizar em modo hover
» [TUTORIAL] Visualizar informações de sub fóruns em modo hover
» [TUTORIAL] Tópicos e mensagens em modo hover (PhpBB3)
» [TUTORIAL] Visualizar o perfil em modo hover
» Sobre o tutorial visualizar em modo hover
» [TUTORIAL] Visualizar informações de sub fóruns em modo hover
» [TUTORIAL] Tópicos e mensagens em modo hover (PhpBB3)
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos